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

查看:1744
本文介绍了如何使用ESLint + Prettier + Airbnb规则+ TypeScript + Vetur配置Vue CLI 4?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

使用 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屋!

查看全文
相关文章
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆