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

98

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

code-snippets  visual-studio-code 
— BeastCode
джерело
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 + пробіл), яке з’явиться першим.

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

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

— vinod
джерело
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 для цілого.

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