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

Posted 2023-02-22

【中文标题】如何使用 ESLint + Prettier + Airbnb 规则 + TypeScript + Vetur 配置 Vue CLI 4？

【英文标题】：How to configure Vue CLI 4 with ESLint + Prettier + Airbnb rules + TypeScript + Vetur?

【发布时间】：2020-02-28 10:29:03

【问题描述】：

当使用 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 一起工作的这些确切要求也有类似的问题。

EDIT 2020/02 - 最近这项挑战的性质发生了很大变化，所以我打开并自行回答了另一个问题：How to configure Vue CLI 4 with ESLint + Airbnb rules + TypeScript + Stylelint for SCSS, in VS Code editor with autofix on save?

【问题讨论】：

我不知道 Vue、typescript 和/或 Vetur 会带来什么问题，但其他人应该按照本教程工作：blog.echobind.com/…

主要思想是将代码格式分离到 Prettier 中，并应用 Airbnb 处理错误。这样可以避免双重格式化和双重保存。

@mico '这个问题在 9 小时内结束，从 ux.engineer 获得了价值 +100 声望的悬赏。'

我添加的和答案一样。

【参考方案1】：

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

下载 VSCode 的 ESLint 和 Prettier 扩展。

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

npm install -D eslint prettier

安装 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 file。这将是您配置格式设置的地方。我在下面添加了一些我自己的偏好，但我强烈建议您阅读更多关于 Prettier 配置文件的信息

  "printWidth": 100,
  "singleQuote": true

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

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

【讨论】：

感谢您的回答，但是它不满足使用 Vue CLI4 和 TypeScript 进行配置以及使用 VS Code 的 Vetur 插件的问题要求（因为解析 Vue 的单文件组件目前需要一个专用插件)。

npx install-peerdeps --dev eslint-config-airbnb 安装 react 库，而不是 vue

【参考方案2】：

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

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