Как добавить собственные фрагменты кода в VSCode?


101

Можно ли добавить собственные фрагменты кода в Visual Studio Code? И если да, то как? VSCode основан на Atom, поэтому это должно быть возможно.



2
вы также можете перейти в «Настройки»> «Пользовательские фрагменты», а затем выбрать язык, на котором вы хотите создать фрагмент.
Амитуууш, 01

Есть ли действительно связь между VS Code как Atom, кроме того факта, что они оба используют Electron под капотом?
skelliam

Для этого используйте сервис codessnippet . Вы можете создавать собственные сниппеты, редактировать и синхронизировать с 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
генератор
сниппетов

68

option - 1 Есть плагин VsCode под названием: snippet creator ..

После его установки все, что вам нужно сделать, это:

  1. Выберите код, который вы хотите превратить в фрагмент.
  2. Щелкните его правой кнопкой мыши и выберите «Палитра команд» (или Ctrl+ Shift+P ).
  3. Напишите «Создать сниппет».
  4. Выберите тип файлов, которые необходимо просмотреть, чтобы активировать ярлык для вашего фрагмента.
  5. Выберите ярлык для фрагмента.
  6. Выберите название сниппета.

вариант - 2 проверить этот сайт . вы можете создавать сниппеты для кода vs, возвышенного текста и атома.

После создания сниппета на этом сайте. Перейдите к файлу фрагмента соответствующей среды IDE и вставьте его. Например, для фрагмента JS в коде VS перейдите в раздел File-> preference-> user snippet, затем он открывает файл javascript.json, затем вставляет фрагмент кода с указанного выше сайта внутрь него, и все готово.


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

3
Серьезно, здесь палочка-выручалочка.
JeremyW

Вау, это отличный инструмент, отлично сработавший. Следует отметить правильный ответ
StefanBob

Ссылка на генератор фрагментов не работает. Пожалуйста, перейдите по этой ссылке: snippet-generator.app
Sandip Subedi

1
почему вы написали step1 и step2? это больше похоже на option1 и option2, или они связаны?
Xsmael

26

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

Вы также можете публиковать свои сниппеты, что тоже очень удобная функция. Джон Папа создал красивый фрагмент angular + typescript, который вы можете скачать как расширение на торговой площадке .

Вот пример фрагмента, взятого для документации по javascript для цикла:

"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
Им действительно нужен синтаксис многострочного строкового литерала или способ вывести тело в отдельный файл. Цитирование и экранирование каждой строки - безумие.
Марк Уилбур

Приносим извинения за голосование против этого ответа, это был мошеннический щелчок 🙄
Джайлз Батлер

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"
  }

Вы сделали.
Наберите "for" в редакторе и воспользуйтесь первым предсказанием.

КОРОТКОЕ -

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

Надеюсь это поможет :)

Примечание: перейдите к File-> Preferences-> User Snippets. Затем выберите язык, на котором вы
создали фрагмент. Здесь вы найдете фрагмент.


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

На данный момент это недокументированная функция, но скоро появится. Есть папка, в которую вы можете добавить их, и они появятся, но она может измениться (по какой-то причине это недокументировано).

Лучший совет - добавить это на сайт с голосовыми сообщениями пользователей и дождаться его окончания. Но это приближается.



0

Если вы не хотите писать свои сниппеты в JSON, попробуйте Snipster . Он позволяет вам писать фрагменты, как если бы вы писали сам код - без необходимости заключать каждую строку в кавычки, escape-символы, добавлять метаинформацию и т. Д.

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


0

Возможно, это не настоящий ответ (как некоторые ответили выше), но если вы заинтересованы в создании пользовательских фрагментов кода для других людей, вы можете создавать расширения, используя yeoman и npm (который по умолчанию поставляется вместе с NodeJS). ПРИМЕЧАНИЕ: это только для создания сниппетов для других систем. Но это также работает и для вас! За исключением того, что вам нужен код JS для всего этого.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.