πŸ”§ Как ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ сниппСт Π² VS Code? Π£Π·Π½Π°ΠΉΡ‚Π΅ простой способ!

Как ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ сниппСт Π² VS Code?

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ сниппСт Π² VS Code, Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ шаги:

  1. ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ VS Code ΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°Ρ†ΠΈΡŽ клавиш Ctrl + Shift + P, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ панСль ΠΊΠΎΠΌΠ°Π½Π΄.
  2. Π’Π²Π΅Π΄ΠΈΡ‚Π΅ "Preferences: Configure User Snippets" ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΡƒΡŽ ΠΊΠΎΠΌΠ°Π½Π΄Ρƒ.
  3. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ язык, для ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ сниппСт, ΠΈΠ»ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ "New Global Snippets File" для создания Π½ΠΎΠ²ΠΎΠ³ΠΎ глобального сниппСта.
  4. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΉ сниппСт для рСдактирования ΠΈΠ»ΠΈ создайтС Π½ΠΎΠ²Ρ‹ΠΉ.
  5. Π’Π²Π΅Π΄ΠΈΡ‚Π΅ ΠΊΠΎΠ΄ сниппСта Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅ ΠΈ сохранитС измСнСния.

НапримСр, Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ сниппСт для HTML, Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ дСйствия:

{
  "HTML Snippet": {
    "prefix": "html",
    "body": [
        "<!DOCTYPE html>",
        "<html>",
        "  <head>",
        "    <title>$1</title>",
        "    <meta charset=\"UTF-8\">",
        "  </head>",
        "  <body>",
        "    $2",
        "  </body>",
        "</html>"
    ],
    "description": "HTML Snippet"
  }
}

ПослС сохранСния ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π²Ρ‹ смоТСтС ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½Π½Ρ‹ΠΉ сниппСт Π² своСм ΠΊΠΎΠ΄Π΅.

Π”Π΅Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΎΡ‚Π²Π΅Ρ‚

Как ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ сниппСт Π² VS Code

Π‘Π½ΠΈΠΏΠΏΠ΅Ρ‚Ρ‹ Π² VS Code - это ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΈΠ΅ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Ρ‹ ΠΊΠΎΠ΄Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ быстро Π²ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ ΠΏΡ€ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅. Они ΡƒΠΏΡ€ΠΎΡ‰Π°ΡŽΡ‚ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π΅Π½ΠΈΠ΅ ΠΎΠ΄Π½ΠΎΡ‚ΠΈΠΏΠ½Ρ‹Ρ… конструкций ΠΈ ΡΠΎΠΊΡ€Π°Ρ‰Π°ΡŽΡ‚ врСмя, Π·Π°Ρ‚Ρ€Π°Ρ‡ΠΈΠ²Π°Π΅ΠΌΠΎΠ΅ Π½Π° Π½Π°Π±ΠΎΡ€ ΠΊΠΎΠ΄Π°. Если Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΉ сниппСт ΠΈΠ»ΠΈ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ свой собствСнный, Π²Π°ΠΌ понадобится ΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚ΡŒ нСскольким шагам.

Π¨Π°Π³ 1: ΠžΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ сниппСты

ΠŸΠ΅Ρ€Π²Ρ‹ΠΌ шагом являСтся ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΈΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… сниппСтов. Для этого Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ дСйствия:

  • ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ VS Code
  • Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΏΡƒΠ½ΠΊΡ‚ мСню "Π€Π°ΠΉΠ»"
  • Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ "Настройки" (ΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°Ρ†ΠΈΡŽ клавиш Ctrl + ,)
  • Π’ ΠΎΡ‚ΠΊΡ€Ρ‹Π²ΡˆΠ΅ΠΌΡΡ ΠΎΠΊΠ½Π΅ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ "ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ сниппСты"

Π’Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅ список доступных языков, для ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ собствСнныС сниппСты.

Π¨Π°Π³ 2: Π’Ρ‹Π±Ρ€Π°Ρ‚ΡŒ язык ΠΈ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ сниппСт

Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ язык, для ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ сниппСт. НапримСр, Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ сниппСт для языка JavaScript, Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ "JavaScript" ΠΈΠ· списка.

ПослС Π²Ρ‹Π±ΠΎΡ€Π° языка откроСтся Ρ„Π°ΠΉΠ» с ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΌΠΈ сниппСтами для Π²Ρ‹Π±Ρ€Π°Π½Π½ΠΎΠ³ΠΎ языка.

Π¨Π°Π³ 3: Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΉ сниппСт ΠΈΠ»ΠΈ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π½ΠΎΠ²Ρ‹ΠΉ

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΉ сниппСт ΠΈΠ»ΠΈ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π½ΠΎΠ²Ρ‹ΠΉ. Π‘Π½ΠΈΠΏΠΏΠ΅Ρ‚Ρ‹ Π² VS Code ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ синтаксис JSON.

Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΉ сниппСт, Π½Π°ΠΉΠ΄ΠΈΡ‚Π΅ Π΅Π³ΠΎ Π² Ρ„Π°ΠΉΠ»Π΅ ΠΈ внСситС Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Π΅ измСнСния. НапримСр, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ сниппСта ΠΈΠ»ΠΈ Π΅Π³ΠΎ содСрТимоС.

Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π½ΠΎΠ²Ρ‹ΠΉ сниппСт, Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Π½ΠΎΠ²Ρ‹ΠΉ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ Π² Ρ„Π°ΠΉΠ» с ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΌΠΈ полями. НапримСр:


"newSnippet": {
    "prefix": "new",
    "body": [
        "console.log('Новый сниппСт');"
    ],
    "description": "ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Π½ΠΎΠ²ΠΎΠ³ΠΎ сниппСта"
}

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ создаСтся Π½ΠΎΠ²Ρ‹ΠΉ сниппСт с прСфиксом "new". ΠŸΡ€ΠΈ вставкС сниппСта Π±ΡƒΠ΄Π΅Ρ‚ автоматичСски вставлСно содСрТимоС "console.log('Новый сниппСт');". ОписаниС "ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Π½ΠΎΠ²ΠΎΠ³ΠΎ сниппСта" ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π²Π°ΠΌ Π·Π°ΠΏΠΎΠΌΠ½ΠΈΡ‚ΡŒ Π½Π°Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ сниппСта.

Π¨Π°Π³ 4: Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ измСнСния

ПослС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π²Ρ‹ внСсли Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Π΅ измСнСния, сохранитС Ρ„Π°ΠΉΠ» сниппСтов. Для этого Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΏΡƒΠ½ΠΊΡ‚ мСню "Π€Π°ΠΉΠ»" ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ "Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ" (ΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°Ρ†ΠΈΡŽ клавиш Ctrl + S).

ИзмСнСния вступят Π² силу сразу послС сохранСния Ρ„Π°ΠΉΠ»Π°. Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½Π½Ρ‹ΠΉ ΠΈΠ»ΠΈ Π½ΠΎΠ²Ρ‹ΠΉ сниппСт Π²ΠΎ врСмя Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ.

Π—Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅

ИзмСнСниС сниппСтов Π² VS Code - это простой ΠΈ эффСктивный способ ΡƒΡΠΊΠΎΡ€ΠΈΡ‚ΡŒ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΡƒ. БлСдуя ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Ρ‹ΠΌ Π²Ρ‹ΡˆΠ΅ шагам, Π²Ρ‹ смоТСтС ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ сниппСты ΠΈΠ»ΠΈ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π½ΠΎΠ²Ρ‹Π΅ сниппСты Π½Π° основС своих потрСбностСй.

НС Π±ΠΎΠΉΡ‚Π΅ΡΡŒ ΡΠΊΡΠΏΠ΅Ρ€ΠΈΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ с сниппСтами ΠΈ Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ ΠΈΡ… ΠΏΠΎΠ΄ свои Π½ΡƒΠΆΠ΄Ρ‹. Π­Ρ‚ΠΎ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π²Π°ΠΌ ΡΡ‚Π°Ρ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠΌ ΠΈ ΡΡΠΊΠΎΠ½ΠΎΠΌΠΈΡ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ Π² процСссС написания ΠΊΠΎΠ΄Π°.

Π£Π΄Π°Ρ‡ΠΈ Π² дальнСйшСй Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅!

Π’ΠΈΠ΄Π΅ΠΎ ΠΏΠΎ Ρ‚Π΅ΠΌΠ΅

Как ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ сниппСты ΠΊΠΎΠ΄Π° Π² VS Code

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ своих сниппСтов Π² VS Code

#3 Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ свои сниппСты Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅ VS Code

ΠŸΠΎΡ…ΠΎΠΆΠΈΠ΅ ΡΡ‚Π°Ρ‚ΡŒΠΈ:

πŸ”’ΠšΠ°ΠΊ ΠΏΡ€ΠΎΠ΄Π»ΠΈΡ‚ΡŒ PyCharm Professional: Π»Π΅Π³ΠΊΠΈΠΉ способ!πŸ”’

🎨 Как ΠΏΠΎΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ Π² PyCharm - ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Ρ‹ΠΉ Π³Π°ΠΉΠ΄ для Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ…

πŸ”§ Как ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ сниппСт Π² VS Code? Π£Π·Π½Π°ΠΉΡ‚Π΅ простой способ!

Как Π² VS Code ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ сразу нСсколько ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹Ρ… элСмСнтов 🧹

πŸ”Ž Для Ρ‡Π΅Π³ΠΎ git тСстировщику: практичСскоС руководство

πŸ”‘ Как ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Git Π² VS Code: ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎΠ΅ руководство для Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ