javascript - 如何在 VS Code 编辑器中使用 ESLint + Airbnb 规则 + TypeScript + Stylelint 为 SCSS 配置 Vue CLI 4，并在保存时自动修复？

Question

注意:这是一个与我之前关于该主题的问题类似的问题，该问题部分未解决，之后挑战的性质发生了很大变化:How to configure Vue CLI 4 with ESLint + Prettier + Airbnb rules + TypeScript + Vetur?
在 2019 年，我非常着迷于使用 配置的“ chalice ”工具设置。 TypeScript 中的 Vue 并拥有 VS Code 自动修复您在 .vue、.ts 和 .scss 文件中保存的代码 .
但是得到 Prettier与 ESLint 进行最佳合作和 Vetur最终成为一个太大的挑战。因为 Prettier 和 ESLint 的内在冲突具有部分相同的目标和相似的规则检查，并且 Vetur 为 VS Code 中的这种特殊组合增加了更多的复杂性。
此外，当设置大部分工作时，您需要连续多次保存文件是相当烦人的。因为一旦 ESLint 发现并修复了一组错误，就会出现新的错误，并且它还不够先进，无法连续运行这些检查和修复，直到所有错误都被清除......
2019 年 11 月，我参加了 Vue Conf Toronto，在 Evan 先生的研讨会 Deep Dive with Vue 3.0 中，我向他询问了这个问题。他说官方工具很快就会看到大修，并且新版本的 ESLint 将会有新功能......
他还暗示，此时几乎所有 Vue 官方 Style Guide 都写入了自动修复逻辑。的规则检查，结合即将推出的 Vue 3.0 完全模块化架构，甚至可能会看到官方的 VS Code 扩展。或者至少通过利用这些新功能，让 Vetur 和类似插件更容易运行代码检查和修复。
2019年12月， Vue CLI 4.1 插件和预设升级带来 ESLint 版本 6 功能 在 table 上。这意味着我们可以开始使用 ESLint 不仅是一个 linter，还是一个格式化程序 ，有效不再需要 Prettier 在我们的设置中。
与此同时，ESLint 发布了其官方 VS Code 扩展的第 2 版 dbaeumer.vscode-eslint ，引入对 VS Code 的 Run Code Actions on save 的支持-功能，由 editor.codeActionsOnSave 控制-环境。
因此，最终清除了运行此设置的路径! 接下来，我将回答我自己关于如何配置此组合的问题。
PS。虽然 Vetur 可能仍可用作此设置的一部分，但在这里我已更改为使用 Stylelint。 Stylelint 的自动修复功能仍然存在一些问题，但可能会通过 future 的更新来解决。 然而，我仍然有兴趣了解 Vetur 在有无 Stylelint 的情况下是否有用!

Answer 1

官方脚手架 Vue CLI 项目的配置

2020年2月创建项目脚手架中的Vue CLI 4.2升级后 ，通过使用全局 vue create myproject 创建一个新项目，您已完成配置的一半命令并至少做出这些选择(包括以下配置):

Vue CLI v4.2.2
? Please pick a preset: Manually select features
? Check the features needed for your project:
 (*) Babel
 (*) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 (*) CSS Pre-processors
>(*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing     

? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n) Y 

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
  Sass/SCSS (with dart-sass)
> Sass/SCSS (with node-sass)
  Less
  Stylus      

? Pick a linter / formatter config:
  ESLint with error prevention only
> ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier
  TSLint (deprecated)    

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
 ( ) Lint and fix on commit 

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json                                                                                                                             

现在你可能想知道我为什么选择 node-sass超过第一个建议选项 dart-sass - 原因如下: Vue CLI CSS pre-processor option: dart-sass VS node-sass?

在 package.json你至少得到了这些依赖:

  "dependencies": {
    "core-js": "^3.6.4",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^2.18.0",
    "@typescript-eslint/parser": "^2.18.0",
    "@vue/cli-plugin-babel": "~4.2.0",
    "@vue/cli-plugin-eslint": "~4.2.0",
    "@vue/cli-plugin-typescript": "~4.2.0",
    "@vue/cli-service": "~4.2.0",
    "@vue/eslint-config-airbnb": "^5.0.2",
    "@vue/eslint-config-typescript": "^5.0.1",
    "eslint": "^6.7.2",
    "eslint-plugin-import": "^2.20.1",
    "eslint-plugin-vue": "^6.1.2",
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.2",
    "typescript": "~3.7.5",
    "vue-template-compiler": "^2.6.11"
  }

与 .eslintrc.js :

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/essential',
    '@vue/airbnb',
    '@vue/typescript/recommended',
  ],
  parserOptions: {
    ecmaVersion: 2020,
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
  },
};

与 .editorconfig :

[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 2
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true
max_line_length = 100

用于 linting 和格式化的有偏见的配置更改

所以，根据我对 .eslintrc.js 的偏颇修改:

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/recommended',
    '@vue/airbnb',
    '@vue/typescript/recommended',
  ],
  parserOptions: {
    ecmaVersion: 2020,
  },
  rules: {
    'class-methods-use-this': 0,
    // Changing max row length from 80 to 150.
    // Remember to change in .editorconfig also, although am not sure if that file is even needed?
    // Especially as scaffolding gave 100 as max len while ESLint default is 80...
    'max-len': [
      'error',
      {
        code: 150,
        ignoreComments: true,
        ignoreUrls: true,
      },
    ],
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    '@typescript-eslint/ban-ts-ignore': 0,
  },
  // These are added if you chose also to install Jest plugin for Vue CLI
  // With my own modifications here as an example
  overrides: [
    {
      files: [
        './src/**/__tests__/*.spec.{j,t}s',
        './src/**/__mock__/*.{j,t}s',
      ],
      env: {
        jest: true,
      },
      rules: {
        'no-unused-expressions': 0,
      },
    },
  ],
};

然后我添加了 .eslintignore文件:

# Lint config files in the root ending .js
!/*.js

然后我在 .editorconfig 的顶部添加了这一部分(虽然不确定是否需要此文件):

# EditorConfig is awesome: https://EditorConfig.org

# top-most EditorConfig file
root = true

安装和配置 Stylelint

Stylelint是一个类似于 CSS/SCSS/SASS/LESS/Stylus 的项目，而不是用于 JavaScript/TypeScript 的 ESLint，同样可以通过插件和预设进行扩展。它有一个官方的 VS Code 扩展，它也可以在你的 Webpack 构建过程中运行。

我选择使用 stylelint-scss package 扩展 Stylelint ，目前每周有 50 万次下载，以及 stylelint-config-recommended-scss package来自同一个维护者。另外我配置了 stylelint-webpack-plugin作为 Webpack 构建过程的一部分。

通过以下方式从命令行安装这些开发依赖项: npm i -D stylelint stylelint-config-recommended-scss stylelint-scss stylelint-webpack-plugin
添加文件 .stylelintrc.json以一些有偏见的规则修改为例(可能需要 Vue 的 ::v-deep 自定义选择器处理):

{
  "extends": "stylelint-config-recommended-scss",
  "rules": {
    "max-nesting-depth": 4,
    "no-descending-specificity": null,
    "property-no-unknown": [
      true,
      {
        "ignoreProperties": ["user-drag", "font-smooth"]
      }
    ],
    "selector-pseudo-element-no-unknown": [
      true,
      {
        "ignorePseudoElements": ["v-deep"]
      }
    ]
  }
}

创建文件或添加到 vue.config.js ，这是一些有偏见的配置示例:

// Add in the top of the file
const StyleLintPlugin = require('stylelint-webpack-plugin');

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        // Here as example if needed:
        // Import Sass vars and mixins for SFC's style blocks
        prependData: '@import "@/assets/styles/abstracts/_variables.scss"; @import "@/assets/styles/abstracts/_mixins.scss";',
      },
    },
  },
  lintOnSave: process.env.NODE_ENV !== 'production',
  productionSourceMap: false,
  devServer: {
    overlay: {
      warnings: true,
      errors: true,
    },
  },
  configureWebpack: {
    // Fast source maps in dev
    devtool: process.env.NODE_ENV === 'production' ? false : 'cheap-eval-source-map',
    plugins: [
      new StyleLintPlugin({
        files: 'src/**/*.{vue,scss}',
      }),
    ],
    resolve: {
      alias: {
        // Alias @ to /src folder for ES/TS imports
        '@': path.join(__dirname, '/src'),
      },
    },
  },
};

VS Code 编辑器、扩展和设置

创建 .vscode项目根目录中的命名文件夹，用于放置项目特定设置和扩展建议。请注意，如果您在工作区模式下打开 VS Code(一次包含多个项目根目录)，则某些设置在此模式下不起作用，因此我总是直接打开项目根目录而不使用工作区模式。

在此文件夹中添加一个文件 extensions.json ，至少推荐此内容，然后安装扩展。

{
  "recommendations": [
    // ESLint - Integrates ESLint JavaScript into VS Code.
    "dbaeumer.vscode-eslint",
    // Disable eslint rule - Disable eslint rule with one click.
    "wooodhead.disable-eslint-rule",
    // eslint-disable-snippets - Simple snippets for disable eslint rules
    "drknoxy.eslint-disable-snippets",
    // Vue - Syntax highlight for Vue.js
    "jcbuisson.vue",
    // stylelint - Modern CSS/SCSS/Less linter
    "stylelint.vscode-stylelint",
    // EditorConfig for VS Code - EditorConfig Support for Visual Studio Code
    // Not sure if this is needed or recommended,
    // but .editorconfig file is still included in the scaffolded project...
    "editorconfig.editorconfig",
    // DotENV - Support for dotenv file syntax.
    "mikestead.dotenv",
  ]
}

添加另一个文件 settings.json使用这些或类似设置:

{
  // EDITOR
  // ----------------------------------------
  "editor.defaultFormatter": "dbaeumer.vscode-eslint",
  "[javascript]": { "editor.defaultFormatter": "dbaeumer.vscode-eslint" },
  "[typescript]": { "editor.defaultFormatter": "dbaeumer.vscode-eslint" },
  "[vue]": { "editor.defaultFormatter": "dbaeumer.vscode-eslint" },
  "[scss]": { "editor.defaultFormatter": "stylelint.vscode-stylelint" },
  "[css]": { "editor.defaultFormatter": "stylelint.vscode-stylelint" },
  "editor.codeActionsOnSave": {
    // https://github.com/microsoft/vscode-eslint/blob/master/README.md#release-notes
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },

  // ESLINT
  // ----------------------------------------
  "eslint.enable": true,
  "eslint.alwaysShowStatus": true,
  "eslint.options": {
    "extensions": [".html", ".js", ".ts", ".vue"]
  },

  // VETUR
  // Disable rules if user has extension installed and enabled.
  // ----------------------------------------
  "vetur.validation.template": false,
  "vetur.validation.style": false,
  "vetur.format.defaultFormatter.html": "none",
  "vetur.format.defaultFormatter.css": "none",
  "vetur.format.defaultFormatter.scss": "none",
  "vetur.format.defaultFormatter.js": "none",
  "vetur.format.defaultFormatter.ts": "none",

  // STYLELINT
  // ----------------------------------------
  "stylelint.enable": true,
  "css.validate": true,
  "scss.validate": true,

  // HTML
  // ----------------------------------------
  "html.format.enable": false,
  "emmet.triggerExpansionOnTab": true,
  "emmet.includeLanguages": {
    "vue-html": "html"
  },

  // FILES
  // ----------------------------------------
  "files.exclude": {
    "**/*.log": true,
    "**/*.log*": true,
    "**/dist": true,
  },
  "files.associations": {
    ".babelrc": "jsonc",
    ".eslintrc": "jsonc",
    ".markdownlintrc": "jsonc",
    "*.config.js": "javascript",
    "*.spec.js": "javascript",
    "*.vue": "vue"
  },
  // The default end of line character. Use \n for LF and \r\n for CRLF.
  "files.eol": "\n",
  "files.insertFinalNewline": true,
  "files.trimFinalNewlines": true,
  "files.trimTrailingWhitespace": true,
}

所以这些是我有偏见的项目设置， 我有兴趣听取改进建议!