如何配置Vue CLI 4与ESLint + Prettier + Airbnb规则 + TypeScript + Vetur?

Question

使用Vue CLI v4.0.5创建新项目时，勾选TypeScript和Linter / Formatter选项，您将获得预配置的代码检查和格式化选项：

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

我希望使用Airbnb规则，配合Prettier（保存时格式化），同时使用TypeScript解析器和Vue CLI v4。

这些配置也应该能够与Vetur扩展程序 for VS Code很好地配合使用。

如何配置这个工具组合？

请注意，这不是重复的问题。存在类似的问题，但没有针对Vue CLI4、TypeScript、ESLint、Airbnb、Prettier以及与Vetur / VS Code一起工作的确切要求的问题。 编辑2020/02 - 最近这个挑战的性质发生了很大变化，因此我已经开了另一个问题并自我回答：如何配置Vue CLI 4与ESLint + Airbnb规则+ TypeScript + Stylelint用于SCSS，在VS Code编辑器中自动修复保存?

- ux.engineer

---

我不知道Vue、typescript和/或Vetur在这里带来了什么问题，但是其他的应该可以按照这个教程的步骤工作：https://blog.echobind.com/integrating-prettier-eslint-airbnb-style-guide-in-vscode-47f07b5d7d6a - mico

主要思想是将代码格式化分离到 Prettier 中，并应用 Airbnb 规则来检查错误。这样可以避免重复格式化和保存。 - mico

@mico，“这个问题有一个开放的赏金，价值+100声望，由ux.engineer在9小时内结束。” - ux.engineer

我添加了相同的答案。 - mico

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

安装 eslint-config-prettier（禁用 ESLint 格式化）和 eslint-plugin-prettier（允许 ESLint 在输入时显示格式化错误）。

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

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

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

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

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

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

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

- mico

---

感谢您的回答，但它并不满足问题的要求，即使用Vue CLI4和TypeScript进行配置，并且与Vetur插件一起在VS Code中工作（因为解析Vue的单文件组件目前需要一个专用插件）。 - ux.engineer

npx install-peerdeps --dev eslint-config-airbnb 安装的是 React 库，而不是 Vue。 - michal

Answer 2

目前，我认为Vetur无法与SFC（单文件组件）一起使用，以提供有关props的类型完成。这就是为什么我们在工作中使用JSX + Typescript + Vue + Eslint + AirBnB。

（我也在Vue的#tooling Discord频道中向您发送了消息）

- Jess