更新版-梳理前端开发使用eslint和prettier来检查和格式化代码问题

时间 2019-11-06

标签更新版梳理前端开发使用 eslint prettier 检查格式化代码问题繁體版

原文原文链接

更新版，以前的版本能够看这里：梳理前端开发使用eslint和prettier来检查和格式化代码问题

1、问题痛点

在团队的项目开发过程当中，代码维护所占的时间比重每每大于新功能的开发。所以编写符合团队编码规范的代码是相当重要的，这样作不只能够很大程度地避免基本语法错误，也保证了代码的可读性。
对于代码版本管理系统（svn 和 git或者其余），代码格式不一致带来的问题是严重的，在代码一致的状况下，由于格式不一样，触发了版本管理系统标记为 diff，致使没法检查代码和校验。

可是须要知道的是，开发规范不只仅包含代码格式规范，还有不少内容，这里只是单独说明代码格式化规范而已。

（一）关于代码格式规范问题

代码格式规范的标准能够参考各大主流公司和社区，如下都是一些经常使用主流规范：javascript

前端开发规范之命名规范、html规范、css规范、js规范 - 腾讯Web前端 IMWeb 团队社区 | blog | 团队博客腾讯的
编写「可读」代码的实践 | Taobao FED | 淘宝前端团队淘宝的
GitHub - airbnb/javascript: JavaScript Style Guide airbnb 的
https://google.github.io/styl... google 的
https://github.com/pablohpsil... vue 的

参考别人的规范，制定适合本身团队使用的规范，太过复杂的规范执行起来太麻烦，太过简单的规范不如没有规范。
没有绝对的规范，只有适合的规范！css

（二）关于为何要用 eslint 和 prettier问题

prettier 主要是为了格式化代码，而在没有 prettier 以前，是用 eslint —fix和编辑器自带代码格式来进行代码格式化的。html
- 缺点：每种编辑器会有不同的代码格式，并且配置会比较麻烦。
- prettier 已经逐渐成为业界主流的代码风格格式化工具。
- 减轻 eslint 等工具的校验规则，由于将代码样式校验交给了 prettier，因此能够将代码校验的规则更准确地应用到代码真正的规范上面。
eslint 是主要仍是负责代码规则校验，prettier 只调整代码风格，代码样式，eslint 才是真正检查代码是否符合规范的工具。

因此二者是须要配合使用的。

2、解决办法

旧有的解决办法是：前端

使用 editorconfig 协助兼容开发工具的代码格式化。
使用 eslint 检查代码
使用 eslint —fix来修复不符合 eslint 规则的代码，它会自动根据设置的规则来改变代码（它会包含代码样式的规则，可是 eslint 的样式规则并不太准确）。
手动修改剩下的有问题的地方，或者有些地方很难用规则来判断的时候，就须要手动修改。

新的解决办法是：vue

使用 editorconfig 协助兼容开发工具的代码格式化。
使用 eslint 检查代码。
使用 prettier 格式化代码。（能够理解为prettier是 eslint —fix 的增强版，用 prettier 来代替 eslint-fix）
手动修改剩下的有问题的地方，或者有些地方很难用规则来判断的时候，就须要手动修改。

咋一看，其实没啥区别，甚至可能发现新解决办法会更加麻烦了一些，其实步骤上确实如此，可是真正操做上，会减轻 eslint 的规则编写，也会减小不少手动修改样式的地方，格式化后的代码会更加美观，耐看。

3、具体操做

鉴于网上文章说明的比较混乱，这里主要是为了梳理整个流程和思路。

大纲

统一团队使用的开发工具（webstorm，ide 编辑器）
安装 eslint 和 prettier （node 模块）
安装 eslint 和 prettier （ ide 编辑器的插件）
配置 eslint 和 prettier
配置 editorconfig （可选）
严格督查，按照流程检查和格式化代码，按照规范和要求进行代码提交。

这里多了一步是安装 eslint 和 prettier （ ide 编辑器的插件），主要就是利用 ide 编辑器作代码格式错误提醒和代码格式处理，这个操做也可使用 webpack 打包的时候来作，也可使用 gulp 或者 npm 来作，但这里借助编辑器会更方便。

（一）统一团队使用的开发工具（webstorm，ide 编辑器）

开发工具能够作不少东西，是开发代码的利器，可是不一样的开发工具会有不一样的代码提示，代码格式化，代码检查的机制，这样的差别化会对团队代码规范（开发和检查）带来不少问题，因此须要统一。java

固然，若是我的不肯意更换本身用惯的开发工具的话，也不要紧，只要可以作到跟团队的开发规范保持一致也是能够的，但我的以为，这样难度比较大，毕竟开发工具和团队的开发规范不那么容易融合。

这里只说明前端业界目前最经常使用的开发工具来作例子 webstorm 。node

（二）安装 eslint 和 prettier （node 模块）

安装这个模块的意义在于，实际上，整个流程最核心就是这个地方，开发工具虽然支持了这2个模块，可是最终运行是必需要以这2个模块安装好才能使用的。webpack

// 这里须要全局安装最主要的两个node 模块，主要是要让 ide 编辑器可以读取全局环境来调用这2个模块
npm install eslint prettier -g --save-dev

// 这个是为了 eslint 跟 prettier 能够联合使用
npm install --save-dev eslint-plugin-prettier
// 这个是为了让 eslint 跟 prettier 兼容，关闭 prettier 跟 eslint 冲突的rules
npm install --save-dev eslint-config-prettier

补充备注：git

eslint-config-prettier ：github
- 这个插件是若是eslint的规则和prettier的规则发生冲突的时候（主要是没必要要的冲突），例如eslint 限制了必须单引号，prettier也限制了必须单引号，那么若是用 eslint 驱动 prettier 来作代码检查的话，就会提示2种报错，虽然他们都指向同一种代码错误，这个时候就会由这个插件来关闭掉额外的报错。
- 但若是是eslint 只负责检测代码，prettier 只负责格式化代码，那么他们之间互不干扰，也就是说，也是能够不安装这个插件的，可是由于团队的人员的差别性（即便同一个开发工具也有版本差别，也有使用 prettier 和 eslint 的差别），可能有存在各类状况，因此最好仍是安装上这个插件。
- 官方有详细介绍：GitHub - prettier/eslint-config-prettier: Turns off all rules that are unnecessary or might conflict with Prettier.

模块参考信息： Integrating with ESLint · Prettier

如下顺便说一下其余咱们经常使用到的eslint 模块：

nam -g install babel-eslint eslint-plugin-html --save-dev

babel-eslint ：
- 有些代码是没被 eslint 支持的（由于 babel 也是负责这种事情，转译不被支持的 js 语法），因此须要加上这个插件来保持兼容性。
- 官方有详细介绍：https://github.com/babel/babe...
eslint-plugin-html：
- 为了让eslint 能够检查.vue文件的代码。

（三）安装webstorm 的eslint 插件和 prettier 插件并启用插件

更多配置方式参考：WebStorm Setup · Prettier

根据官方介绍webstorm 分别有2种处理：

WebStorm 2018.1 和以上的版本
WebStorm 2017.3 和更早的版本

若是用IntelliJ IDEA, PhpStorm, PyCharm, and other JetBrains IDEs, 则须要安装prettier插件和 eslint 插件，而webstorm 的话默认会帮你安装上，这也是推荐 webstorm 的缘由。

1. WebStorm 2018.1 和以上的版本

官方默认已经集成了 prettier 支持，只须要配置好一个全局的 prettier 模块调用方式就可使用了（必须配置）。

快捷键是：Alt-Shift-Cmd-P on macOS or Alt-Shift-Ctrl-P on Windows and Linux

氪金王的好处，升级快，支持快，免破解，省心省力不省钱！

2. WebStorm 2017.3 和更早的版本

这个版本有2种状况：

①是eslint 模式，使用 eslint-plugin-prettier 插件和启用eslint 插件配合，这里至关于使用 eslint 模块来驱动 prettier 模块，而后中间驱动则是靠eslint-plugin-prettier。

首先启用 eslint，而且配置 eslint 模块位置，默认会自动读取当前目录的 eslint.rc 配置文件，而后须要进行 npm 安装eslint-plugin-prettier这个插件，后面再统一说明。

②是直接使用 prettier 做为额外工具来使用。

上面两种方式的默认快捷键都是Cmd/Ctrl-Shift-A（在 mac 下是 comm+shift+A），以为不舒服，按需修改快捷键便可。

（三）配置 eslint 插件和 prettier插件

1. eslint 的配置

eslint 的检查规则是经过配置文件.eslintrc 实现的，可是各家有各家的 eslint 配置文件GitHub - AlloyTeam/eslint-config-alloy: AlloyTeam ESLint 规则：

详细参考网址：

不过这里不纠结用哪种 eslint 的配置，具体看项目和团队，这里只是说明须要作 eslint 的配置，而且须要作一些说明：

.eslintrc 配置文件须要添加修改地方，主要是为了 prettier插件和eslint-config-prettier 插件和eslint-plugin-prettier插件使用的：

// 由于使用了 eslint 和 prettier，因此要加上他们
extends: [ 'eslint:recommended', 'plugin:prettier/recommended'],

// required to lint *.vue files 使用 html参数
plugins: ['html', 'prettier'],

// rules 规则就按照各家写法。

在 webstorm 下，在项目根目录 .eslintrc做为配置文件。

2. prettier的配置

prettier 的检查规则是经过配置文件.prettierrc 实现的，不过通常来讲，只须要配置少部分规则便可：.

{
  "printWidth": 100,
  "singleQuote": true, 
  "semi": false 
}

有可能会出现的状况是，prettier 格式化后，所有加了分号，可是 eslint 又要去掉分号，那么就会重复了，这里能够简单地设置 prettier 的分号设置跟 eslint 保持一致，其余如此类推，但只适用在几个比较特别的地方，能够参考官方文档。官方有详细的介绍：Configuration File · Prettier

（四）配置 editorconfig

EditorConfig能够帮助开发者在不一样的编辑器和IDE之间定义和维护一致的代码风格。
EditorConfig包含一个用于定义代码格式的文件和一批编辑器插件，这些插件可让编辑器读取配置文件并依此格式化代码。

对此我我的的理解就是，editorconfig能够协助开发工具在自动格式化或者自动排版或者录入排版的时候进行代码格式化，可是只能支持比较简单的规则，不过也减轻了一部分代码格式化的压力和成本，因此有比没有好，并且最好要有。

// 放在项目根目录的.editorconfig文件
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

详细参考：

（五）严格督查，按照流程检查和格式化代码，按照规范和要求进行代码提交。

须要明确一点，代码格式化须要由上而下执行，若是没有强制性压力督促，那么是对抗不了人类的惰性的。

整个代码检查和格式化流程应该规范为以下步骤：

使用eslint 而且尝试自动修复全部问题（eslint 有 autofix 提示，能够进行—fix 修复，按照 .eslintrc 配置文件来进行修复）。
使用 prettier 格式化全部代码。
差别性修复代码，由于有些格式或者其余问题致使出错而被前两部过滤以后还剩余的。（一般前面两步基本解决了全部问题了）
把精美的格式化后的代码提交到版本库。

参考文档：

本文转载自个人 blog：更新版 - 梳理前端开发使用 eslint 和 prettier 来检查和格式化代码问题