如何使用ESLint + Prettier + Airbnb规则+ TypeScript + Vetur配置Vue CLI 4？ [英] How to configure Vue CLI 4 with ESLint + Prettier + Airbnb rules + TypeScript + Vetur?

问题描述

使用 Vue CLI v4.0.5 创建新项目并检查 TypeScript 和 Linter / Formatter 的选项时，会获得配置的衬布和格式选项：

When creating a new project with Vue CLI v4.0.5 with checking the options for TypeScript and Linter / Formatter, you are given pre-configured options for linting and formatting:

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

我要对 ESLint 和更漂亮使用 Airbnb规则（格式为-save），并带有 TypeScript解析器和 Vue CLI v4 。

I want to use Airbnb rules for ESLint with Prettier (format-on-save), with TypeScript parser and Vue CLI v4.

这些配置也应与 VS Code的Vetur扩展。

如何配置工具组合？

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

EDIT 2020/02 -这项挑战的性质最近发生了很大变化，因此我打开并回答了另一个问题：如何在VS Code中使用ESLint + Airbnb规则+ TypeScript + Stylelint为SCSS配置Vue CLI 4

EDIT 2020/02 - The nature of this challenge has recently changed considerably, so I've opened and self-answered an another question: How to configure Vue CLI 4 with ESLint + Airbnb rules + TypeScript + Stylelint for SCSS, in VS Code editor with autofix on save?

推荐答案

根据博客文章，我发现[1]这些步骤应该可以解决？确保它能正常工作：

According to a blog post I found [1] these steps should make it sure it works:

1. 为VSCode下载ESLint和Prettier扩展。

1. Download the ESLint and Prettier extensions for VSCode.

将ESLint和Prettier库安装到我们的项目中。在项目的根目录中，您将需要运行： npm install -D eslint漂亮

Install the ESLint and Prettier libraries into our project. In your project’s root directory, you will want to run: npm install -D eslint prettier

安装Airbnb配置。如果您使用的是npm 5+，则可以运行此快捷方式来安装配置及其所有依赖项：
npx install-peerdeps --dev eslint-config-airbnb

Install the Airbnb config. If you’re using npm 5+, you can run this shortcut to install the config and all of its dependencies: npx install-peerdeps --dev eslint-config-airbnb

安装eslint-config-prettier（禁用ESLint格式）和eslint-plugin-prettier（允许ESLint在键入时显示格式错误）
npm install -D eslint-config-prettier eslint-plugin-prettier

Install eslint-config-prettier (disables formatting for ESLint) and eslint-plugin-prettier (allows ESLint to show formatting errors as we type) npm install -D eslint-config-prettier eslint-plugin-prettier

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

Create .eslintrc.json file in your project’s root directory:

{
扩展：[ airbnb，更漂亮]，
插件：[更漂亮]，
规则：{
更漂亮/更漂亮：[错误]
}，
}

创建 .prettierrc文件在项目的根目录中。您将在此处配置格式设置。我在下面添加了一些自己的偏好设置，但我敦促您阅读更多有关Prettier配置文件的信息

Create .prettierrc file in your project’s root directory. This will be where you configure your formatting settings. I have added a few of my own preferences below, but I urge you to read more about the Prettier config file

{
printWidth：100，
singleQuote：true
}

最后一步是确保保存时使用漂亮的格式。将 editor.formatOnSave：true 插入VSCode中的用户设置。

The last step is to make sure Prettier formats on save. Insert "editor.formatOnSave": true into your User Settings in VSCode.

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

这篇关于如何使用ESLint + Prettier + Airbnb规则+ TypeScript + Vetur配置Vue CLI 4？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！