团队开发的项目,如果没有对代码风格作要求,有多少团队成员,就当然会出现多少种不同的代码风格。因此,我们需要一种能够统一团队代码风格的工具,作为强制性的规范,统一整个项目的代码风格。
幸好,我们有 eslint 和 prettier 。
eslint VS prettier
应该大多数项目都已经采用eslint来对代码进行质量检查,可能少部分还会采用其进行一定程度上的统一风格。那为什么还需要prettier呢?我们先来对它们作一个简单的了解。
各种linters
总体来说,linters有两种能力:
- 检查代码质量 ,比如是否有已定义但未使用的变量,或者使用函数式编程的函数是否产生副作用等。
- 检查代码风格 ,比如每行的最大长度,或者是否使用拖尾逗号等。
其中,eslint文档中,带扳手图标的规则就是eslint能够自动修复的规则。而不带该图标的规则,eslint则只能给出错误或警告,随后由开发者人工修复。
prettier
pretter没有对代码的质量进行检查的能力,其只会对代码风格按照指定的规范进行统一,避免一个项目中出现多种不同的代码风格。
项目配置
此处使用vue项目作为例子
一、首先配置eslint
如果大家的项目是使用vue cli生成的,并且选择使用eslint的话,那么默认在项目根目录下就会生成.eslintrc.js。如果没有,也可以在项目根目录下创建该文件以及.eslintignore文件
此处我使用eslint-plugin-vue,选择的是vue/strongly-recommended规则。
npm install --save-dev eslint eslint-plugin-vue@next
// .eslintrc.js
extends: {
'plugin:vue/strongly-recommended'
}//前端全栈交流学习:866109386
//帮助1-3年前端人员,提升技术,思维
// .eslintignore
/build/
/config/
/dist/
/*.js
/test/unit/coverage/
如果希望在重新编译的时候eslint自动修复代码,需要在webpack配置中加入eslint,并且设置 fix: true