Як додати власні фрагменти коду у VSCode?


98

Чи можна додати власні фрагменти коду в Visual Studio Code? А якщо так, то як? VSCode базується на Atom, тому це повинно бути можливим.



2
Ви також можете перейти до Налаштування> Фрагменти користувачів, а потім вибрати мову, на якій ви хочете створити фрагмент.
Amituuush

Чи справді існує взаємозв'язок між VS Code як Atom, крім того, що вони обидва використовують Electron під капотом?
skelliam

Для цього використовуйте службу кодових фрагментів . Ви можете створювати власні фрагменти, редагувати та синхронізувати за допомогою codessnippet cli всі фрагменти відразу, просто витягуючи з сервера!
user13428826

Я хочу додати посилання на веб-сторінку в описі, хтось знає, як це зробити?
січень,

Відповіді:


116
  1. Натисніть> shift+ command+ pі введіть фрагменти
  2. Виберіть Налаштування: Відкрийте фрагменти користувача
  3. Виберіть тип мови, для якої потрібно додати власний фрагмент
  4. vscode має коментарі, щоб пояснити, як додати фрагмент, як описано в:> vsdoc

Скажімо, ми хочемо відкрити власні фрагменти для мови GO. Тоді ми можемо зробити:

  1. Натисніть> command+p
  2. Введіть: go.json + enterІ ви потрапите на сторінку власних описів

Фрагменти визначаються у форматі JSON і зберігаються у файлі .json кожного користувача (languageId). Наприклад, фрагменти Markdown потрапляють у файл markdown.json.


Оновлення нових інструментів:
Сайт генератора фрагментів: https://snippet-generator.app/


3
snippet generator дуже корисний
rainversion_3

66

крок - 1 Існує плагін VsCode, який називається: snippet creator ..

Після його встановлення вам потрібно лише:

  1. Виберіть код, який потрібно зробити фрагментом.
  2. Клацніть правою кнопкою миші та виберіть "Палітра команд" (або Ctrl+ Shift+ P).
  3. Напишіть "Створити фрагмент".
  4. Виберіть тип файлів, які потрібно переглядати, щоб активувати ярлик фрагмента.
  5. Виберіть ярлик фрагмента.
  6. Виберіть назву фрагмента.

крок - 2 перевірте цей веб-сайт . Ви можете створювати фрагменти для коду проти, піднесеного тексту та атома.

Після створення фрагмента на цьому сайті. Перейдіть до відповідного файлу коду IDE та вставте той самий. Наприклад, для фрагмента JS у коді VS перейдіть до Файл-> налаштування-> фрагмент користувача, тоді він відкриє файл javascript.json, потім вставте код фрагмента зверху сайту всередину цього, і ми готові піти.


8
Це такий чудовий інструмент! Я не міг шлунку виписати спеціальний HTML-шаблонний фрагмент, маючи наводити цитати та уникати кожного рядка, тому це справді відповідь, яку я шукав.
nabrown

3
Серйозно, тут рятівник.
JeremyW

Ого, це чудовий інструмент, який працював ідеально. Має бути позначена правильна відповідь
StefanBob

Посилання на генератор фрагментів порушено. Будь ласка , перейдіть по цьому посиланню: snippet-generator.app
Сандип Субедей

чому ви написали step1 і step2? це більше схоже на варіант 1 та варіант 2, чи вони пов’язані?
Xsmael

26

Починаючи з версії 0.10.6, ви можете додавати власні фрагменти. Прочитайте документацію щодо створення власних фрагментів . Ви можете знайти / створити власні фрагменти, розмістивши файл json в C:\Users\<yourUserName>\AppData\Roaming\Code\User\snippets. Наприклад, спеціальні фрагменти JavaScript будуть у форматі\snippets\javascript.json

Ви також можете публікувати свої фрагменти, що також є дійсно акуратною функцією. Джон Папа створив приємний фрагмент angular + typecript, який ви можете завантажити як розширення на ринку .

Ось приклад фрагмента, взятого для документації на цикл javascript for:

"For Loop": {
    "prefix": "for",
    "body": [
        "for (var ${index} = 0; ${index} < ${array}.length; ${index}++) {",
        "\tvar ${element} = ${array}[${index}];",
        "\t$0",
        "}"
    ],
    "description": "For Loop"
},

Де

  • For Loop - це назва фрагмента
  • prefixвизначає префікс, який використовується у спадному меню IntelliSense. У цьому випадку для.
  • body- це вміст фрагмента. Можливі змінні:
    • $ 1, $ 2 за зупинки
    • $ {id} та $ {id: label} та $ {1: label} для змінних
    • Змінні з однаковим ідентифікатором пов’язані.
  • description - це опис, використаний у спадному меню IntelliSense

6
Їм справді потрібен якийсь багаторядковий синтаксис рядкового літералу або спосіб перетягнути тіло в окремий файл. Цитувати та уникати кожного окремого рядка - божевілля.
Mark Wilbur

Вибачте за голосування проти цієї відповіді, це був шахрайський клік 🙄
Джайлз Батлер

16

Ви можете переглянути це відео для короткого короткого підручника

https://youtu.be/g1ouTcFxQSU

Перейдіть до Файл -> Налаштування -> Фрагменти користувачів . Виберіть бажану мову.
Тепер введіть такий код, щоб створити фрагмент циклу for:

  "Create for loop":{
    "prefix": "for",
    "body":[
      "for(int i = 0; i < 10; i++)",
      "{",
      "   //code goes here",
      "}"
    ],
   "description": "Creates a for loop"
  }

Ви закінчили.
Введіть "для" у редакторі та використовуйте перше передбачення.

SHORTCUT--

  1. встановити розширення Snippet-creator .
  2. Виділіть код, який вам потрібен для створення фрагмента.
  3. натисніть ctrl+ shift+ Pі введіть "Створити фрагмент" на палітрі команд і натисніть ENTER.
  4. виберіть мову, для якої потрібно створити фрагмент (наприклад: -CPP), потім введіть
    ім’я фрагмента, ярлик типу фрагмента та введіть опис фрагмента.
    Тепер вам добре їхати.
    Введіть ярлик фрагмента в редакторі, який ви ввели на кроці 4, і виберіть
    передбачення (якщо передбачення не з’явиться, натисніть ctrl + пробіл), яке з’явиться першим.

Сподіваюся, це допомагає :)

Примітка: перейдіть до Файл-> Налаштування-> Фрагменти користувача. Потім виберіть мову, якою ви
створили фрагмент. Ви знайдете там фрагмент.


9

Існує плагін VsCode, який називається: snippet creator ..

Після його встановлення вам потрібно лише:

  1. Виберіть код, який потрібно зробити фрагментом.
  2. Клацніть правою кнопкою миші та виберіть "Палітра команд" (або Ctrl+ Shift+ P).
  3. Напишіть "Створити фрагмент".
  4. Виберіть тип файлів, які потрібно переглядати, щоб активувати ярлик фрагмента.
  5. Виберіть ярлик фрагмента.
  6. Виберіть назву фрагмента.

Це все ..

Примітка: якщо ви хочете редагувати свої фрагменти, ви знайдете їх у [fileType] .json
Приклад: Ctrl+ P, а потім виберіть "javascript.json"


5

Ви можете додати власні сценарії, перейдіть до File --> Preferences --> User Snippets. Виберіть бажану мову.

Якщо ви виберете Javascript, ви побачите спеціальний сценарій за замовчуванням, console.log(' ');наприклад:

"Print to console": {
    "prefix": "log",
    "body": [
        "console.log('$1');",
        "$2"
    ],
    "description": "Log output to console"
},

5

Я спробував, додавши фрагменти в javascriptreact.json, але це не спрацювало для мене.

Я спробував додати фрагменти до глобальної області, і це працює як шарм.

FILE --> Preferences --> User snippets

тут виберіть New Global Snippets File, дайте ім'я javas criptreact.code-snippets.

Для інших мов ви можете назвати, наприклад, [your_longuage] .code-snippets

введіть тут опис зображення


4

Наразі це недокументована функція, але незабаром. Є папка, до якої ви можете їх додати, і вони з’являться, але вона може змінитися (вона не має документальної причини).

Найкраща порада - додати це на сайт uservoice і почекати, поки його остаточний результат не з’явиться. Але воно наближається.



0

Якщо ви не хочете займатися написанням своїх фрагментів у JSON, перегляньте Snipster . Це дозволяє писати фрагменти, як і сам код - не потрібно обертати кожен рядок у лапки, уникати символів, додавати метаінформацію тощо.

Це також дозволяє писати один раз, публікувати де завгодно . Тож ви зможете використовувати свій фрагмент у VS Code, Atom та Sublime, а також у майбутньому в інших редакторах. Більше інформації тут .


0

Це може бути не справжньою відповіддю (як деякі відповіли вище), але якщо ви зацікавлені у створенні власних фрагментів коду для інших людей, ви можете створити розширення, використовуючи yeoman і npm (який за замовчуванням поставляється разом з NodeJS). ПРИМІТКА: Це лише для створення фрагментів для інших систем. Але це теж працює для вас! Крім того, що вам потрібен код JS для цілого.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.