前言
常规前端项目中,需要规范团队的代码规范,除了手动的修改代码之外,可以借助插件来实现保存修改。这里选用eslint和prettier来实现代码风格统一。
关于prettier
prettier是一个代码美化工具,关于prettier配合使用的插件,包括eslint-plugin-prettier,还有其他的插件和脚本,具体可以参考https://github.com/prettier。
官方给的例子:
原代码:
foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());
格式化后:
foo(
reallyLongArg(),
omgSoManyParameters(),
IShouldRefactorThis(),
isThereSeriouslyAnotherOne()
);
使用:
结合编辑器使用(以vscode为例)
书写完代码后,点击保存就能按照定义好的风格进行格式化,减轻大量的开发时间。
查找插件如下并安装:
开始时使用:
1、编辑代码时,保存文件,自动格式化并保存
2、格式化某个文件时,在打开文件的当前页按shift + alt + f
3、格式化某段代码时,先选中这段代码,再按 shift + alt + f
脚本类直接使用:
安装(以npm为例):
npm install --save-dev --save-exact prettier
npm install --g prettier
使用,直接使用prettier的命令
prettier --write <文件路劲+文件名>
添加自定义配置:
支持多种格式:
- .prettierrc 文件,支持yaml和json格式;或者加上扩展名也可以,可选的扩展名有 .yaml/.yml/.json
- .prettierrc.toml 文件
- prettier.config.js or .prettierrc.js 返回一个对象
- 或者在package.json文件中加上prettier对象
json配置文件写法:
{
printWidth: 120, //换行的行长度
tabWidth: 2, //指定每个缩进级别的空格数
trailingComma: 'none', //多行使用拖尾逗