专栏首页前端正义联盟梳理前端开发使用 eslint 和 prettier 来检查和格式化代码问题

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

一、问题痛点

  • 在团队的项目开发过程中,代码维护所占的时间比重往往大于新功能的开发。因此编写符合团队编码规范的代码是至关重要的,这样做不仅可以很大程度地避免基本语法错误,也保证了代码的可读性。
  • 对于代码版本管理系统(svn 和 git 或者其他),代码格式不一致带来的问题是严重的,在代码一致的情况下,因为格式不同,触发了版本管理系统标记为 diff,导致无法检查代码和校验。

但是需要知道的是,开发规范不仅仅包含代码格式规范,还有很多内容,这里只是单独说明代码格式化规范而已。

(一)关于代码格式规范问题

代码格式规范的标准可以参考各大主流公司和社区,以下都是一些常用主流规范:

  • 前端开发规范之命名规范、html 规范、css 规范、js 规范 - 腾讯 Web 前端 IMWeb 团队社区 | blog | 团队博客腾讯的
  • 编写「可读」代码的实践 | Taobao FED | 淘宝前端团队 淘宝的
  • GitHub - airbnb/javascript: JavaScript Style Guide airbnb 的
  • https://google.github.io/styleguide/jsguide.html google 的
  • https://github.com/pablohpsilva/vuejs-component-style-guide/blob/master/README-CN.md vue 的

参考别人的规范,制定适合自己团队使用的规范,太过复杂的规范执行起来太麻烦,太过简单的规范不如没有规范。 没有绝对的规范,只有适合的规范!

(二)关于为什么要用 eslint 和 prettier 问题

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

所以两者是需要配合使用的。

二、解决办法

旧有的解决办法是:

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

新的解决办法是:

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

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

三、具体操作

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

大纲

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

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

(一)统一团队使用的开发工具(webstorm,ide 编辑器)

开发工具可以做很多东西,是开发代码的利器,但是不同的开发工具会有不同的代码提示,代码格式化,代码检查的机制,这样的差异化会对团队代码规范(开发和检查)带来很多问题,所以需要统一。

当然,如果个人不愿意更换自己用惯的开发工具的话,也没关系,只要能够做到跟团队的开发规范保持一致也是可以的,但个人觉得,这样难度比较大,毕竟开发工具和团队的开发规范不那么容易融合。

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

(二)安装 eslint 和 prettier (node 模块)

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

1234567

// 这里需要全局安装最主要的两个node 模块,主要是要让 ide 编辑器能够读取全局环境来调用这2个模块npm install eslint prettier -g --save-dev// 这个是为了 eslint 跟 prettier 可以联合使用npm install --save-dev eslint-plugin-prettier// 这个是为了让 eslint 跟 prettier 兼容,关闭 prettier 跟 eslint 冲突的rulesnpm install --save-dev eslint-config-prettier

补充备注:

  • eslint-config-prettier :
    • 这个插件是如果 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 模块:

1

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

  • babel-eslint :
    • 有些代码是没被 eslint 支持的(因为 babel 也是负责这种事情,转译不被支持的 js 语法),所以需要加上这个插件来保持兼容性。
    • 官方有详细介绍:https://github.com/babel/babel-eslint
  • eslint-plugin-html:
    • 为了让 eslint 可以检查.vue文件的代码。

(三)安装 webstorm 的 eslint 插件和 prettier 插件并启用插件

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

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

  1. WebStorm 2018.1 和以上的版本
  2. 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 规则:

详细参考网址:

  • AlloyTeam ESLint 规则
  • 摆脱令人抓狂的 ESlint 语法检测配置说明 - web 攻城方略 - SegmentFault 思否
  • ESLint 配置文件. eslintrc 参数说明 · GitHub

不过这里不纠结用哪一种 eslint 的配置,具体看项目和团队,这里只是说明需要做 eslint 的配置,并且需要做一些说明:

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

1234567

// 因为使用了 eslint 和 prettier,所以要加上他们extends: [ 'eslint:recommended', 'plugin:prettier/recommended'],// required to lint *.vue files 使用 html参数plugins: ['html', 'prettier'],// rules 规则就按照各家写法。

在 webstorm 下,在项目根目录.eslintrc作为配置文件。

2. prettier 的配置

prettier 的检查规则是通过配置文件.prettierrc 实现的,不过一般来说,只需要配置少部分规则即可:.

12345

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

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

(四) 配置 editorconfig

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

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

12345678910

// 放在项目根目录的.editorconfig文件root = true[*]charset = utf-8indent_style = spaceindent_size = 2end_of_line = lfinsert_final_newline = truetrim_trailing_whitespace = true

详细参考:

  • 【译】EditorConfig 介绍 | AlloyTeam
  • EditorConfig

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

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

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

  1. 使用 eslint 并且尝试自动修复所有问题(eslint 有 autofix 提示,可以进行—fix 修复,按照 .eslintrc 配置文件来进行修复)。
  2. 使用 prettier 格式化所有代码。
  3. 差异性修复代码,因为有些格式或者其他问题导致出错而被前两部过滤之后还剩余的。(通常前面两步基本解决了所有问题了)
  4. 把精美的格式化后的代码提交到版本库。

参考文档:

  • 如何花 30 分钟解决 eslint 产生的各种错误 | Tomyail 的记忆现场
  • Introducing Prettier with Eslint – Michael Hsu – Medium
  • Efficient Code Analyzing and Formatting (for Vue.js) with ESLint and Prettier

本文分享自微信公众号 - 前端正义联盟(wnb020020)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-06-09

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 使用ESLint & Prettier美化Vue代码

    晚晴幽草轩轩主
  • 从 ESLint 开始,说透我如何在团队项目中基于 Vue 做代码校验

    最近遇到了一个老项目,比较有意思的是这个项目集前后端的代码于一起,而后端也会去修改前端代码,所以就出现了后端用 IntelliJ IDEA 来开发前端项目,而前...

    用户4456933
  • [译] 以和为贵!让 ESlint、Prettier 和 EditorConfig 互不冲突

    原文链接:https://blog.theodo.com/2019/08/empower-your-dev-environment-with-eslint-pr...

    江米小枣
  • 使用ESLint + Prettier简化代码 Review 过程[每日前端夜话0x4E]

    在最近的一个项目中,我们通过设置 ESLint 和 Prettier 来进行自动化语法检查,并对 JavaScript 项目的代码风格管理。

    疯狂的技术宅
  • 如何制定企业级代码规范与检查

    就从我的题目说起,本篇文章告诉你针对定制代码规范和检查这个小需求如何做出亮点?看完本文后回顾上面提到的 4 点,感觉下。

    coder_koala
  • 代码规范之-理解ESLint、Prettier、EditorConfig

    团队多人协同开发项目中困恼团队管理一个很大的问题是:无可避免地会出现每个开发者编码习惯不同、代码风格迥异,为了代码高可用、可维护性, 如何从项目管理上尽量统一和...

    coder_koala
  • 从 0 开始手把手带你搭建一套规范的 Vue3.x 工程化项目

    Vue3 跟 Vite 正式版发布有很长一段时间了,生态圈也渐渐丰富起来,作者已在多个项目中使用,总结一下:就是快!也不用担心稳定性问题,开发体验真不是一般好!...

    XPoet
  • Prettier看这一篇就行了

    作者:陈龙 https://zhuanlan.zhihu.com/p/81764012 已获取作者授权,请勿未经允许转载。

    zz_jesse
  • 从 0 到 1 搭建一个企业级前端开发规范

    https://juejin.cn/post/6947872709208457253

    @超人
  • 【JavaScript】ESlint & Prettier & Flow组合,得此三神助,混沌归太清

    Flow是faceBook开源的一个JavaScript静态类型检查工具,作用类似TypeScript,但是它不像TS那样是一门独立的语言,而是作为一个babe...

    啦啦啦321
  • JavaScript 代码风格检测

    在日常开发中,每个人的代码编写习惯都不尽相同,比如有的人喜欢在代码末尾加上分号,而有的人不喜欢加,在个人开发的项目中这并不是什么严重问题。但在团队协作开发时,我...

    Nian糕
  • 使用ESLint+Prettier来统一前端代码风格

    想起自己刚入行的时候,从svn上把代码checkout下来,看到同事写的代码,大括号居然换行了。心中暗骂,这个人是不是个**,大括号为什么要换行?年轻气盛的我,...

    自然醒
  • 2020最新编辑器集成eslint、prettier、stylelint,git提交预检查代码配置

    webstorm设置搜eslintr、eslint、stylelint,如果没有,搜plugin,安装prettier、eslint、stylelint

    蓓蕾心晴
  • 一套标准的前端代码工作流

    工欲善其事,必先利其器。对于写代码而言,也是需要有一套完善的工作流(工具和流程)。

    逆锋起笔
  • 可能是目前最详细从零开始配置 TypeScript 项目的教程

    本文出自于掘金的子弈[1],原文链接 从零开始配置 TypeScript 项目[2]。

    桃翁
  • eslint+prettier学习

    配置文件可以从基本配置扩展启用的规则集,不添加则不会继承任何扩展集,仅按照rules下的基本配置来执行。

    蓓蕾心晴
  • 前端规范那些事

    以上涉及到的rule规则在扩展包的基础上做了调整,基于两个规范做了修改适合你的规范规则

    树酱
  • Vue 项目eslint 配置编程风格(VScode)

    观点:程序运行结果有对错,代码从可读性、扩展性、复用性的标准评判也可以读出来好坏,但是编程风格真的又对错吗?尤其是JS这门脚本语言,在不同领域都有应用,它先天性...

    ZY_FlyWay
  • VS Code书写vue项目配置 eslint+prettier 统一代码风格

    以前公司的vue项目只是我一个人在写,代码风格统一,但是后来随着团队增加,统一的代码风格就越来越重要。我的主力工具是sublime,ws辅助,vscode基本很...

    游魂

扫码关注云+社区

领取腾讯云代金券