Фрагменты кода - это шаблоны, которые упрощают ввод повторяющихся шаблонов кода, например циклов или условных операторов. (Код Visual Studio)

Например, в JavaScript вместо вставки console.log(’Hello World…’) вы можете использовать встроенный фрагмент VSCode log, вставив его, а затем нажав кнопку tab, чтобы полностью отобразить его в редакторе. Есть много других встроенных фрагментов кода VSCode, которые вы можете использовать:

1. Нажмите shift+cmd+p в Mac или shift+ctrl+p в Windows, чтобы открыть палитру команд.

2. Вставьте команду Insert Snippet в палитру команд, чтобы получить список фрагментов для языка текущего файла, затем нажмите кнопку ввода, чтобы увидеть их.

Многие расширения на VS Code Marketplace включают фрагменты. Вы можете искать расширения, содержащие фрагменты, в представлении Расширения (shift+cmd+x в Mac или shift+ctrl+x в Windows) с помощью фильтра @category:"snippets". (Код Visual Studio)

Как создавать свои собственные сниппеты?

Я работаю с React, и на VS Code Marketplace есть популярное расширение фрагментов кода для React, но большинство его фрагментов для меня бесполезны. Поэтому я предпочитаю создавать свои собственные сниппеты.

Я хочу создать фрагмент компонента React TypeScript, который берет свое имя из имени файла:

1. Откройте палитру команд, нажав shift+cmd+p в Mac или shift+ctrl+p в Windows.

2. Вставьте configure user snippets

3. Выберите язык, для которого должны отображаться фрагменты.

4. Например, чтобы создать фрагмент для файла React TypeScript, выберите typescriptreact, затем нажмите кнопку ввода.

5. VSCode откроет ***.json (typescriptreact.json для предыдущего выбора).

6. Вставьте указанный ниже атрибут в объект ***.json (typescriptreact.json):

"React Arrow Function Component": {
  "prefix": "trafc",
  "body": [
    "type Props = {};\n",
    "const $TM_FILENAME_BASE = ({}: Props) => {",
    "  return <></>;",
    "};\n",
    "export default $TM_FILENAME_BASE;\n"
  ],
  "description": "Create TypeScript React arrow function component"
}

7. Вы можете использовать фрагмент trafc для файла React TypeScript.

Теперь я хочу описать, что говорит приведенный выше код:

  • «Компонент функции React Arrow» - это имя фрагмента. Он отображается через IntelliSense, если не указан description.
  • prefix - это фрагмент, который мы можем использовать в VSCode для отображения body.
  • body - это массив строк, состоящий из кода, который мы хотим отобразить с помощью сниппета prefix. Каждая строка нашего кода должна быть помещена в строку. Если вам нужно использовать тип символа \n.
  • description, как видно из названия, является описанием нашего фрагмента.

Другой пример - создать console.log с описанием типа console.log("status:", status). Конфигурация фрагмента показана в следующем разделе:

"console.log with description": {
  "prefix": "lg",
  "body": ["console.log('${1:desc}:', ${1:desc})"],
  "description": "Insert a console.log() with description as the           same as the variable."
}
  1. Новинка - ${1:desc}. 1 означает, что после того, как вы вставите фрагмент, курсор будет помещен в эту позицию.

2. desc означает, что эти две части должны быть одинаковыми, чтобы VSCode мог вводить их одновременно. Для получения дополнительной информации проверьте эту ссылку.