Git提交代码格式化,以及代码检测入门指南(eslint+husky+lint-staged+prettier)

235 阅读3分钟

插件讲解

eslint

eslint:是一个代码检测工具,用于检测代码中潜在的问题和错误,作用用于提高代码质量和规范

//1.安装eslint
npm run eslint
//2.快速构建eslint配置文件
npm init @eslint/config
//3.配置文件
执行完成后,自动生成 eslint 配置文件.eslintrc.json 可在 .eslintrc.js 中配置 rules 定义校验

// rule示例
 rules: {
         indent: ['error', 4], // 用于指定代码缩进的方式,这里配置为使用四个空格进行缩进。
        'linebreak-style': [0, 'error', 'windows'], // 用于指定换行符的风格,这里配置为使用 Windows 风格的换行符(\r\n)。
        quotes: ['error', 'single'], // 用于指定字符串的引号风格,这里配置为使用单引号作为字符串的引号。
        semi: ['error', 'always'], //用于指定是否需要在语句末尾添加分号,这里配置为必须始终添加分号。
        '@typescript-eslint/no-explicit-any': ['off'] // 用于配置 TypeScript 中的 "any" 类型的使用规则,这里配置为关闭禁止显式使用 "any" 类型的检查。
    }

husky

husky:一个Git钩子(Git Hooks)工具,可以在Git事件发生时执行脚本,进行代码格式化、测试等操作。

常见的的husky钩子: pre-commit:在执行Git commit 命令之前触发,用于在提交代码前进行代码检测、格式化、测试等操作。 commit-msg:在提交消息(commit message)被创建后,但提交操作尚未完成之前出发,用于校验提交消息的格式和内容。 pre-push:在执行Git push 命令之前出发,用于在推送代码前进行额外检查、测试等操作。

//1.安装husky----v8版本
npm install husky --save-dev

//2.启用钩子
方式1:
  npm pkg set scripts.prepare="husky install"
方式2:
  去根目录下的package.json 文件中的"scripts"代码块中添加 
"scripts": {
    "prepare": "husky install"
  }

//3.执行husky初始化操作
npm run prepare

//4.添加钩子脚本
npx husky add .husky/pre-commit "npx lint-staged"
//在Huksy v9版本的操作可以查看github上的husky文档

lint-staged

lint-staged:可以在Git暂存(staged)区域中的文件上运行脚本,通常用于在提交前对代码进行格式化、静态检查等操作。

//1.安装lint-staged
npm install lint-staged --save-dev

//2.配置文件
去根目录下的"package.json"文件中添加
 "lint-staged": {
    // src/**/*.{js,jsx,ts,tsx} 校验暂存区、指定目录下的文件类型,可以根据自己的项目需求来配置
    // 校验命令,执行 eslint 、prettier 
    "src/**/*.{js,jsx,ts,tsx}": [
      "prettier --write",
      "eslint --fix"
    ]
  }

prettier

prettier:一个代码格式化工具。和husky、lint-staged、eslint搭配使用,可以在提交代码之前自动化代码、校验代码

//1.安装prettier
npm run prettier --save-dev

//2.建立配置文件
在根目录下建立  .prettierrc.js 文件,定义想要的代码样式,例如:
module.exports = {
    semi: true,//强制在语句末尾使用分号。
    trailingComma: 'none',//不允许在多行结构的最后一个元素或属性后添加逗号。
    singleQuote: true,//使用单引号而不是双引号来定义字符串。
    printWidth: 120,//指定每行代码的最大字符宽度,超过这个宽度的代码将被换行
    tabWidth: 4//指定一个制表符(Tab)等于多少个空格。
};
//更多可以参考prettier文档

//通过上文lint-staged配置的参数,在进行Git提交操作的时候,lint-staged将自动运行prettier进行格式化符合规则的文件

最后应用成功

1708248170972.jpg

遇见的问题

husky未生效