统一代码风格eslint + prettier
程序员文章站
2022-05-31 20:15:36
...
在多人开发项目中,不同的开发人员有不同的开发习惯。如果不加约束,会导致代码混乱,降低代码的可读性,增加开发和拓展难度。
我采用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
文件中进行配置。
推荐阅读
-
详解如何在vue项目中使用eslint+prettier格式化代码
-
配置eslint规范项目代码风格
-
vscode + eslint + prettier 格式化Vue代码
-
VSCode + ESLint + Prettier 代码语法检查和格式化
-
vue3+ts+EsLint+Prettier规范代码的方法实现
-
实例详解Vue项目使用eslint + prettier规范代码风格
-
Visual Studio Code 使用 ESLint 增强代码风格检查 - gyzhao - 博客园
-
统一代码风格eslint + prettier
-
VS Code书写vue项目配置 eslint+prettier 统一代码风格
-
VS Code书写vue项目配置 eslint+prettier 统一代码风格