在多人开发项目中,不同的开发人员有不同的开发习惯。如果不加约束,会导致代码混乱,降低代码的可读性,增加开发和拓展难度。
我采用eslint
和prettier
来约束代码风格,具体使用方法我做了一下总结。
这里主要使用的是普通的前端项目进行说明,Vue
等许多前端框架已经将eslint
融合其中,如果使用类似框架,可以直接跳过安装步骤。
当然关于规则等更详细的内容,大家可以参考官网。
安装
先初始化项目。
npm init -y
根目录出现package.json
文件,接下来我们可以安装eslint
和prettier
了。
这里prettier
是作为eslint
的插件引入的,所以需要安装如下:
npm i eslint prettier eslint-plugin-prettier -D
配置
eslint
的配置文件可以有很多格式,也可以配置在package.json
里。不过我个人为了更好的管理,所以喜欢单独配置。
我这里使用的配置文件类型是.eslintrc.js
。配置方案如下,大家可以根据项目需要进行增删。
module.exports = {
root: true,
env: {
browser: true,
es6: true,
// node: true,
// jquery: true
},
plugins: ["prettier"],
rules: {
"prettier/prettier": "error",
},
};
这样eslint
就会按照prettier
的默认设置对代码进行格式化了。
自定义
当然prettier
也可以自定义配置。官网提供了详细的配置说明。
module.exports = {
rules: {
'prettier/prettier': [
'error',
{
singleQuote: true, // 单引号
trailingComma: 'none' // 末尾逗号
}
]
}
};
注:如需自定义的配置过多,建议在独立的
.prettierrc.json
文件中进行配置。