Создайте плагин vscode, чтобы больше не работало 996

Каждый раз, когда вы меняете работу и меняете шахту, вам приходится переустанавливать различные среды и устанавливать новую.vscodeДолжен получить плагин, ноvscodeВы действительно разбираетесь в плагинах? Сегодня мы поговорим о наиболее часто используемых в разработке плагинах, называемых фрагментами кода.snippets, вы также можете создать плагин и опубликовать его на рынке приложений.

Что такое сниппеты

кодирование маленького театра

(Сюжет чисто выдуманный, если есть сходство, считайте, что я вас копирую)

Цян - превосходный осадный лев в компании. Четкий звук постукивания по механической клавиатуре и слегка отведенная назад линия роста волос являются символом его личности. Превосходная система знаний во внешнем интерфейсе позволяет ему справляться с различными потребностями продуктов и продуктов каждый день. . . .

Обладая более чем 20-летним стажем работы одной рукой, А Цян каждый раз может уложиться в срок, чтобы завершить свою работу, и он прочно удерживает позицию лидера в области передовых технологий.

Еще один день, как обычно, команда проекта пришла на новый передний осадный лев по имени Ayong. Объем волос Ayong потрясающий. Он никогда не использовал механическую клавиатуру для разработки кода, и он был погружен в визуализацию на первом месте в течение многих лет.

Цян был спокойным на поверхности, но он был довольно завистла от объема волос Yong. Так как он сидел за столом позади него, он, естественно, заинтересовался этим новым интерфейсом Yong.

Через неделю А Цян благодаря внимательному наблюдению обнаружил, что А Йонг очень быстро начал работу с кодом и перешел на формальную стадию разработки менее чем за два дня. На разработку функций этой недели ушло еще два дня. Маленькая зеленая иконка на пре-релизе — символ победы Айонга. заставил Ацяна уйти, крупного мужчину с головой, полной беспокойства.

А Цян подумал про себя: пора взять на себя инициативу в атаке.

Цян начал каждый день приносить А Чжэнь любовный завтрак, а также намеренно или ненамеренно общался с А Йонгом, начиная с ухода за волосами, а затем и до итерационных особенностей различных интерфейсных фреймворков. Через неделю А Цян наконец раскрыл секрет высокой эффективности А Йонга:

Он установил все видыsnippetsплагин и запомните сокращения.

Вынужденный не может дождаться, чтобы надетьsnippetsПлагин, я обнаружил, что он действительно более эффективен, сделал глоток чая лайчи Пуэр, прищурился на рекламу пересадки волос недалеко от окна, и уголки рта слегка приподнялись.

сегмент кода

code snippetsТакже известный как фрагмент кода, он используется для ввода некоторых определенных кодов шаблонов, чтобы ускорить процесс кодирования, например:tsrfc то естьtypescript react function componentАббревиатура , за которой следует некоторая описательная информация.

Выберите первый вариант в раскрывающемся списке, и появится информация о шаблоне, как показано ниже.

snippetsОн также привязан к языку разработки, а разные языки могут иметь разныеsnippets,Напримерcomputedпараметры будут толькоvueв результате,reactНет, чтобы не запутаться,vscodeМеханизм заключается в том, чтобы делать разные сопоставления для разных языков, встроенные в конфигурацию.snippets час,vscodeЭто даст вам приоритет для выбора языка, который вы хотите применить.

Вообще-то в предыдущей статье есть абзац(портал) представлен в местномvscodeКонфигурация в среде разработкиsnippets, это самый простой обычайsnippetsметод, но есть и недостатки:

Первая проблемаsnippetsКонфигурация представляет собой файл json, как показано на следующем рисунке.bodyЕдинственным приемлемым форматом является либо однострочная строка, либо массив строк, поэтому при копировании и вставке общих кодов вам необходимо выполнить цикл преобразования формата.

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

Рынок плагинов

vscodeРынок плагинов   очень богат. На нем вы можете не только найти стандартную подсветку языка, поддержку тем, проверку кода и другие плагины для разработки, но вы также можете почистить leetcode и поиграть в Xiaobawang.

так что используйтеvscodeПлагин способ поддерживатьsnippetsЭто очень хороший способ, вvscodeНа рынке плагинов есть разные языки.snippetsПоддержка, ниже приводится результат поиска.

Например, нажмите наreact СвязанныйsnippetsПлагин, в его подробном описании будут различныеprefixСоответствующий список информации шаблона, вы можете запомнить некоторые сокращения после его использования.

Кроме показанного вышеreact snippetsКроме того, исходя из моего собственного опыта разработки, ниже перечислены несколько часто используемых интерфейсныхsnippet:

1. HTML Snippets

поддерживать всехHTML5Функции

Ключевое слово для поиска: `html-фрагменты

2. JavaScript (ES6) code snippets

служба поддержкиES6js плагин для синтаксиса

Ключевое слово для поиска: javascriptsnippets

3. Vetur

мощныйVueплагины, не толькоsnippets, а также различную подсветку синтаксиса, проверку формата и т.д.

Ключевое слово для поиска: ветур

4. Ant Design Snippets

Вы правильно прочитали,antdтоже есть своиsnippets 

Ключевое слово для поиска: antd-фрагменты

5. Flutter Widget Snippets

FlutterСуществует множество встроенных компонентовsnippetsЭто хороший выбор для управления

Ключевое слово для поиска: флаттер-фрагменты

пользовательский плагин

Плагины, использующие рынок плагинов, в основном универсальны, что означает, что вам нужен сопоставленный список для просмотра соответствующего кода шаблона, но если вы не найдете то, что вам нужно на рынке плагиновsnippetsплагин, то вы можете создать плагин и опубликовать его самостоятельно, так что вам не нужно беспокоиться об изменении среды, и вам не нужно помнить некоторыеprefix.

Шаг 1 Установите строительные леса и соберите проект

npm install -g yo generator-code // 安装全局脚手架
yo code // 运行脚手架

После запуска скаффолдинга необходимо заполнить некоторые конфигурации, например, какой тип плагина выбрать, как показано на рисунке ниже, здесь нужно выбратьNew Code Snippets, а затем некоторыеname , description , languageи другая информация

После того, как все настройки будут выполнены, будет сгенерирован проект, который можно разрабатывать и отлаживать сразу, структура проекта такая же, как и у нашей обычной front-end разработки.npmОшибка режима, язык разработки также ts или js, как показано на следующем рисунке:

нажиматьF5Он будет ввести новое окно, которое является IDE для отладки, а запись в нем вступит в силу.snippetsконфигурация.

Шаг 2. Настройте сниппеты.

Посмотреть проектpackage.jsonнайдетcontributes.snippetsАтрибут, который содержит сопоставление языка и конфигурацию связанных сниппетов, нажмите на негоsnippets.code-snippetsФайл обнаружит, что это пустой файл json.Если вы хотите записать содержимое, формат внутри точно такой же, как и в конфигурации JSON, упомянутой выше.

Затем возникает проблема, на самом деле это все еще настройка этого json-файла, упомянутого выше.bodyПроблема до сих пор не решена, ее довольно сложно настроить, пожалуйста, не паникуйте, вы действительно можете написать здесь оператор скрипта, чтобы преобразовать наш обычный код.

Сначала я смотрю на структуру каталога,exampleПуть заполнен шаблонным кодом,snippets.jsonмой окончательный выходной файл json, основной код сценария преобразования находится вcompiler.js внутри.

братьreactизuseCallbackНапример 🌰, первые три строки — это дополнительная информация комментария, которая преобразуется в конфигурации, следующий код — содержимое шаблона,${}Описание упакованного кода представляет собой редактируемую строку шаблона, значение по умолчанию — после двоеточия, а число представляет порядок редактирования, напримерmemoizedCallbackПосле редактирования нажмите клавишу Tab, чтобы перейти к следующему.doSomething.

компилятор.js выглядит следующим образом:

const fs = require('fs')
const path = require('path')

// example 目录的绝对路径
const exampleDir = path.resolve(__dirname, 'example')
// 输出json配置目录
const outputDir = path.resolve(__dirname, 'snippets')

// 初始化代码片段json
const snippetsMap = {}

const readDir = (rootDir) => {
  const fileList = fs.readdirSync(rootDir)
  if (fileList.length > 0) {
    fileList.forEach(fileName => {
      const filePath = path.join(rootDir, fileName)
      const statInfo = fs.statSync(filePath)
      // 如果是目录继续遍历
      if (statInfo.isDirectory()) {
        readDir(filePath)
      } else if (statInfo.isFile()) {
        handleFile(filePath, fileName)
      }
    })
  }
}

// 处理文件
const handleFile = (filePath, fileName) => {
  let name = fileName.split('.')[0]
  let prefix = fileName.split('.')[0]
  let des = ''
  const bodyList = []

  const fileInfo = fs.readFileSync(filePath, 'utf8')
  const lineSplits = fileInfo.split('\n')

  // 逐行区分，对名称，描述，prefix做提取处理
  lineSplits.forEach(line => {
    const nameReg = /\/\/\s+@name:\s*(.*)/
    const prefixReg = /\/\/\s+@prefix:\s*(.*)/
    const desReg = /\/\/\s+@description:\s*(.*)/
    if (nameReg.test(line)) {
      name = line.match(nameReg)[1]
    } else if (prefixReg.test(line)) {
      prefix = line.match(prefixReg)[1]
    } else if (desReg.test(line)) {
      des = line.match(desReg)[1]
    } else {
      bodyList.push(line)
    }
  })

  snippetsMap[name] = {
    prefix,
    body: bodyList.length > 1 ? bodyList : bodyList[0],
    description: des
  }
}

readDir(exampleDir)

fs.writeFile(path.join(outputDir, 'snippets.json'), JSON.stringify(snippetsMap, null, 2), (err) => {
  if (err) throw err;
  console.log('write success')
})

компилятор.js делает несколько вещей:

• траверсexampleВсе файлы под
• Извлеките некоторую аннотационную информацию и используйте ее какname илиdescription 
• вывод записывается вsnippets.json 

step3 Опубликуйте плагин

Для публикации плагинов требуется инструмент командной строки ---vsce 

npm install -g vsce

Мой способ здесь состоит в том, чтобы упаковать его в.vsixФайл загружен, и команда упаковки выглядит следующим образом

vsce package

идти после упаковкиAzureможно загрузить с официальной консоли

AzureВозможно, вам потребуется сначала создать новую организацию, вы можете обратиться к следующим документам:

портал

я поддерживалreact Связанныйsnippetsплагин, поиск по ключевым словамreact-tsx-hooks-snippetsТы можешь найти:

Каждый может представить мне проблему на github для улучшения~~

адрес проекта на гитхабе:GitHub.com/tin is son/hot ah…

конец

Сниппеты — это средство, помогающее нам повысить эффективность, только повысив эффективность, мы сможем избавиться от 996. Я надеюсь, что каждый сможет гибко использовать их в своей работе и внедрять собственные плагины для сниппетов.

Это не легко создать, я надеюсь найти больше похожих + следить за Erlian, который постоянно обновляется! ! !

P.S. В тексте есть ошибки, прошу меня поправить.

Прекрасное прошлое 📌

• Проверьте это, прежде чем Vue3 построит колеса «крючки».✨
• Откройте React-Redux с помощью хуков✨
• Как написать React Hooks на TypeScript✨
• Инструмент отладки React: React DevTools✨
• Правильная позиция Vue3 для использования TypeScript✨
• Один из первых пользователей Vue3: React Hooks VS Composition API✨

Публичный номер: внешний малый DT

Справочная статья 📚:

• руководство по разработке плагинов vscode
• Введение во фрагмент vscode