eslint 与 prettier 实现代码规范自动格式化

今天早上来看了一篇文章，一直烦恼prettier的设置，这篇文章写的比较不错，就直接down下来了。该文首发于https://vsnail.cn/static/doc/blog/eslintPrettier.html

其实很早之前就想在工程中使用 eslint 和 prettier 来规范代码。可是 eslint 和 prettier 的相爱相杀，再加上框架（vue,react）的特有写法（jsx，template）等等总是让自己开发过程很痛苦，很懵逼，不知所措。所以每次都启用 esint，然后又禁用，又启用，又禁用，如此反复，周而复始。前段时间看前端工程化相关的资料，发现其实工程代码格式规范是其中重要的环节之一。顾而，借着周末好好捋一捋 eslint 和 prettier，来达到开发的高效和规范。

在代码规范的道路上，我们终极目标是：

团队中的所有开发人员用一套代码规范规则，并且无需我们花太大的精力去为了格式而格式。希望有一套自动化工具，帮我们检测代码是否规范，如果不规范，则自动能够帮我们按照既定规范格式化。

通过对 eslint 和 prettier 的大致了解，其实可以发现，prettier 是用于格式化代码的。而代码规范规则的设置和代码上的 warn，error 等提醒，则是 eslint 来实现的。故而，我们的大目标应该是 eslint，然后把 prettier 集成进来。

`ESLint`

ESLint 是一个开源的 JavaScript 代码检查工具，由 Nicholas C. Zakas 于 2013 年 6 月创建。代码检查是一种静态的分析，常用于寻找有问题的模式或者代码，并且不依赖于具体的编码风格。对大多数编程语言来说都会有代码检查，一般来说编译程序会内置检查工具。

ESLint 的所有规则都被设计成可插入的。ESLint 的默认规则与其他的插件并没有什么区别，规则本身和测试可以依赖于同样的模式。因此可配置、插件式是 ESLint 的最大特点，也是我们热衷使用它的原因。

如何配置

配置 ESLint 有两种方式：

使用 JavaScript 注释把配置信息直接嵌入到一个代码源文件中
配置文件式

这两种方式中，“配置文件”是最常见的配置方式。使用 JavaScript、JSON或者 YAML 文件为整个目录（处理你的主目录）和它的子目录指定配置信息。ESLint 会查找和自动读取它们，再者，你可以在命令行运行时指定一个任意的配置文件。

ESLint 支持几种格式的配置文件：

JavaScript - 使用 .eslintrc.js 然后输出一个配置对象。
YAML - 使用 .eslintrc.yaml 或 .eslintrc.yml去定义配置的结构。
JSON - 使用 .eslintrc.json 去定义配置的结构，ESLint 的 JSON 文件允许 JavaScript 风格的注释。
(弃用) - 使用 .eslintrc，可以使 JSON 也可以是 YAML。
package.json - 在 package.json 里创建一个 eslintConfig 属性，在那里定义你的配置。

如果同一个目录下有多个配置文件，ESLint 只会使用一个。优先级顺序如下：

.eslintrc.js
.eslintrc.yaml
.eslintrc.yml
.eslintrc.json
.eslintrc
package.json

由于 js 里面可以很方便的书写逻辑，并且它的优先级又比较高，故而建议使用 js 文件来当作配置文件。

这些配置啥意思

可配置是 ESLint 的特点之一。也就意味着我们必须了解每个配置项什么意思，才能玩转 ESLint。因此接下来我们来看看常用配置项是什么意思。

Parser

ESLint 默认使用 Espree 作为其解析器，你可以在配置文件中指定一个不同的解析器.

以下解析器与 ESLint 兼容：

Esprima
Babel-ESLint - 一个对 Babel 解析器的包装，使其能够与 ESLint 兼容。
typescript-eslint-parser(实验) - 一个把 TypeScript 转换为 ESTree 兼容格式的解析器，这样它就可以在 ESLint 中使用了。这样做的目的是通过 ESLint 来解析 TypeScript 文件（尽管不一定必须通过所有的 ESLint 规则）。注意，在使用自定义解析器时，为了让 ESLint 在处理非 ECMAScript 5 特性时正常工作，配置属性 parserOptions 仍然是必须的。解析器会被传入 parserOptions，但是不一定会使用它们来决定功能特性的开关。

parserOptions

这个属性常用于设置语法解析器的一些配置。可用的选项有：

1. ecmaVersion: 制定 ECMAScript 的版本。

默认设置为 3，5（默认），你可以使用 6、7、8 或 9 来指定你想要使用的 ECMAScript 版本。你也可以用使用年份命名的版本号指定为 2015（同 6），2016（同 7），或 2017（同 8）或 2018（同 9）

1. sourceType: 源码类型

设置为 "script" (默认) 或 "module"（如果你的代码是 ECMAScript 模块)。

1. ecmaFeatures：这是个对象，表示你想使用的额外的语言特性:
3.1 globalReturn - 允许在全局作用域下使用 return 语句
3.2 impliedStrict - 启用全局 strict mode (如果 ecmaVersion 是 5 或更高)
3.3 jsx - 启用 JSX
3.4 experimentalObjectRestSpread - 启用实验性的 object rest/spread properties 支持。(重要：这是一个实验性的功能,在未来可能会有明显改变。建议你写的规则不要依赖该功能，除非当它发生改变时你愿意承担维护成本。)

设置解析器选项能帮助 ESLint 确定什么是解析错误，所有语言选项默认都是 false

`Environments`

该配置属性定义来一组预定义的全局变量。可用的环境包括：

browser - 浏览器环境中的全局变量。
node - Node.js 全局变量和 Node.js 作用域。
commonjs - CommonJS 全局变量和 CommonJS 作用域 (用于 Browserify/WebPack 打包的只在浏览器中运行的代码)。
shared-node-browser - Node.js 和 Browser 通用全局变量。
es6 - 启用除了 modules 以外的所有 ECMAScript 6 特性（该选项会自动设置 ecmaVersion 解析器选项为 6）。
worker - Web Workers 全局变量。
amd - 将 require() 和 define() 定义为像 amd 一样的全局变量。
mocha - 添加所有的 Mocha 测试全局变量。
jasmine - 添加所有的 Jasmine 版本 1.3 和 2.0 的测试全局变量。
jest - Jest 全局变量。
phantomjs - PhantomJS 全局变量。
protractor - Protractor 全局变量。
qunit - QUnit 全局变量。
jquery - jQuery 全局变量。
prototypejs - Prototype.js 全局变量。
shelljs - ShellJS 全局变量。
meteor - Meteor 全局变量。
mongo - MongoDB 全局变量。
applescript - AppleScript 全局变量。
nashorn - Java 8 Nashorn 全局变量。
serviceworker - Service Worker 全局变量。
atomtest - Atom 测试全局变量。
embertest - Ember 测试全局变量。
webextensions - WebExtensions 全局变量。
greasemonkey - GreaseMonkey 全局变量。这些环境并不是互斥的，所以你可以同时定义多个。

`Globals`

我们使用第三方提供的全局变量的时候（例如：jQuery,AMap 等对象），ESLint 并不能识别他们，总是会报错。这个时候，该配置的作用就出现了。使用 globals 指出你要使用的全局变量。将变量设置为 true 将允许变量被重写，或 false 将不允许被重写。

Plugins

ESLint 支持使用第三方插件。在使用插件之前，你必须使用包管理工具安装它。在配置文件里配置插件时，可以使用 plugins 关键字来存放插件名字的列表。插件名称可以省略 eslint-plugin- 前缀。

Rules

ESLint 附带有大量的规则。你可以使用注释或配置文件修改你项目中要使用的规则。要改变一个规则设置，你必须将规则 ID 设置为off、warn、error三者之一。

继承配置文件

基本要用的配置属性在上面都已经涉及到了。但是我们之前讲过 ESLint 不仅有可配性，还有插件的可插拔性。那么插件又是如何工作的呢？插件无外乎是增强某些功能，并且对外提供接口。在 ESLint 中，插件一般都是通过继承的方式，来实现对外提供特定功能。

`extends`

一个配置文件可以从基础配置中继承已启用的规则。

extends 属性值可以是：

(1)、在配置中指定的一个字符串

(2)、字符串数组：每个配置继承它前面的配置

ESLint 递归地进行扩展配置，所以一个基础的配置也可以有一个 extends 属性。

extends 里面可以引入共享配置包，可以引入插件

共享配置包

可共享的配置是一个 npm 包，它输出一个配置对象。

extends 属性值可以省略包名的前缀 eslint-config-。

插件

插件是一个 npm 包，通常输出规则。一些插件也可以输出一个或多个命名的配置。

plugins 属性值可以省略包名的前缀 eslint-plugin-。

extends 属性值可以由以下组成：

（1）、plugin: （2）、包名 (省略了前缀，比如，react) （3）、/ （4）、配置名称 (比如 recommended)

`Prettier`

Prettier 是一个代码格式化工具。能够按照我们的规则，将我们的代码格式化。

为什么我们用它，而不用其他的代码格式化工具呢？Prettier 主要有以下优点：

可配置化
支持多种语言
集成多数的编辑器
简洁的配置项

`ESLint` + `Prettier`

团队中的所有开发人员用一套代码规范规则，并且无需我们花太大的精力去为了格式而格式。希望有一套自动化工具，帮我们检测代码是否规范，如果不规范，则自动能够帮我们按照既定规范格式化。------我们的终极目标

通过上面的了解，要想达到我们的终极目标似乎就是将这两个一起使用即可。那么如何整合他们呢？

以vue工程为例：

第一步：下载相关包

最基本的，我们肯定要下载eslint，prettier这两个包的。

其次，为了将其整合起来那么我们需要已写好的“共享配置包”和插件。因此我们需要下载eslint-plugin-prettier,eslint-config-prettier。

再次，我们需要站在巨人的肩膀上看世界。也就是我们需要业界一些比较成熟的规范，来规范我们的代码。因此我们可以使用大团队提供的代码规范插件。比较有名的就是airbnb。这里我们选用的是airbnb-base。故而我们需要下载eslint-config-airbnb-base。

最后，为了完美使用我们 ES6 的一些新特性。我们需要将“词法解析器”设置为babel-eslint。因此我们还需要下载babel-eslint.

对了，我们是vue工程，那么肯定要有对 vue 配置的插件，因此我们需要下载eslint-plugin-vue

总结可得，我们需要下载以下包

npm install esint prettier eslint-plugin-prettier eslint-config-prettier eslint-config-airbnb-base babel-eslint eslint-plugin-vue

复制代码

第二步建立配置文件

如果仔细阅读了之前eslint的配置项，那么这一步是比较机械化的。因此我直接将工程中的配置文件拷贝过来，加以注释吧。

在工程的根目录，创建一个.eslintrc.js文件，文件内容如下：

module.exports = {
  env: {
    browser: true,
    jquery: true, //由于项目中使用来jquery。。。其实不用引入jquery的，以后有机会去掉jquery后，请移除该配置。
  },
  parserOptions: {
    parser: 'babel-eslint', //词法解析器使用babel-eslint，以更好的适配es6的新api
    ecmaVersion: 6, //启用 ES6 语法支持;默认设置为3，5（默认）， 你可以使用 6、7、8 或 9 来指定你想要使用的 ECMAScript 版本。你也可以用使用年份命名的版本号指定为 2015（同 6），2016（同 7），或 2017（同 8）或 2018（同 9）
    sourceType: 'module', //设置为 "script" (默认) 或 "module"（如果你的代码是 ECMAScript 模块)。
  },
  extends: [
    'airbnb-base',
    'eslint:recommended',
    'plugin:vue/essential',
    'plugin:prettier/recommended',
  ],
  plugins: ['vue', 'prettier'],
  rules: {
    'prettier/prettier': 'error',
    'generator-star-spacing': 'off',
    'import/no-named-as-default': 'off',
    'import/no-named-as-default-member': 'off',
    'no-unused-vars': [
      'error',
      { vars: 'all', args: 'none', ignoreRestSiblings: false },
    ], //没有使用的参数，不会报错。因为个人觉的把可用的参数写上去 有利于以后的维护。
  },
};


复制代码

开发工具

其实到上一步的话，已经将ESlint和Prettier配置完了。但是要能够自动格式化，那么我们还需要做一些集成。

实现自动格式化这一目标，可以在开发工具上做文章，也可以在webpack上做文章。其实我比较倾向在开发工具上实现自动格式化，因为这样子似乎比较快。

在开发工具中，我们希望在修改代码保存后，能够自动格式化代码。如何实现这一目标呢？我们以VScode为例

1. 打开VScode的配置文件

1. 增加以下配置.

...

"prettier.eslintIntegration": true,
  "eslint.autoFixOnSave": true,
  "editor.formatOnSave": true,
  //配置 ESLint 检查的文件类型
  "eslint.validate": ["javascript", "javascriptreact", "vue", "html"],
  "eslint.options": {
    "configFile": "./`.eslintrc`.js"
  },

...


复制代码

`webpack`

除了可以在开发工具上做文章，也可以在打包编译工具上做文章，以实现自动格式化的目标。我们以webpack为例：

因为vue工程通常会用官方提供的脚手架，所以这里我直接上图了，就不BB了。（其实是时间太晚了，明天还要上班，老婆已经再催了）

后记

其实我们在代码规范方面，利用eslint还可以做很多很多事情。

比如，我们可以增加一个脚本，来检测代码是否规范。

我们也可以在git提交前，做一次自动检测，避免团队中提交不规范的代码。可以借阅code review的一部分精力，可以把code review的重点放在代码逻辑本身的合理性上。

再贴一个 prettier官网链接 https://prettier.io/docs/en/options.html 设置就参考这里

posted @ 2020-04-30 09:15 jaiodfjiaodf 阅读(15713) 评论(1) 编辑收藏举报

刷新页面返回顶部

Bricks

eslint 与 prettier 实现代码规范自动格式化

eslint 与 prettier 实现代码规范自动格式化

`ESLint`

如何配置

这些配置啥意思

Parser

parserOptions

`Environments`

`Globals`

Plugins

Rules

继承配置文件

`extends`

`Prettier`

`ESLint` + `Prettier`

第一步：下载相关包

第二步建立配置文件

开发工具

`webpack`

后记

公告

Bricks

eslint 与 prettier 实现代码规范自动格式化

eslint 与 prettier 实现代码规范自动格式化

ESLint

如何配置

这些配置啥意思

Parser

parserOptions

Environments

Globals

Plugins

Rules

继承配置文件

extends

Prettier

ESLint + Prettier

第一步： 下载相关包

第二步 建立配置文件

开发工具

webpack

后记

公告

`ESLint`

`Environments`

`Globals`

`extends`

`Prettier`

`ESLint` + `Prettier`

第一步：下载相关包

第二步建立配置文件

`webpack`