项目中使用eslint+prettier规范前端代码规范

前言

常规前端项目中，需要规范团队的代码规范，除了手动的修改代码之外，可以借助插件来实现保存修改。这里选用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', //多行使用拖尾逗