使用Eslint+prettier工具链来保证代码风格以及对提交内容进行校验

前言

今天来分享下使用eslint+prettier工具链来对我们的代码风格进行规范，从而避免每次拉其他同事写的代码后因为规范和自己的不一致而出现 一片红 的场景

1.代码格式规范

对于代码格式规范，我们使用 ESlint + Prettier + vscode来配合进行处理，可以实现代码在保存时自动规范并格式化代码的目的。

2.代码提交规范

对于代码格式规范，我们也可以分为两部分，一部分是提交信息规范，一部分是代码提交规范

• commitlint: 用于检测提交信息
• husky: 可以通过他来检测git hooks，在提交代码前执行一些操作
• commitizen: git信息提交工具，可以通过配置来实现更方便的交互式代码提交
• commit-msg: git的一个hook，在提交代码前可以检测提交的代码信息是否规范
• pre-commit: git的一个hook，在提交代码前可以检测提交的代码是否规范
• lint-staged: 检测本次提交的代码是否规范，不规范的话不能被提交

开始

1.初始化一个项目

mkdir eslint_demo
cd eslint_demo
npm init -y 
git init

之后我们就得出了这么一个项目

2.安装Eslint并初始化

在控制台执行pnpm install eslint -D, 成功后新建 .gitignore 文件，目的是在git提交是忽略一些不应该被提交的文件，.gitignore的内容如下，当然你也可以放你认为不需要提交的内容

接下来执行 npx eslint --init命令来初始化eslint配置

要注意的是在选择Where does your code run?这个选择项时最好选择all，不然commonjs的导入导出会有报错提示
执行完成之后会生成一个.eslintrc.js的配置文件，初始配置如下

因为我们并没有对eslint规则做特殊的配置，所以这时他是使用eslint的默认规则配置项。
接下来我们便开始使用eslint + prettier + vscode来实现代码格式的规范，即保存时实现代码自动格式化的目的

使用Eslint + Prettier +vscode来实现保存时对代码进行规范

1.eslint

接下来我先禁用掉我的vscode中eslint和prettier的插件，不然不会我们的演示效果造成影响

此时我已经将vscode中的Eslint和prettier插件禁用掉了，这里我们先简单介绍下这两个插件是干啥的，Eslint插件时为了在检测到不符合eslint的语法的时候给出明显的报错提示，而不需要使用eslint命令时才发现该地方语法错误，prettier则是为了自动格式化代码。大家要分清vscode下的eslint和prettier插件，和eslint、prettier安装包是不一样的。
接下来我们在根目录下新建一个测试用的js文件，名字就叫index.js，并在文件中写入如下代码

代码看着时没问题，但是因为我们的eslint配置中的规则是默认继承了标准的eslint规范，标准的规范是被声明但是未使用的变量是会报错的，所以这里使用eslint检测时是会报错的，我们运行下npx eslint ./index.js来检测下

但是我们写代码的时候不可能写一部分代码就运行命令检测一下，所以我们需要vscode的eslint插件来帮我们自动做这件事，当写的代码不符合制定的规范时会在代码中自动标识出错误的地方，我们启用vscode的eslint插件来看看

这是我已经将vscode的eslint插件开启，同时代码中的报错信息也提示了出来，而且鼠标移上去会详细的报错信息提示。
当然，我们也可以对标准的eslint规则进行修改，让它符合我们自己的代码规范。我们就以当前的这个no-unused-vars规则来重新定义，加入我们的项目允许存在未使用的变量，则我们可以在.eslintrc.js文件中进行配置

这时我们设置将no-unused-vars规则提示设置为off，则index.js中之前的报错就会消息，再使用eslint检测时也不会报错。

2.prettier

接下来我们安装prettier安装包npm install prettier -D，并配置.prettierrc.js配置文件

// .prettierrc.js
module.exports = {
    printWidth: 80, //一行的字符数，如果超过会进行换行，默认为80
    tabWidth: 2, // 一个 tab 代表几个空格数，默认为 2 个
    useTabs: false, //是否使用 tab 进行缩进，默认为false，表示用空格进行缩减
    singleQuote: true, // 字符串是否使用单引号，默认为 false，使用双引号
    semi: true, // 行尾是否使用分号，默认为true
    trailingComma: 'all', // 是否使用尾逗号
    bracketSpacing: true, // 对象大括号直接是否有空格，默认为 true，效果：{ a: 1 }
  };
  

然后我们启用vscode的prettier插件，接着我们保存代码的时候就会按照这个.perttierrc.js的配置来进行自动格式化了。

这里prettier自动格式化的配置一般会有两种方案：

• 方案一：本地使用pretiter插件来做，这样有个缺点就是如果你的项目是多人协作的项目，你们的代码规范可能不一致，导致每次你拉同事的代码下来保存时都会自动格式化同时得代码
• 方案二：安装prettier依赖包，并配置.prettierrc.js配置文件，这样的好处是团队成员都会用这一份代码规范。形成代码规范化。

eslint-plugin-prettier插件的使用

这个插件的用法是在你写代码时将你的代码先自动格式化后(并没有展示在页面上)和你当前的代码进行对比,如果不一样了就会给出错误提示，用法如下：
首先安装：

npm install eslint-plugin-prettier

安装成功后在.eslintrc.js文件中引入，引入方式如下

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: ['eslint:recommended', 'prettier'],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  // 1.首先在pligins中引入
  plugins: ['prettier'],
  rules: {
  // 2. 在rule始终设置不同时如果展示信息，error是报错，warn是给警告
    'prettier/prettier': 'error',
    // 'no-console': 'warn',
    // 'no-unused-vars': 'warn',
    // quotes: ['error', 'single'],
  },
};

效果如下： 不仅给出了错误提示，还给出了如何修改

代码提交规范

1.信息提交规范

要做到提交信息检测规范我们需要的工具有两个husky(用来管理git hook的工具)， commitlint(检测信息的工具)，其中commitlint需要安装@commitlint/cli和@commitlint/config-conventional两个依赖项。我们先安装一下

npm install @commitlint/cli @commitlint/config-conventional husky -D 

因为我们要检测提交信息，所以我们需要在git中的commit-msg这个钩子里来搞事情，我们执行下这个命令：

// 1.先生成.husky文件
npx husky instal
// 2.执行命令生成commit-msg文件
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

执行完这条命令后我们可以看到生成.husky文件，并且下面存在一个commit-msg文件，这个文件就是git的钩子

commit-msg文件中代码的意思是获取提交的描述信息并校验。接下来来配置commitlint的配置文件commitlint.config.js，这个文件的作用是根据配置中的规则来对提交信息进行校验，配置内容如下：

module.exports = {
  // 继承的规则
  extends: ['@commitlint/config-conventional'],
  // 定义规则类型
  rules: {
    // type 类型定义，表示 git 提交的 type 必须在以下类型范围内
    'type-enum': [
      2,
      'always',
      [
        'feat', // 新功能 feature
        'fix', // 修复 bug
        'docs', // 文档注释
        'style', // 代码格式(不影响代码运行的变动)
        'refactor', // 重构(既不增加新功能，也不是修复bug)
        'perf', // 性能优化
        'test', // 增加测试
        'chore', // 构建过程或辅助工具的变动
        'revert', // 回退
        'build', // 打包
      ],
    ],
    // subject 大小写不做校验
    'subject-case': [0],
  },
};

接下来我们执行提交代码流程，首先提交一个不规范的git commit -m 'test',点击回车我们会看到控制台报错：

• input: 指我们输入的提交信息
• subject: 指输入的主体内容
• type: 指我们输入的type，即配置中的fix, feat等类型

接下来我们再提交一次符合规范的提交信息，我们可以看到成功提交了

1.1 我们在介绍另外一种规范化提交代码的方式： commitizen

commitizen是一种交互式的提交代码的工具，对我们来说使用更简单方便，接下来我们介绍下使用方法 首先我们要全局安装commitizen，否则无法执行插件的命令

npm install commitizen -g

然后在项目中安装cz-customizable

npm install cz-customizable -D

接下来在package.json中添加以下配置：

"config": { 
    "commitizen": { 
        "path": "./node_modules/cz-customizable" 
     }
}

然后我们在根目录下添加.cz-config.js自定义提示文件

module.exports = {
    // 可选类型
    types: [
      { value: 'feat', name: 'feat:     新功能' },
      { value: 'fix', name: 'fix:      修复' },
      { value: 'docs', name: 'docs:     文档变更' },
      { value: 'style', name: 'style:    代码格式(不影响代码运行的变动)' },
      { value: 'refactor', name: 'refactor: 重构(既不是增加feature，也不是修复bug)'},
      { value: 'perf', name: 'perf:     性能优化' },
      { value: 'test', name: 'test:     增加测试' },
      { value: 'chore', name: 'chore:    构建过程或辅助工具的变动' },
      { value: 'revert', name: 'revert:   回退' },
      { value: 'build', name: 'build:    打包' }
    ],
    // 消息步骤
    messages: {
      type: '请选择提交类型:',
      customScope: '请输入修改范围(可选):',
      subject: '请简要描述提交(必填):',
      body: '请输入详细描述(可选):',
      footer: '请输入要关闭的issue(可选):',
      confirmCommit: '确认使用以上信息提交？(y/n/e/h)'
    },
    // 跳过问题
    skipQuestions: ['body', 'footer'],
    // subject文字长度默认是72
    subjectLimit: 72
  }

然后我们git add .之后执行git cz命令

如图所示我们就可以根据提示一步步的填写我们的提交信息了

2. 代码提交规范

2.1 提交前检测代码

接下来介绍下代码提交规范，首先我们先创建git hook中的pre-commit这个钩子文件，执行命令

npx husky add .husky/pre-commit "npm run eslint"

然后在.husky下面生成如下文件代码，这个npm run eslint就是我们在提交代码前执行的脚本

然后我们在package.json中添加如下脚本

并且将.eslintrc.js的配置文件的no-unused-vars改为error，如下

// .eslintrc.js
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: 'eslint:recommended',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  rules: {
    'no-unused-vars': 'error',
  },
};

然后我们执行下提交流程

git add .
git commit -m 'fix: 测试自动检测'

我们看到在提交前会执行npm run eslint校验index.js文件代码，因为校验没通过，所以提交流程被中断了
接下来我们改动下index.js中的代码，使用该变量，然后再提交一遍就成功提交了

const demo1 = '12124124124124124124124124124124124124124124cle4';
console.log(demo1);

2.2 提交前自动修复代码格式

我们添加一个package.json中的脚本npx eslint --fix ./index.js

然后我们关闭vscode的自动保存功能，并且将index.js中的文件格式打乱，在前面加了空格，如下

然后在控制台执行npm run fix代码就会被修复，前面的空格会被自动删除
之后我们将npm run fix这个脚本放到pre-commit里

这样我们就可以实现在提交时自动格式化代码的目的了

2.3 使用lint-staged自动修复代码

上面我们完成了代码的规范化提交，我们在pre-commit检测到我们代码中有不规范的地方，阻止了我们的提交，我们手动修复了不规范代码后，才能成功提交。那么这存在几个问题：

1. 我们只修改了个别的文件，没有必要检测所有的文件代码格式
2. 它只能给我们提示出对应的错误，我们还需要手动的进行代码修改
3. 修改后需要手动git add .

使用lint-staged可以解决这些问题，安装lint-staged：

npm install lint-staged -D

在package.json中配置

  "lint-staged": {
    "./**/*.{js}": [
      "eslint --fix",
      "git add"
    ]
  },

然后我们将pre-commit文件中的命令改为

之后我们再执行2.2步骤中的代码规范格式打乱，然后提交代码，就会发现我们代码被自动格式化了，且提交了