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规则用于更漂亮（保存格式）和 TypeScript解析器的 ESLint strong>和 Vue CLI v4 。

这些配置也可以与 VS Code的Vetur扩展一起很好地工作。

如何配置这种工具组合？

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

Answer 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 }
最后一步是确保保存更漂亮的格式。将"editor.formatOnSave": true插入VSCode中的用户设置。

[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频道中也向您发送了消息）

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

2 个答案: