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

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

2018/06/11 · JavaScript
· 格式化

原稿出处:
Edwin   

相同、问题痛点

  • 当公司的路开支过程被,代码维护所占有的日子比重往往超出新效能的付出。因此编写符合协会编码规范之代码是关键的,这样做不仅可以非凡要命程度地制止基本语法错误,也保了代码的可读性。
  • 对代码版本管理体系(svn 和
    git或者其他),代码格式不一致带来的问题是严重的,在代码一致的景下,因为格式不同,触发了本管理序列标记为
    diff,导致力不从心检查代码和校验。

而要精通的凡,开发规范不仅仅包含代码格式规范,还有很多情,那里只是独自表达代码格式化规范而已。

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

代码格式规范之正统可参照各大主流集团跟社区,以下且是有常用主流规范:

参照旁人的规范,制定适合自己团队以的标准,太过复杂的专业履起来最为难为,太过简短的科班不如没有正儿八经。

没断然的业内,唯有切合之业内!

(二)关于为啥而用 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单模块安装好才会使的。

JavaScript

// 这里需要全局安装最为要的少独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

1
2
3
4
5
6
7
// 这里需要全局安装最主要的两个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

填补备注:

  • 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 模块:

JavaScript

npm -g install babel-eslint eslint-plugin-html –save-dev

1
npm -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 和重早的本子

万一由此AMDliJ IDEA, PhpStorm, PyCharm, and other JetBrains IDEs,
则需要设置prettier插件和 eslint 插件,而webstorm
的话默认会帮您安装上,这吗是推荐 webstorm 的缘由。

1. WebStorm 2018.1 和上述之本子

官方默认已经合龙了 prettier 补助,只需要配置好一个大局的 prettier
模块调用模式就得利用了(必须配备)。图片 1

图片 2

快捷键是: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这插件,前面更统一验证。

图片 3
图片 4

  • ②凡是直接运用 prettier 作为额外工具来以。
    图片 5图片 6图片 7
    图片 8地点两种植形式的默认飞速键都是Cmd/Ctrl-Shift-A(在
    mac 下是comm+shift+A),觉得无舒适,按需要修改快速键即可。

(三) 配置 eslint 插件和 prettier插件

1. eslint 的配置

eslint 的检讨规则是经安排文件.eslintrc 实现的,不过各家有各家的
eslint 配置文件GitHub – AlloyTeam/eslint-config-alloy: AlloyTeam ESLint
规则

图片 9图片 10

详细参考网址:

唯独此不纠用啦一样栽 eslint
的部署,具体看项目与团伙,这里只是表明需要开 eslint
的布置,并且要做一些表达:

.eslintrc 配置文件要加上修改地点,重即便为
prettier插件和eslint-config-prettier
插件与eslint-plugin-prettier插件使用的:

JavaScript

// 因为运用了 eslint 和 prettier,所以假若增长他们 extends: [
‘eslint:recommended’, ‘plugin:prettier/recommended’], // required to
lint *.vue files 使用 html参数 plugins: [‘html’, ‘prettier’], //
rules 规则就是以各家写法。

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

当 webstorm 下,在路根本目录.eslintrc用作配置文件。

2. prettier的配置

prettier 的检查规则是经过配备文件.prettierrc
实现之,但是貌似的话,只需要配备少部分平整即可:

JavaScript

{ “printWidth”: 100, “singleQuote”: true, “semi”: false }

1
2
3
4
5
{
  "printWidth": 100,
  "singleQuote": true,
  "semi": false
}

发出或会面出现的境况是,prettier 格式化后,全体加以了分企业,可是 eslint
又假设错过丢分号,那么就会再次了,这里可以简单地设置 prettier 的子公司设置与
eslint
保持一致,其他如此类推,但才适用在多少个相比较特别之地点,能够参照官方文档。官方发详尽的牵线:Configuration
File · Prettier

(四) 配置 editorconfig

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

针对那一个我个人的解就是是,editorconfig可以扶助开发工具在电动格式化或者机关排版或者录入排版的早晚举行代码格式化,可是只好辅助相比简单的条条框框,然而也减轻了扳平局部代码格式化的下压力和本金,所以爆发相比较无好,而且极端好只要有。

JavaScript

// 放在项目根本目录的.editorconfig文件 root = true [*] charset = utf-8
indent_style = space indent_size = 2 end_of_line = lf
insert_final_newline = true trim_trailing_whitespace = true

1
2
3
4
5
6
7
8
9
10
// 放在项目根目录的.editorconfig文件
root = true
 
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

详见参考:

(五) 严谨监督,遵照流程检查与格式化代码,按照标准及要求举办代码提交。

需通晓一点,代码格式化需要由上而下执行,假使无强制性压力督促,那么是势不两立不了人类的惰性的。

漫天代码检查及格式化流程应该规范也如下步骤:

  1. 运用eslint 并且尝试自动修复所有问题(eslint 有 autofix
    提示,可以举行—fix 修复,依照 .eslintrc 配置文件来进展修复)。
  2. 用 prettier 格式化所有代码。
  3. 差别性修复代码,因为有些格式或其他题材导致差而吃眼前片总统过滤后还剩余的。(平日前面两步基本解决了有题目了)
  4. 拿理想的格式化后的代码提交至版本库。

参照文档:

图片 11

相关文章