VS Code записывает конфигурацию проекта vue eslint + более красивый унифицированный стиль кода

предисловие

В прошлом проект vue компании был написан только мной, и стиль кода был единым, но позже, с увеличением команды, единый стиль кода стал все более и более важным. Основной инструмент у меня sublime, ws вспомогательный, vscode используется редко (просто скачать и установить в холодном дворце), но слышал, что vue проекты писать неплохо, поэтому начал много кидать. Конечно, инструменты, нет ни хороших, ни плохих~~ Не стойте вслепую в очереди, то, что вам подходит, то и лучше всего.

Цели:EslintПроверьте синтаксис кода,prettierОтформатируйте код единообразно, нажмите «Сохранить», чтобы автоматически исправить ошибки eslint, и автоматически отформатируйте код (потому что ленивый~)

Установите плагин vscode.

Во-первых, вам нужно установитьVetur,ESLint,Prettier - Code formatterЭти три подключаемых модуля после перезапуска установки предотвращают прекращение действия подключаемых модулей.

Кроме того, здесь есть дыра.BeautifyПлагины используют ярлыки для форматирования кода, поэтомуprettierВозникает конфликт, поэтому отключите его напрямую.

настройка плагина vscode

Откройте настройки инструмента vscode (горячие клавишиCtrl + ,) имеет две настройки.

Одним из них является USER SETTINGS (пользовательские настройки), это глобальная конфигурация, другие проекты также будут применять эту конфигурацию.

Другой — WORKSPACE SETTINGS (настройки рабочей области), который является конфигурацией проекта, которая создаст проект в корневом пути текущего проекта..vscode/settings.jsonфайл, то конфигурация вступает в силу только в текущем проекте.

Конфигурацию я прописал в настройках рабочей области, конфигурация такая:

{
    //.vue文件template格式化支持，并使用js-beautify-html插件
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    //js-beautify-html格式化配置，属性强制换行
    "vetur.format.defaultFormatterOptions": {
      "js-beautify-html": {
        "wrap_attributes": "force-aligned"
      }
    },
    //根据文件后缀名定义vue文件类型
    "files.associations": {
      "*.vue": "vue"
    },
    //配置 ESLint 检查的文件类型
    "eslint.validate": [
      "javascript",
      "javascriptreact",
      {
        "language": "vue",
        "autoFix": true
      }
    ],
    //保存时eslint自动修复错误
    "eslint.autoFixOnSave": true,
    //保存自动格式化
    "editor.formatOnSave": true
}

Исправление конфликтов для ESLint и Prettier

В связи с необходимостью использования обоихprettierа такжеeslinт, в то время какprettierнекоторые правила иeslintНекоторые правила могут противоречить друг другу, напримерprettierСтроки по умолчанию заключаются в двойные кавычки иesLintЕсли определение представляет собой одинарную кавычку, оно не будет совпадать после форматирования.ESLintправила.

Итак, чтобы разрешить конфликт, вам нужноPrettierВ конфигурации правила также настройтеESLintТо же правило, переопределенное напрямую,ESLintа такжеPrettierСодержимое конфигурационного файла следующее:

.eslintrc.js

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

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ['plugin:vue/essential', 'eslint:recommended'],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    //强制使用单引号
    quotes: ['error', 'single'],
    //强制不使用分号结尾
    semi: ['error', 'never']
  },
  parserOptions: {
    parser: 'babel-eslint'
  }
}

.prettierrc

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

{
   //开启 eslint 支持
  "eslintIntegration": true,
  //使用单引号
  "singleQuote": true,
  //结尾不加分号
  "semi": false
}

Его также можно настроить непосредственно в рабочей области vscode.prettier

{
    //开启 eslint 支持
    "prettier.eslintIntegration": true,
    //使用单引号
    "prettier.singleQuote": true,
    //结尾不加分号
    "prettier.semi": false,
}

Предварительный просмотр эффекта

наконец

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