代码规范化

Posted on Edited on

Eslint 安装

  • 安装 npm install eslint --save-dev
  • 使用 npx eslint --init 初始化一个配置文件
  • 执行 npm eslint test.js --fix –fix 会自动修正代码风格问题，而一些问题代码就需要手动修正
  • 当代码有语法问题时 Eslint 无法检查问题代码和代码风格，所有要先手动解决语法问题

ESLint 配置文件解析

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
module.exports = {
  env: {
    // 标记代码运行环境
    browser: true,
    es2020: true,
  },
  extends: [
    // 继承共享配置
    "standard",
  ],
  parser: "@typescript-eslint/parser", // 语法解析器
  parserOptions: {
    // 设置语法解析器，检查语法，而不是代表某个成员是否可以，成员通过环境定义
    ecmaVersion: 11,
  },
  rules: {
    // 校验规则的开启、关闭 off：关闭 warning：结果 error：警告
    "no-alert": "error",
  },
  globals: {
    // 额外声明代码中可以使用的全局成员
    jQuery: "readonly", // 代码中可以使用jQuery而且不会报错
  },
};

ESLint 配置注释

  • 在编码时有时需要违反 eslint 规则，eslint-disable-line 可以通过注释临时禁用校验规则
  • 当一行有多个问题时可以跟上具体禁用哪个规则
  • 具体配置注释介绍文档
1
2
3
4
// eslint-disable-line no-template-curly-in-string
const str = "${name} is a coder";

console.log(str);

ESLint 结合自动化工具

  • gulp
    • 安装 gulp-eslint
    • 创建 eslint 配置文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// plugins 自动加载插件模块
const script = () => {
  return (
    src("src/assets/script/*.js", { base: "src" })
      .pipe(plugins.eslint()) // 默认只会检查代码的问题，并不会根据检查结果做出反馈
      // 控制台打印错误信息
      .pipe(plugins.eslint.format())
      // eslint检查错误后终止任务
      .pipe(plugins.eslint.failAfterError())
      .pipe(plugins.babel({ presets: ["@babel/preset-env"] }))
      .pipe(dest("temp"))
      .pipe(bs.reload({ stream: true }))
  );
};

ESLint 结合 Webpack

  • 通过 loader 机制完成校验
  • 安装 eslint-loader
  • 初始化配置文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "production",
  entry: "./src/main.js",
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          "babel-loader",
          // 'eslint-loader'
        ],
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: "eslint-loader",
        enfore: "pre",
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "src/index.html",
    }),
  ],
};
  • 在 react 项目中会报 React 未使用的问题，和 App is defined but never used no-unused-vars，可以使用插件
  • 安装插件 npm install eslint-plugin-react
  • 在配置文件的 plugins 属性配置
1
2
3
4
5
6
7
8
9
10
11
12
modul.exports = {
  rules: {
    "react/jsx-uses-react": 2, // 开启报错，2 代替 error
    "react/jsx-uses-vars": 2,
  },
  extends: [
    // 'plugin:react/recommended' // 方法二
  ],
  plugins: [
    "react", // 模块名会去除eslint-plugin
  ],
};

Stylelint 认识

  • 安装 npm install stylelint -D
  • 添加配置文件 .stylelintrc.js
  • 共享配置名称要完整的模块名称
  • stylelint 内部没有提供任何可用的共享配置，可以自定义安装
  • npm install stylelint-config-standard -D 对 css 代码检查
  • npm install stylelint-config-sass-guidelines -D 对 sass 代码检查
1
2
3
4
module.exports = {
  // 共享配置
  extends: ["stylelint-config-standard", "stylelint-config-sass-guidelines"],
};

Prettier 的使用—代码格式化工具

  • 安装 npm install prettier -D
  • npm prettier style.css --write 自动格式化文件，–write 把格式化的代码覆盖源代码

ESLint 结合 Git Hooks

  • 安装依赖 npm install husky -D
  • 在 package.json 文件添加一个 husky 字段，在 husky 添加一个 hooks 属性，在 hooks 属性添加一个 pre-commit 钩子属性，值为 npm run xxxx，在提交 commit 前就会先执行 scripts 下的对应命令，比如执行 eslint，如果不符合规范就不能直接提交到代码仓库中
1
2
3
4
5
6
7
8
9
10
11
12
// package.json
{
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "link": "eslint ./index.js"
  },
  "husky": {
    "hooks": {
      "pre-commit": "npm run link"
    }
  }
}
  • 安装 npm install lint-staged -D 在 commit 前执行 eslint 后，再进行其他操作，如格式化代码
  • 安装代码格式化工具 npm install prettier -D
  • 在 package.json 中添加一个 lint-staged 字段
  • 一般 husky 和 lint-staged 配合使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "link": "eslint ./index.js",
    "precommit": "lint-staged"
  },
  "husky": {
    "hooks": {
      "pre-commit": "npm run precommit"
    }
  },
  "lint-staged": {
    "*.js": ["prettier --write", "eslint --fix", "git add"]
  }
}

Git 提交规范—commitlint

  • 文档：https://commitlint.js.org/#/
  • 安装插件 yarn add husky @commitlint/cli @commitlint/config-conventional --dev
  • husky 是一个 Git Hook 工具
  • 项目根目录创建配置文件 commitlint.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
module.exports = {
  extends: ["@commitlint/config-conventional"],
  rules: {
    "subject-case": [0, "never"],
    "type-enum": [
      2, // 代表必须输入
      "always",
      [
        "docs", // Adds or alters documentation. 仅仅修改了文档，比如README, CHANGELOG, CONTRIBUTE等等
        "chore", // Other changes that don't modify src or test files. 改变构建流程、或者增加依赖库、工具等
        "feat", // Adds a new feature. 新增feature
        "fix", // Solves a bug. 修复bug
        "merge", // Merge branch ? of ?.
        "perf", // Improves performance. 优化相关，比如提升性能、体验
        "refactor", // Rewrites code without feature, performance or bug changes. 代码重构，没有加新功能或者修复bug
        "revert", // Reverts a previous commit. 回滚到上一个版本
        "style", // Improves formatting, white-space. 仅仅修改了空格、格式缩进、都好等等，不改变代码逻辑
        "test", // Adds or modifies tests. 测试用例，包括单元测试、集成测试等
      ],
    ],
  },
};
  • 配置 package.json 文件，添加一下内容，在执行 git commit -m "commit message" 命令的时候，将会对 commit message 校验，是否符合 rules
1
2
3
4
5
"husky": {
  "hooks": {
    "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
  }
},