VSCode использует сниппеты для создания очень практичных блоков кода.

Visual Studio Code

1. Старт

1. Как настроить

Windows: Файл > Настройки > Пользовательские фрагменты.

Mac: Код > Настройки > Фрагменты пользователя

2. Выберите существующий фрагмент кода или создайте фрагмент кода (вы можете изменить существующий фрагмент кода или создать новый фрагмент кода)

Существует два типа фрагментов кода:

  1. Фрагменты глобального кода (блокировки могут запускаться в любой локали).
  2. Локальный фрагмент кода соответствующего языка (может быть запущен только в соответствующей языковой среде), новый глобальный фрагмент кода будет вsnippetsсоздается в каталоге.code-snippetsявляется файлом конфигурации с суффиксом, и будет создан новый фрагмент кода для соответствующего языка.对应语言 + .jsonконфигурационный файл.

На следующем рисунке показан начальный интерфейс для создания блока кода:

Например: мы создаем новый файл фрагмента кода с именем my-snippets

После создания нового появится пример по умолчанию, который выглядит как json-подобный файл конфигурации.

Далее мы можем с радостью построить новыйmy-snippets.code-snippetsНастройте наш фрагмент кода в файле. 😀😀😀

2. Синтаксис сниппета

Однако после создания примера по умолчанию вы можете запутаться: что это? 😳 😳 😳

Далее я буду использовать этот пример по умолчанию, чтобы объяснить синтаксис сниппета VSCode.

// Example:
"Print to console": {
    "scope": "javascript,typescript",
    "prefix": "log",
    "body": [
        "console.log('$1');",
        "$2"
    ],
    "description": "Log output to console"
}
  • ExampleследующееPrint to consoleСоответствующее имя фрагмента кода (при активации фрагмента кода будет отображаться имя соответствующего фрагмента кода).
  • prefixСоответствует символу, запускающему фрагмент.
  • bodyСодержимое соответствующего фрагмента кода может быть строкой или массивом, если это массив, то каждый элемент вставляется отдельной строкой.bodyКонтент поддерживает escape-символы js, такие как\n\rПодождите, я лично не рекомендую использовать\n, можно начать с новой строки, чтобы вставить в массив еще один элемент, иначе бывает непросто соблюсти формат блока кода, если строк слишком много.
  • descriptionСоответствующее описание фрагмента кода.

1. Заполнитель $

logметод$За ним следует число, указывающее позицию курсора после того, как фрагмент кода сработает, чтобы попасть в редактор, а позиции курсора сортируются от наименьшего к наибольшему.logметод при вводеlog + TABТогда курсор по умолчанию упадет наlog()в скобках ($1положение), если положение курсора в это время не перемещается вручную, нажмите еще разTABкурсор упадет наconsole.log()Вторая строка ($2положение), конечно, вы также можете установить$3、$4... и т.д.

Примечание: 👇

$0Используется для установки конечной позиции курсора, установите$0После этого установка других заполнителей позже не вступит в силу.$0прекращеноTAB键операция перехода курсора.

2. Варианты содержания заполнителя

"方法注释": {
    "prefix": "zs-Function",
    "body": [
      "/**",
      " * @description description...",
      " * @param { ${1|Boolean,Number,String,Object,Array,*|} } name description...",
      " * @return { ${2|Boolean,Number,String,Object,Array,*|} } description...",
      " */",
      "$0"
    ],
    "description": "添加方法注释"
  }

Выше приведен простой способ комментирования блока кода. По умолчанию заполнитель не имеет дополнительных параметров. Если вы хотите установить необязательное содержимое содержимого заполнителя, оно записывается как${1|a,b,c}, в скобках1соответствует нажатиюTABПосле порядка падения курсораabcнеобязательные элементы, разделенные запятыми. Таким образом, приведенный выше код набираетzs + TAB После того, как первый курсор упадет наparam name... {}в фигурных скобках ($1местоположение), как показано на рисунке ниже, вы можете увидеть варианты настройки.

После выбора типа параметра снова нажмитеTAB, курсор автоматически переместится на возвращаемый тип параметра ($2местоположение) и всплывающие варианты. Следующее:

После выбора второго варианта снова нажмитеTAB, курсор автоматически падает на наш настроенный$0место, то есть*/Следующая строка:

Примечание: 👇

  • Если выбираемое содержимое имеет только одно значение, оно может быть записано как${1:default}формат.
  • Содержимое заполнителя поддерживает вложение, например${1:another ${2:placeholder}}.

3. Переменные

использовать$nameили${name:default}Можно вставить значение переменной. Если переменная не задана, вставляется ее значение по умолчанию или пустая строка. Когда переменная неизвестна (ее имя не определено), вставленное имя переменной преобразуется в заполнитель.

В VSCode доступны следующие переменные:

1) Документация по:

Переменная Значение переменной
TM_SELECTED_TEXT Текущий выделенный текст или пустая строка
TM_CURRENT_LINE содержимое текущей строки
TM_CURRENT_WORD Содержимое слова под курсором или пустая строка
TM_LINE_INDEX Номера строк с нулевым индексом
TM_LINE_NUMBER нумерация строк на основе одного индекса
TM_FILENAME имя файла текущего документа
TM_FILENAME_BASE Имя файла текущего документа без расширения
TM_DIRECTORY директория текущего документа
TM_FILEPATH Полный путь к файлу текущего документа
CLIPBOARD содержимое буфера обмена
WORKSPACE_NAME Имя открытой рабочей области или папки

2) Текущая дата и время:

Переменная Значение переменной
CURRENT_YEAR текущий год
CURRENT_YEAR_SHORT Последние две цифры текущего года
CURRENT_MONTH Месяц в виде двух цифр (например, «02»)
CURRENT_MONTH_NAME Полное название месяца (например, «июнь») (китайский язык соответствует июню)
CURRENT_MONTH_NAME_SHORT Аббревиатура месяца (например, «июнь») (китайский язык соответствует июню)
CURRENT_DATE какой день месяца
CURRENT_DAY_NAME день недели (например, «понедельник»)
CURRENT_DAY_NAME_SHORT Сегодня — это сокращение дня недели (например, «Пн») (китайский язык соответствует понедельнику).
CURRENT_HOUR Текущий час в 24-часовом формате
CURRENT_MINUTE текущий счет
CURRENT_SECOND текущая секунда

3) Чтобы вставить строчные или блочные комментарии, следуйте текущему языку:

Переменная Значение переменной
BLOCK_COMMENT_START Вывод: PHP /* или формат HTML
LINE_COMMENT Вывод: формат PHP // или HTML

Возьмите каштан:

Следующий блок кода является широко используемым комментарием к блоку для добавления автора и времени вверху файла, где используется год (CURRENT_YEAR)Луна(CURRENT_MONTH)день($CURRENT_DATE) системная переменная.

"作者和时间注释": {
    "prefix": "zs-Author & Time",
    "body": [
      "/**",
      " * Created by preference on $CURRENT_YEAR/$CURRENT_MONTH/$CURRENT_DATE",
      " */",
      "$0"
    ],
    "description": "添加作者和时间注释"
  }

Еще каштан:

Следующий блок кода является новым.Vue Блок кода шаблона для файла, который использует имя файла текущего документа без расширения (TM_FILENAME_BASE), заполните имя файла по умолчаниюnameиclassсередина.

 "Vue模板": {
    "prefix": "vue-template",
    "body": [
      "<template>",
      "  <section class=\"$TM_FILENAME_BASE\">",
      "    $1",
      "  </section>",
      "</template>\n",
      "<script>",
      "export default {",
      " name: '$TM_FILENAME_BASE',",
      "  data() {",
      "    return {\n",
      "    }",
      "  },",
      "  components: {},",
      "  watch: {},",
      "  mounted() {},",
      "  methods: {}",
      "}",
      "</script>\n",
      "<style scoped lang=\"less\">\n",
      "</style>",
      "$0"
    ],
    "description": "Vue模板"
  }

3. Заключение

Комбинируя заполнители и переменные, вы можете дать полную волю своему воображению, чтобы установить свои любимые и часто используемые фрагменты кода для повышения эффективности разработки и опыта разработки.Я надеюсь, что эта статья поможет вам поднять в комментариях.

Справочная статья:Creating your own snippets in Visual Studio Code

Категории