认识 ESLint 和 Prettier

ESLint

先说是什么:ESLint 是一个检查代码质量与风格的工具,配置一套规则,他就能检查出你代码中不符合规则的地方,部分问题支持自动修复。

使用这么一套规则有什么用呢?如果单人开发的话倒是没什么了,但是一个团队若是存在两种风格,那格式化之后处理代码冲突就真的要命了,统一的代码风格真的很重要!

(其实以前自己做一个项目的时候,公司电脑和家庭电脑的代码风格配置不一样,在家加班的时候也经常顺手格式化了,这么循环了几次不同的风格,导致 diff 极其混乱 )

如何配置

用脚手架W I L $生产E O 1 [ ? * ! N {配置可能会在package.json里面,个人建议拆成单独的.eslintrc.json文件,另0 P 4外也可以使用 js 文件 export 或者 yaml 格式。

默认 ESLint 不会有任何规则,不过你可以直接用“eslint:recommended”套用一些常用规则(包括上面 rules 页面打了勾的选项)。

我之前用 vue cli 创建的工程规则是“@vue/standard”:

{
"root": true,
"e) ^ / i Q 5 B s Pnv": {
"node": true
},
"extends": ["plugin:vue/essential", "@vue/standard"],
"rules": {
"semi": ["error", "never"],
"quotes": ["error", "single"],
"comF d i ima-dangle": ["error", "only-multili j v Kine"],
"sp7 t G w Q p T w Xace-before-function-paren": ["error", "never"]
},
"parserOptions"w ` M S: {
"parser": "[ % : E 5babel-eslint"
}
}s * ~ R ? C

rules部分是我按平X H & h时的风( V d格自己加的,rules中的定义会覆盖extends里配置组合中的设定。对于那些使用脚手架搭建的项目,遇到不符合团队或自己代码风格的地方可以另外在rules里配置。

实用提示

在 vscode 安装 ESLint 插件之后,鼠标悬停于错误语句,就会看到5 1 a % J { 2 t错误原因,点击链接可以直达该设d Q n 0 v定的详情页面,页面内包括:

  • 对该风格的描述
  • 错误与正确的使用事例
  • 配置可选项

通过这些信息可以快速调整rules中的配置。

顺带一提,实例中多用数组举例6 } b } ] x 2,其实简单的开关R r I q m 6 ! 3 x配置用数字即可:

"off" or 0 - turn the rule off c R L ?  s j O
"warn" or 1 - turn the rule on as a warning (doesn't affect exit code)
B - ] ? 6 S ` ]"error" or 2 - turn the rule on as an error (exit code is 1 when tr+ P 6 3 M h ?iggered)

另一个问题是 ESLint 格式化很麻烦,怎么办?

早就有人提出为什么右键格式化z f X里面不能选 ESLint 这个issue,里面有很多可选方案,我比较喜欢下面这种:

修改keybii (ndings.. E W d g C [json文件,绑定一个快捷键到eslint.executeAutofix即可,再也看不到那些恼人的 error 啦!

Prettier

因为估计大部分人都不会编程式地使用 Prettier,所以下面讲的都是 vscode 的 Prettier 插件。

Prettier专注于代码排版,但不会关心你的代码质量。

说到这里,既然 ESLint 已经包含了排版相关的校验,为什么还需要 Prettier 呢?

我想到这么三个原因:一是 ESLint 安装和配置比较麻烦,而且 lW T I !int 的速度并不快;二是使用 Prettier 并不只针对 JavaScript,也就是安装 Prettier 插件,就可以格式化各种流行语言;三是配置没那么眼花缭乱。

毕竟是只管代码格式,Prettier 的选项本来就比 ESLint 少多了,而且即使只在样式上,prettier 也} ^ = X不倾I e P s向于乱加选项,这一点还专门在选项的哲学里说明了 Prettier 选项精简的原因。

说回配置方式,Prettier 与 ESLint 同样可用 js、json、yaml 格式,下面举例依然使用惯用的.prettierrc.json。

最常用的配置也就这四项:tab 宽度、尾逗号、是否使用分号和是否使用单引号:

{
"tabWidth": 2,
"trailingComma": "es5T V s : U", // comma= s ) @ p d-dangle
"sev . Z : z  Xmi": false,j d o // semi
"singleQuote": true // quotes
}

除了缩进没有管之外,另外三个选项对$ Z r应的 ESLint 选项已经写在注释里。5 ^ | & T / ,Prettier 格式化的结果和& S 5 G # ESLint 冲突是常有的问Y N ~ N n 3 X题,官网 In3 J otegrating with Linters= X o ? 部分也有提供了让 Pret3 @ ` D Z = o rtier 继承 ESLint 配置的方法,需要另外安装依赖。不过我看实在不必,按我的实际& v K F N风格4 N p习惯自己配一下也就几分钟的事情。

关于这两个工具就先写到这了,希望大家能正确区分这两个v l ^ 6 k L 2工具啦~

时代x ! ] / 6 P j M的眼泪

—— 下面一些不知道有没有用的信^ q 7 } n x P 1 }息,可以选择不看 ——

下面两个片段都是 vscode 的settings.j{ m q H y G u Rson文件

{
"vetur.format.defaultFormatter}  % e S k @ iOptioD 6 ! | ` R z Yns": {
"prettier": {
"semi": false,
"trailingComma": "e5 r d }s5",
"singleQuote": true
}
}
}

很久以前依稀记得 vetur 需要像上面的配置一样嵌套在 v* x Metur 里,现在查了资料才发现配置了.prettierrc.json的话一切以配置文件为准,直接无视这里的配置。还记得当年用 vetur 不知道要在里面套 prettier 属性,还折腾了一些时间呢。

{S A * L
"prettier.semi": true,
"prettier.trailingComma": "es5",
"prettier.singleQuote": true
}

又像上面的配置一样配置整个 vscode 的风格,实测现在是不能用的,即使没v 0 ] 3有.prettierrc.js3 _ P d q Gon这样配置也不生效,官网现n ( { 5在也没有提到这种配置方法。

上面两个配置不是本文主要内容,只是突然想起来B 2 G S @ O @ 9 M好像有这回事,而现在,可能已经成为了时代眼泪吧。

原文链接:https://ssshooter.com/

站长推荐

1.云服务推荐: 国内主流云服务商,各云产品的最新活动,@ O W J 优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你W ( # ! D I d D有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/9228