Vue 项目中使用 ESLint 和 Prettier

良好的代码规范无论是对个人还是团队都是十分重要的。遵循一致的代码规范能够显著增强代码可读性、可维护性，使得代码结构简洁清晰，还能减少bug的出现。对于团队开发来说，还能减少部分沟通成本，让大家都专注于功能开发上。

本人在前端开发过程中逐渐接触到代码规范检查工具——ESLint和Prettier，但是之前都是了解个大概，并没有深入研究过、配置过。因此，为了不让自己一直处在懵懵懂懂的状态，借此机会汇总整理一下这两天的学习内容，以备后续快速检索。

Prettier 简介

Prettier 是一款代码格式美化工具，用于统一代码风格，提高代码可维护性。

人们普遍认为，拥有一个通用的风格指南对于项目和团队来说是有价值的

引用官网上对于为什么要使用Prettier的说明

Building and enforcing a style guide

Prettier是唯一完全自动的“风格指南”。即使Prettier不能100%按照你想要的方式格式化所有代码，考虑到Prettier的独特优势，“牺牲”也是值得的，

Helping Newcomers

能够帮助人们更快的适应新接手的代码，无论是新员工还是有经验的老员工

Writing code

程序员们将更多的精力和注意力放在编写高质量的代码上，而不是为代码格式耗费心神

Easy to adopt

易于使用，学习成本低

Clean up an existing codebase

统一已经存在的代码库的代码风格

Ride the hype train

大佬们都在用，你用你也是大佬

Prettier的出现是为了解决程序员们对于那种代码风格才是最优的争论。

By far the biggest reason for adopting Prettier is to stop all the ongoing debates over styles.

”都用我的，别争了，有那时间想想怎么写出高质量的代码吧！“

因此，Prettier 在配置上面还是十分有限的，它是一种 opinionated的工具，opinionated可以翻译成固执己见的、武断的，因此可以理解为受约束的，不能任凭使用者发挥。

简而言之，Prettier for fomatting

`ESLint`简介

ESLint 是一个开源的 JavaScript 代码检查工具，由 Nicholas C. Zakas于2013年6月创建。代码检查是一种静态的分析，常用于寻找有问题的模式或者代码，并且不依赖于具体的编码风格。

ESLint 的初衷是为了让程序员可以创建自己的检测规则。ESLint 的所有规则都被设计成可插入的。ESLint 的默认规则与其他的插件并没有什么区别，规则本身和测试可以依赖于同样的模式。为了便于人们使用，ESLint 内置了一些规则，当然，你可以在使用过程中自定义规则。

ESLint提供两种规则，分别是代码格式检查规则 Formatting rules 和代码质量检查规则 Code-quality rules。

ESLint 特点

所有都是可拔插的

内置规则和自定义规则共用一套规则 API

内置的格式化方法和自定义的格式化方法共用一套格式化 API

额外的规则和格式化方法能够在运行时指定

规则和对应的格式化方法并不强制捆绑使用

每条规则:

各自独立

可以开启或关闭（没有什么可以被认为“太重要所以不能关闭”）

可以将结果设置成警告或者错误

另外:

ESLint 并不推荐任何编码风格，规则是自由的

所有内置规则都是泛化的

项目:

通过丰富文档减少沟通成本

尽可能的简单透明

相信测试的重要性

ESLint 配置

ESLint 的配置项有很多，下面列举出比较常用的几项配置内容

"parserOptions"：ESLint 允许你指定你想要支持的 JavaScript 语言选项。默认情况下，ESLint 支持 ECMAScript 5 语法。你可以覆盖该设置，以启用对 ECMAScript 其它版本和 JSX 的支持。
"parser"：ESLint 默认使用Espree作为其解析器，你可以在配置文件中指定一个不同的解析器
"env"：一个环境定义了一组预定义的全局变量
"globals"：如果你想在一个源文件里使用全局变量，推荐你在 ESLint 中定义这些全局变量，这样 ESLint 就不会发出警告了。
"plugins"：ESLint 支持使用第三方插件
"rules"：ESLint 附带有大量的规则。你可以使用注释或配置文件修改你项目中要使用的规则
"extends": 配置文件可以从基本配置扩展启用的规则集。有四种类型

ESLint 结合 Prettier 使用

~~上文说到，ESLint有自己的代码格式化功能，为什么要使用Prettier呢？~~

美化代码结构的Prettier，检查代码质量的ESLint，强强结合会碰撞出什么样的火花呢？

结合ESLint 和 Prettier的一种方式是将Prettier作为ESLint插件使用，下面介绍下如何安装配置。

安装

要使用ESLint和Prettier当然先得安装他们啦，然后还需要安装 eslint-plugin-prettier。

为了防止Prettier和ESLint格式化功能冲突，还需要安装 eslint-config-prettier 来关闭ESLint中的代码格式化功能

npm install --save-dev --save-exact prettier
npm install eslint --save-dev

npm install --save-dev eslint-plugin-prettier
npm install --save-dev eslint-config-prettier

在 .prettierignore 和 .eslintignore 文件中可以添加那些不需要格式化的文件或文件夹，在美化代码挑bug时忽略这些文件。

配置

一般情况下，我们在项目根目录下创建ESLint的配置文件 .eslintrc.json 就能满足需求，但是也可以在 package.json 里创建一个 eslintConfig属性，在那里定义你的配置。此外，配置文件还具有层叠结构，详情可参见官网。

下面来看看在ESLint中添加Prettier插件的配置文件是什么样子的：

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

在eslint-plugin-prettier 的GitHub上给出了一种推荐配置：

{
  "extends": ["plugin:prettier/recommended"]
}

它和如下的配置是等价的：

{
  "extends": ["prettier"], // 表示 eslint-config-prettier，需要放到最后以覆盖别的规则
  "plugins": ["prettier"], // 表示 eslint-plugin-prettier
  "rules": {
    "prettier/prettier": "error",
    "arrow-body-style": "off",
    "prefer-arrow-callback": "off"
  }
}

"extends": ["prettier"] enables the main config from eslint-config-prettier, which turns off some ESLint core rules that conflict with Prettier.
"plugins": ["prettier"] registers this plugin.
"prettier/prettier": "error" turns on the rule provided by this plugin, which runs prettier from within ESLint.
"arrow-body-style": "off" and "prefer-arrow-callback": "off"turns off two ESLint core rules that unfortunately are problematic with this plugin.

Prettier常见的配置方式是在根目录下创建 .prettierrc 文件，可以在其中配置Prettier支持的规则：

{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}

深入配置

ESLint配置 eslint.bootcss.com/docs/user-g…

Prettier配置 pretter.io/docs/en/opt…

VSCode 配置 `ESLint` `Prettier`

在VSCode 中使用ESLint 和Prettier需要先安装下插件。

ESLint

Prettier

之后需要在 setting.json 中配置

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
  "editor.codeActionsOnSave": {
        "source.fixAll": true
        ("source.fixAll.`ESLint`": true)
    }
}