代码提交git时自动格式化并通过ESlint检测

最新推荐文章于 2025-07-01 10:09:42 发布

原创最新推荐文章于 2025-07-01 10:09:42 发布 · 4.3k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #ESLint #代码规范

JavaScript 同时被 2 个专栏收录

2 篇文章

订阅专栏

ESLint

1 篇文章

订阅专栏

本文介绍了如何在git提交时自动使用prettier进行代码格式化，并结合ESLint进行代码检查，确保团队代码风格统一。通过安装依赖、配置prettier与ESLint规则、设置husky和lint-staged，实现git提交前的自动化操作。遵循正确的配置步骤，可以提升代码质量和团队协作效率。

部署运行你感兴趣的模型镜像

前言

在同一个项目中，一般都是几个人合作开发，每个人的代码风格不同，因此提交到git之前，需要统一下格式，因此才有了这篇文章，分享一下自己的配置过程。希望每个小伙伴都能规范自己的代码，如果你认为对你有帮助或者有小伙伴有更好的方法欢迎积极留言！

准备工作

以vue为例，用脚手架生成一个项目，目录结构（这个没有什么影响，已有项目更好）

介绍下我们需要使用到的npm模块

prettier 代码格式化模块，和vscode上安装的Vetur扩展工具使用的格式化相同
husky git的钩子，在git的hook中执行一些命令
lint-staged 对git暂存的文件进行lint检查
eslint js代码检测工具

第1步

安装所需依赖

cnpm install --save-dev prettier husky lint-staged eslint

第2步

2.1 配置prettier的规则

在项目更目录新建一个 .prettierrc 文件，内容为（这里为了方便加了中文注释，实际需要将注释去掉）

{
    // 代码换行长度
    "printWidth": 200,
    // 代码缩进空格数
    "tabWidth": 2,
    // 使用制表符缩进而不是空格缩进
    "useTabs": true,
    // 代码结尾是否加分号
    "semi": false,
    // 是否使用单引号
    "singleQuote": true,
    // 对象大括号内两边是否加空格 { a:0 }
    "bracketSpacing": true,
    // 单个参数的箭头函数不加括号 x => x
    "arrowParens": "avoid"
}

更多配置可以查看prettier官网配置：https://prettier.io/docs/en/options.html

2.2 配置eslint规则

因为没有全局安装eslint，所以在项目中执行(初始化eslint文件)

./node_modules/.bin/eslint --init

这是我的根据eslint的提示选项，具体根据项目不同选择不同

在项目自动在根目录新增加了一个.eslintrc.json文件，在rules选项中校验规则：

"rules":{
    // 禁止对象字面量中出现重复的 key
    "no-dupe-keys": "error",
    // 禁止出现重复的 case 标签
    "no-duplicate-case": "error",
    // 禁止出现空语句块,允许catch出现空语句
    "no-empty": ["error", {"allowEmptyCatch": true}],
    // 禁止对 catch 子句的参数重新赋值
    "no-ex-assign":"error",
    // 禁止不必要的布尔转换
    "no-extra-boolean-cast": "error",
    // 禁止不必要的分号
    "no-extra-semi": "error",
    // 强制所有控制语句使用一致的括号风格
    "curly": "error"
    
}

更多校验规则可以查看eslint官网配置：https://cn.eslint.org/docs/rules/

第3步

在package.json中增加husky和lint-staged的配置

"husky":{
    "hooks": {
        "pre-commit": "lint-staged"
    }
},
"lint-staged": {
    "src/**": [
        "prettier --config .prettierrc --write",
        "eslint --fix",
        "git add"
    ]
}

效果图：