如何使用 ESLint + Prettier + Airbnb 规则 + TypeScript + Vetur 配置 Vue CLI 4？

Question

当使用Vue CLI v4.0.5创建一个新项目并检查TypeScript和Linter / Formatter的选项时，您将获得用于 linting 和格式化的预配置选项：

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

我想使用的Airbnb规则为ESLint用更漂亮（格式上保存），以打字稿解析器和Vue公司CLI V4。

这些配置也应该适用于 VS Code 的 Vetur 扩展。

如何配置这种工具组合？

请注意，这不是一个重复的问题。也有类似的问题，但没有针对 Vue CLI4、TypeScript、ESLint、Airbnb、Prettier 以及与 Vetur / VS Code 一起工作的这些确切要求。

编辑 2020/02 - 这个挑战的性质最近发生了很大变化，所以我打开并回答了另一个问题：如何在 VS Code 编辑器中使用 ESLint + Airbnb 规则 + TypeScript + Stylelint for SCSS 配置 Vue CLI 4保存时自动修复？

Answer 1

根据我发现 [1] 的一篇博客文章，这些步骤应该确保它有效：

1. 下载 VSCode 的 ESLint 和 Prettier 扩展。

2. 将 ESLint 和 Prettier 库安装到我们的项目中。在项目的根目录中，您需要运行：

npm install -D eslint prettier

3. 安装 Airbnb 配置。如果您使用的是 npm 5+，则可以运行此快捷方式来安装配置及其所有依赖项：

npx install-peerdeps --dev eslint-config-airbnb

4. 安装 eslint-config-prettier（禁用 ESLint 的格式）和 eslint-plugin-prettier（允许 ESLint 在我们输入时显示格式错误）

npm install -D eslint-config-prettier eslint-plugin-prettier

5. .eslintrc.json在项目的根目录中创建文件：

{
  "extends": ["airbnb", "prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": ["error"]
  },
}

6. .prettierrc file在项目的根目录中创建。这将是您配置格式设置的地方。我在下面添加了一些我自己的偏好，但我强烈建议您阅读有关 Prettier 配置文件的更多信息

{
  "printWidth": 100,
  "singleQuote": true
}

7. 最后一步是确保保存时使用 Prettier 格式。"editor.formatOnSave": true在 VSCode 中插入您的用户设置。

[1] https://blog.echobind.com/integrating-prettier-eslint-airbnb-style-guide-in-vscode-47f07b5d7d6a