vscode настроить функцию автоматического форматирования vue+vetur+eslint+prettier

Vue.js

Эта конфигурация используется для разработки vue, и конечным результатом является автоматическое форматирование кода js, html и css в соответствии с eslint при сохранении.

Плагин VSCode Vetur

Для идентификации файлов vue используется плагин Vetur.Изначально vetur имеет собственную функцию форматирования, но она будет конфликтовать с eslint, поэтому функцию автоматического форматирования vscode мы отключим в проекте.

Плагин vscode ESlint

Плагин Eslint используется для отображения некоторых подсказок об ошибках в редакторе в соответствии с конфигурационным файлом .eslintrc.js в каталоге проекта, и последующее автоматическое форматирование будет отформатировано в соответствии с подсказками об ошибках здесь.

Проект создан на основе vue-cli

Следующие связанные шаги требуют внимания:

Выбрать Linter/Formatter при создании (выбрано по умолчанию)

Далее выберите Eslint+Prettier

Далее выберите Lint при сохранении (проверьте формат кода после редактирования и сохранения)

Затем выберите В выделенных файлах конфигурации (извлеките конфигурации eslint и prettier в отдельные файлы)

После создания вы можете увидеть зависимости, связанные с eslint и prettier, в package.json.

В .eslintrc.js вы можете видеть, что общие правила eslint объединяют некоторые библиотеки плагинов vue, eslint и prettier для анализа синтаксиса (eslint для js и vue, а prettier для js, html и css, здесь некоторые конфликты между eslint и с красивыми покончено)

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

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

{
  /* 使用单引号包含字符串 */
  "singleQuote": true,
  /* 不添加行尾分号 */
  "semi": false,
  /* 在对象属性添加空格 */
  "bracketSpacing": true,
  /* 优化html闭合标签不换行的问题 */
  "htmlWhitespaceSensitivity": "ignore"
}

Добавить пользовательские настройки в пользовательских настройках

расположение в маке

Выберите глобальную (User) или проектную (Workspace) конфигурацию по мере необходимости, нажмите кнопку редактирования в правом верхнем углу и откройте файл settings.json.

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

"editor.codeActionsOnSave": {
    "source.fixAll": true
},
/* 关闭编辑器自带保存格式化功能，此功能会用Vetur进行格式化。*/
"editor.formatOnSave": false

Вот моя собственная конфигурация

Глобальные настройки

{
  "editor.fontSize": 14,
  "editor.tabSize": 2,
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  // 全局使用保存自动格式化功能，vue项目关闭此项
  "editor.formatOnSave": true
}

Настройки проекта

{
  // vue项目关闭vscode的保存自动格式化功能
  "editor.formatOnSave": false
}

Проекты, не созданные vue-cli

Отдельно ввести несколько зависимостей в следующих красных полях

Добавьте vscode Vetur и ESlint, содержимое .eslintrc.js, .prettierrc и settings.json такое же, как указано выше, чтобы сохранение можно было автоматически форматировать в соответствии с eslint.

Суммировать

  • Представьте некоторые связанные зависимости eslint, vue и prettier.
    @vue/cli-plugin-eslint
@vue/eslint-config-prettier
babel-eslint
eslint
eslint-plugin-prettier
eslint-plugin-vue
prettier
  • Установите плагины vscode Vetur и ESlint.
  • Настройте файл .eslintrc.js
  • Настройте файл .prettierrc
  • Настройте файл settings.json

Прикрепил:

Функция сохранения и форматирования vscode по умолчанию по-прежнему очень мощная, и можно установить дополнительные более красивые плагины для оптимизации функции форматирования проектов, отличных от Vue.

Я добавил более красивую конфигурацию в глобальной конфигурации.

  1. Используйте одинарные кавычки для заключения строк
  2. Не добавляйте точку с запятой в конце строки

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

// 使用单引号包含字符串
"prettier.singleQuote": true,
// 不添加行尾分号
"prettier.semi": false,
// 在对象或者数组最后一项添加逗号，这样在新增项的时候可以直接添加在下一行，无需在当前行添加逗号，而在看git diff的时候只会看到新增的内容，更为清晰
"trailingComma": "all"
Категории