在项目中加入 husky + lint-staged + eslint，代码检测格式化

背景

由于日常工作的多人协作中，会因为个人代码编写风格导致代码在不同人电脑上，会有异常代码格式的提示，为了解决这个小问题，我们可以使用 husky + lint-staged 来对代码进行一定程度上的格式化，使格式风格统一，方便查看

步骤

先安装相关插件 pnpm add husky lint-staged --save-dev

根据 husky 的文档，输入 npx husky init ，然后会在目录下生成 .husky 文件夹，打开 pre-commit 文件，可以在内输入 npx lint-staged。再 package.json 会生成一个脚本然后，我们先运行一下 pnpm prepare （hucky文档）

说到这个 lint-staged，我们可以在 package.json 创建一个字段，内容如下

// package.json
{..."lint-staged": {"*.js": "eslint --fix", // 比如我们要对提交前的所有 js 文件进行语法检查以及修复}
}

日常工作中 eslint 是js必备的代码语法检测、修复工具。查阅文档，eslint --fix 可以对结果进行修复

安装插件 pnpm add eslint --save-dev，根据 eslint 文档在项目根目录下创建 eslint.config.js，

然后，再安装 @eslint/js 预定义配置，同样 pnpm add eslint --save-dev，示例配置文件如下：

import js from '@eslint/js'export default [js.configs.recommended,{rules: {'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // 当生产环境时，不允许console'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // 当生产环境时，不允许debugger}}
];

此时在项目中，创建 src 文件夹，再创建测试文件 index.js，内容如下：

function test(){let a= 1;let b=2;;;const c = 3console.log(a+b);const df= 1return a*b
}test ();

将此项目和gitlab的仓库关联好之后，提交代码就会自动检测，在终端输入 git add . && git commit -m "test msg"，可以看到，终端有提示检查不通过：

报错的内容，第一条和第三条，是 c 和 df 定义了但未使用，第二个是提示console未定义，这个报错就需要在 eslint.config.js 里面定义一下全局对象，修改为如下：

import js from '@eslint/js'export default [js.configs.recommended,{languageOptions: {globals: {console: 'readonly'}},rules: {'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // 当生产环境时，不允许console'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // 当生产环境时，不允许debugger// 'no-multi-spaces': ['error', { ignoreEOLComments: true }], // 不允许多个空格}}
];

再次执行提交操作，就只剩下这两条报错：

在目前，我们能实现的就是对代码语法检测，但未做到对代码的格式化。所以我们用到 prettier，来做代码格式化。但是我们这里可以不使用 prettier 这个依赖包，而是可以安装 eslint 的插件 eslint-plugin-prettier，根据文档，安装 eslint-plugin-prettier eslint-config-prettier

pnpm add eslint-plugin-prettier eslint-config-prettier --save-dev

修改eslint.config.js：

import js from '@eslint/js'
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'export default [js.configs.recommended,eslintPluginPrettierRecommended,{    languageOptions: {globals: {console: 'readonly'}},rules: {'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // 当生产环境时，不允许console'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off' // 当生产环境时，不允许debugger}}
]

再次保存，然后将之前的代码检查报错行，直接注释，走 git 提交，

可以看到提示正常：