如何使用 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和Prettier （保存时格式化）、 TypeScript 解析器和Vue CLI v4 。

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

如何配置这种工具组合？

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

编辑 2020/02 - 这个挑战的性质最近发生了很大变化，所以我打开并自我回答了另一个问题： 如何在 VS 代码编辑器中使用 ESLint + Airbnb 规则 + TypeScript + Stylelint 为 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. 最后一步是确保保存时更漂亮的格式。 在 VSCode 的用户设置中插入"editor.formatOnSave": true 。

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

Answer 2

目前，我不认为 Vetur 与 SFC（单文件组件）一起为道具提供类型化完成。 这就是我们在工作中使用 JSX + Typescript + Vue + Eslint + AirBnB 的原因。

（我也在 Vue 的 #tooling Discord 频道中给你发了消息）