1. 创建一个项目

我们先从 gitee 上随便创建一个项目。 (点击项目可以看到本文操作的源码)

2. 项目初始化

  1. yarn init -y

3. 随便写点代码

一步步完善前端项目Lint 规则配置 - 图1
好像什么都没有发生？是的，因为我们什么都没有配。

4. 配置 ESLint

4.1 在 VScode 中安装 ESLint 插件

一步步完善前端项目Lint 规则配置 - 图2
可以看到，安装好插件后其实代码仍然不会有错误提示，因为根据插件的文档可以看到，它需要我们在项目或者全局中安装 eslint 依赖，并进行一些配置。

4.2 安装依赖

  1. yarn add babel-eslint eslint eslint-config-booheefe eslint-plugin-react --dev

4.3 配置 .eslintrc

  1. ./node_modules/.bin/eslint --init

接着会生成 .eslintrc 文件。

  1. module.exports = {
  2.   env: {
  3.     browser: true,
  4.     es2021: true,
  5.   },
  6.   extends: [
  7.     'plugin:react/recommended',
  8.     'airbnb',
  9.   ],
  10.   parserOptions: {
  11.     ecmaFeatures: {
  12.       jsx: true,
  13.     },
  14.     ecmaVersion: 12,
  15.     sourceType: 'module',
  16.   },
  17.   plugins: [
  18.     'react',
  19.   ],
  20.   rules: {
  21.   },
  22. };
  • env：表示指定想启用的环境。
  • extends：指定额外配置的选项，如 [‘airbnb’] 表示使用 Airbnb 的 Linting 规则。
  • plugins：设置规则插件。
  • parser：默认情况下 ESLint 使用 Espree 进行解析。
  • parserOptions：如果将默认解析器更改，需要制定 parserOptions。
  • rules：定义拓展并通过插件添加的所有规则。

现在可以看到我们的 eslint 规则已经生效，接着我们去 setting.json 中开启自动修复即可使用。
一步步完善前端项目Lint 规则配置 - 图3

4.4 配置 setting.json

一步步完善前端项目Lint 规则配置 - 图4
到此便完成 ESLint 的配置，开始享用吧~

5. 配置 StyleLint

5.1 安装 stylelint 包

  1. yarn add stylelint stylelint-config-booheefe -D

5.2 配置 .stylelintrc 文件

  1. {
  2.     "extends": "stylelint-config-booheefe"
  3. }

5.3 使用

在 package.json 中创建命令 。

  1. "scripts": {
  2.     "lintcss": "stylelint '*.css' --fix"
  3.   }

运行命令即可看到效果.

  • 运行前：

一步步完善前端项目Lint 规则配置 - 图5

  • 运行后：

一步步完善前端项目Lint 规则配置 - 图6

6. 使用 Husky 实现 git hooks 注入与脚本配置执行。

6.1 安装相应的包

  1. yarn add husky@1.1.4 -D

注意，husky 最新版本已经升级到 6.0 ，具体用法也有所改变，我安装的是较老的版本了

6.2 配置 .huskyrc

  1. "husky": {
  2.   "hooks": {
  3.     // "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
  4.     // "pre-commit": "lint-staged"
  5.   }
  6. }

6.3 使用 commitlint 规范提交信息

  • 安装 commintlint 

    1. yarn add  @commitlint/config-conventional @commitlint/cli -D

  • 配置 .commitlint.js 

    1. module.exports = {
    2. extends: ['@commitlint/config-conventional']
    3. };

  • 在 .huskyrc 中配置 

    1. {
    2. "hooks": {
    3.    "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
    4.    // "pre-commit": "lint-staged"
    5. }
    6. }

    6.4 使用 lint-staged 来进行 lint 过滤校验

一个仅仅过滤出Git代码暂存区文件(被committed的文件)的工具，只对暂存区的代码使用 Lint 规则。

  • 安装 

    1. yarn add  lint-staged -D

  • 配置 

    1. {
    2. "*.js": ["eslint --fix", "git add"],
    3. "*.css": ["stylelint --fix", "git add"] 
    4. }

  • 在 husky 中配置相应的钩子后即可使用 

    1. {
    2. "hooks": {
    3.    "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
    4.    "pre-commit": "lint-staged"
    5. }
    6. }

7. 参考文献