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

news2024/9/21 22:52:02

背景

由于日常工作的多人协作中，会因为个人代码编写风格导致代码在不同人电脑上，会有异常代码格式的提示，为了解决这个小问题，我们可以使用 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 = 3
    console.log(a+
        b);
    const df= 1
    return 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 提交，

可以看到提示正常：