Git — husky + eslint +prettier 实现代码提交检测(angular 11-12)

站长

2023年09月04日 20:40 · 阅读数 9

一.写在前面-前端基础代码限制知识点

1.esLint是什么?

esLint（Linter）是一种静态代码分析工具，用于标记代码中某些编码错误、风格问题和不具结构性（易导致 bug）的代码。简单理解就是一个代码检查器，检查目标代码是否符合语法和规定的风格习惯。 ESLint 是基于 ECMAScript/JavaScript 语法的 Lint，能够：

查出 JavaScript 代码语法问题。
根据配置的规则，标记不符合规范的代码。
自动修复一些结构、风格问题。

ESLint 的特点是灵活、高度自定义，用户可以通过多种方式配置在项目中应用的规则和其它配置，也可以自定义自己的规则，还可以通过插件的方式拓展功能。

eslint和prettier这俩兄弟一个保证js代码质量，一个保证代码美观。

2.husky 是什么？

Modern native Git hooks made easy (轻松创建现代化的原生 git hooks) Husky improves your commits and more 🐶 woof!

最重要的就是：它可以在项目中植入你设定的 git hooks，在 git 提交代码的前后，你预设的 git hooks 可以得到执行，以对代码、文件等进行预设的检查，一旦检查不通过，就可以阻止当前的代码提交，避免了不规范的代码和 git 提交出现在项目中。

二.操作步骤

1.配置ESlint

1.1 安装eslint

npm install eslint@7.32.0 -D

"eslint": "^7.32.0", 这个版本很重要,因为得ts的parse.

1.2 初始化eslint，生成配置文件

npx eslint --init

第一步

Git — husky + eslint +prettier 实现代码提交检测(angular 11-12)

To check syntax only只检查语法
To check syntax and find problems检查语法和查找错误
To check syntax, find problems, and enforce code style检查语法、查找错误并强制代码风格

第二步

Git — husky + eslint +prettier 实现代码提交检测(angular 11-12)

What type of modules does your project use?

项目使用的模版规范

选择第一个

第三步

Git — husky + eslint +prettier 实现代码提交检测(angular 11-12)

Which framework does your project use?

选择你使用的框架

选中第三个

第四步

Does your project use TypeScript?

是否开启TS ,选中是

第五步

Where does your code run?

你的代码跑在什么环境。浏览器与 Node

选择Browser

第六步

What format do you want your config file to be in?

配置文件的类型

选择js

第七步

Git — husky + eslint +prettier 实现代码提交检测(angular 11-12)

现在是否用npm 安装刚刚选择的。

选择yes,自动下载诸如@typescript-eslint的依赖

注意!!!!!!!!!!!!

要是想使用最新@typescript-eslint 必须16以上 ,建议是16.10.0

所以得降低配置

 "@typescript-eslint/eslint-plugin": "^4.0.0",
    "@typescript-eslint/parser": "^4.0.0",

结果

最后一步不管是否选择yes

指令执行完毕都会生成一个文件

Git — husky + eslint +prettier 实现代码提交检测(angular 11-12)

1.3 替换生成的eslint 文件内容

统一标准配置规则

 "rules": {
    // 代码风格
    "camelcase": "error", // 驼峰
    // 减少低级错误
    "for-direction": "error", // 强制 “for” 循环中更新子句的计数器朝着正确的方向移动
    "no-cond-assign": "error", // 禁止条件表达式中出现赋值操作符
    "no-dupe-args": "error", // 禁止 function 定义中出现重名参数
    "no-dupe-keys": "error", // 禁止对象字面量中出现重复的 key
    "no-duplicate-case": "error", // 禁止出现重复的 case 标签
    "no-empty": "error", // 禁止出现空语句块
    "no-sparse-arrays": "error", // 禁用稀疏数组
    "no-unreachable": "error", // 禁止在 return、throw、continue 和 break 语句之后出现不可达代码
    // 提高代码质量
    "array-callback-return": "error", // 强制数组的某些需要返回值的回调函数中有 return 语句。
    "block-scoped-var": "error", // 强制把变量的使用限制在其定义的作用域范围内
    "default-case": "error", // 要求 switch 语句中有 default 分支
    "no-empty-function": "error", // 禁止出现空函数
    "no-fallthrough": "error", // 禁止 case 贯穿。
    "no-labels": "error", // 禁用标签语句
    "no-redeclare": "error", // 禁止多次声明同一变量
    "no-return-assign": ["error", "always"], // 禁止在返回语句中赋值
    "no-sequences": "error", // 不允许使用逗号操作符
    "no-useless-concat": "warn", // 禁止不必要的字符串字面量或模板字面量的连接,
    "no-eval": "error", // 禁用 eval()
   
    "no-use-before-define": ["error", {
        "functions": false
    }], // 禁止在变量定义之前使用它们
    "complexity": ["error", {
        "max": 10
    }], // 程序中允许的最大环路复杂度
    "consistent-return": "error", // 要求 return 语句要么总是指定返回的值，要么不指定
    "max-depth": ["error", 5], // 强制块语句的最大可嵌套深度
    "max-lines-per-function": ["warn", 50], // 强制函数最大行数
    "max-params": ["warn", 4], // 限制函数定义中最大参数个数
    "require-await": "error", // 禁止使用不带 await 表达式的 async 函数
    // es6
    "no-var": "warn", // 要求使用 let 或 const 而不是 var
    "no-duplicate-imports": "warn", // 禁止重复模块导入
    "prefer-destructuring": "warn", // 优先使用数组和对象解构
    "prefer-template": "warn", // 要求使用模板字面量而非字符串连接

    "no-unused-vars": "off",// 禁止出现未使用过的变量
    "@typescript-eslint/no-unused-vars": [
        "error",
        { "argsIgnorePattern": "^_" }
    ]
}

"no-unused-vars": "off",

"@typescript-eslint/no-unused-vars": [

"error",

{ "argsIgnorePattern": "^_" }

]

以上两个配置可以消除ts 与eslint 的冲突

1.4在编辑器安装ESlint插件(不安装影响功能生效)

Git — husky + eslint +prettier 实现代码提交检测(angular 11-12)

备注

可以通过执行命令,单次检测文件代码规范

# ./ 为需要检测的文件路径
npx eslint ./

2.安装prettier

npm i -D   prettier@2.8.0

"prettier": "^2.8.0",

添加 .prettierrc 配置文件详见prettier官方文档

{
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "singleQuote": true,
  "semi": false,
  "bracketSpacing": true,
  "arrowParens": "always",
  "proseWrap": "always"
}

添加 .prettierignore 忽略文件

e2e
**/.git
**/.svn
**/.hg
**/node_modules
**/.git
**/.svn

mac单独配置

创建~/.huskyrc文件，增加对nvm路径的支持：

# ~/.huskyrc
# This loads nvm.sh and sets the correct PATH before running hook
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"

完成以上配置后 commit 时会对暂存区文件自动使用 prettier 格式化

3.配置husky

3.1 安装husky链接

npm install husky@8.0.2 -D

"husky": "^8.0.2",

3.2 使 git hooks 生效

npx husky install

在这里就会创建一个 .husky 的文件

Git — husky + eslint +prettier 实现代码提交检测(angular 11-12)

3.3 在 package.json 中加入prepare脚本，每次在 npm i 安装完依赖后都会执行这个命令,效果跟2.2一致

{
  "scripts": {
     "prepare": "npm install husky@8.0.2 -D & husky install",
  }
}

或者你可以通过指令来添加prepare脚本,同样会达到上面一样的效果

npm pkg set scripts.prepare="husky install"

prepare指令解释

npm 支持 package.json 文件的 scripts 默认命令字段之一:

prepare:

在打包和发布包之前运行

在没有任何参数的本地 npm install 上运行，

安装 git 依赖项时运行。

这是在 preublish 之后运行，但是在 preublishOnly 之前运行.

一般我们使用的就是在npm i 的时候使用.

3.4 添加 pre-commit 钩子

创建一个 hook: husky add [cmd]

file: 指定保存命令的文件，通常是在 .husky 目录下
cmd: 指定 git hooks 的名字，最常使用的是 pre-commit

例如:

npx husky add .husky/pre-commit "npx eslint ./"
# 备注: "npx eslint ./"名字随意

运行完之后会在 .husky 文件下新增 pre-commit 文件

若 pre-commit 文件生成失败，可手动添加

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx eslint ./

4.安装lint-staged

npx eslint ./是全局检查，因为各种原因我们只需要对我们提交的代码进行检查

就需要使用到 lint-staged , 它是一个在git暂存文件上运行linters的工具

如果没有安装依赖先安装 lint-staged

npm install --save-dev lint-staged@5.0.0

"lint-staged": "^5.0.0"

4.1 修改配置

修改pre-commit 脚本文件

Git — husky + eslint +prettier 实现代码提交检测(angular 11-12)

配置package.json "precommit": "lint-staged"

"scripts": {
    "testSslint": "npx eslint --fix ./src/**/*.ts"
    "prepare":"husky install",
    "precommit": "lint-staged",
},

如果要对提交的文件类型进行限制还需要配置 :

"lint-staged": {
    "linters": {
      "src/**/*.ts": [
        "xpn eslint --fix",
        "npx prettier --config .prettierrc --write",
        "git add"
      ],
      "src/**/*.{scss,less,styl,html}": [
        "npx prettier --config .prettierrc --write",
        "git add"
      ],
      "src/**/{!(package)*.json,*.code-snippets,.!(browserslist)*rc}": [
        "npx prettier --config .prettierrc --write--parser json",
        "git add"
      ],
      "package.json": [
        "npx prettier --config .prettierrc --write",
        "git add"
      ],
      "*.md": [
        "npx prettier --config .prettierrc --write",
        "git add"
      ]
    }
  }

5.注意事项

在客户端 hooks 中，developer 可以通过 git comiit -m "commit message" -n (-n 等价于 --no-verify) 来忽略掉 pre-commit hook 的执行！

卸载eslint 时这些不可删除


    "@angular-eslint/builder": "4.3.1",
    "@angular-eslint/eslint-plugin": "4.3.1",
    "@angular-eslint/eslint-plugin-template": "4.3.1",
    "@angular-eslint/schematics": "4.3.1",
    "@angular-eslint/template-parser": "4.3.1",

bug---Cannot find any-observable implementation nor global.Observable.

npm install rxjs-compat