如何用ESLint +更漂亮+ Airbnb规则+ TypeScript + Vetur配置Vue CLI 4？

Question

当使用Vue CLIv4.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和漂亮的(即保存格式)、TypeScript解析器和Vue CLI 4E 216。

这些配置还应该与VS代码的Vetur扩展很好地工作。

如何配置这种组合的工具？

请注意，这不是一个愚蠢的问题。对于Vue CLI4、TypeScript、ESLint、Airbnb、更漂亮，以及与Vetur / VS代码一起工作，也存在类似的问题。

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

Answer 1

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

1. 下载ESLint和VSCode.

更漂亮的扩展

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

npm install -D eslint prettier

1. 安装Airbnb配置。如果使用npm dependencies:

，可以运行此快捷方式来安装配置及其所有5+

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

1. 安装ESLint -config更漂亮(禁用ESLint格式设置)和ESLint-plugin-漂亮(允许ESLint在输入时显示格式错误)

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

1. 在项目的根目录：

中创建.eslintrc.json文件

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

1. 在项目的根目录中创建.prettierrc file。这将是您配置格式设置的地方。我在下面添加了一些我自己的首选项，但我敦促您阅读更多关于更漂亮的配置文件

的信息。

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

1. 最后一步是确保保存上更漂亮的格式。将"editor.formatOnSave": true插入VSCode.

中的用户设置中

1

Answer 2

目前，我不认为Vetur与证监会(单文件组件)工作，以提供打印完成道具。这就是为什么我们在工作中使用JSX + Typescript + Vue + Eslint + AirBnB的原因。

(我也在Vue的#工具不和谐频道给你发了短信)