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

本文仅是技术验证，记录，交流，不针对任何人。有冒犯的地方，请谅解。 该文首发于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（默认）， 你可使用 六、七、8 或 9 来指定你想要使用的 ECMAScript 版本。你也能够用使用年份命名的版本号指定为 2015（同 6），2016（同 7），或 2017（同 8）或 2018（同 9）

• 2. sourceType: 源码类型

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

• 3. 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（默认）， 你可使用 六、七、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的配置文件

• 2. 增长如下配置.

...

"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的重点放在代码逻辑自己的合理性上。

好吧，晚安～