前言

项目做迁移,需要一个全新的环境,刚好是时候祭出完善的格式管理来对代码做校验了。

配置过程

eslint

lint 代码的主要工具,所以的一切都是基于此包

.eslintrc 文件

{
    "env": {
        "browser": true,
        "es6": true,
        "amd": true
    },
    "extends": ["eslint:recommended", "prettier"],
    "parser": "babel-eslint",
    "parserOptions": {
        "ecmaFeatures": {
            "experimentalObjectRestSpread": true,
            "jsx": true
        },
        "sourceType": "module"
    },
    "plugins": ["react"],
    "rules": {
        "no-prototype-builtins": 0,
        "prefer-promise-reject-errors": 0,
        "no-async-promise-executor": 0,
        "no-misleading-character-class": 0,
        "no-useless-catch": 0,
        "no-console": "error",
        "no-unused-vars": 0,
        "react/jsx-uses-react": 1,
        "react/jsx-uses-vars": 1
    }
}

基础配置

npm i -D eslint  # 安装eslint
npm i -D babel-eslint # 一个对 Babel 解析器的包装,使其能够与 ESLint 兼容。
npm i -D @typescript-eslint/parser # 将 TypeScript 转换成与 estree 兼容的形式,以便在 ESLint 中使用

扩展配置

npm i -D eslint-config-airbnb eslint-config-prettier eslint-config-standard
  • eslint-config-airbnb: 提供了所有的 Airbnb 的 ESLint 配置,作为一种扩展的共享配置,你是可以修改覆盖掉某些不需要的配置的,该工具包包含了 react 的相关 Eslint 规则(eslint-plugin-react 与 eslint-plugin-jsx-a11y),所以安装此依赖包的时候还需要安装刚才提及的两个插件
  • eslint-config-prettier: 将会禁用掉所有那些非必须或者和 prettier 冲突的规则。这让您可以使用您最喜欢的 shareable 配置,而不让它的风格选择在使用 Prettier 时碍事。请注意该配置只是将规则 off 掉,所以它只有在和别的配置一起使用的时候才有意义。
  • eslint-config-standard: 是一个标准配置,旨在让所有开发者不需要维护 .eslintrc, .jshintrc, or .jscsrc

插件配置

npm i -D eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react
  • eslint-plugin-import: 该插件想要支持对 ES2015+ (ES6+) import/export 语法的校验, 并防止一些文件路径拼错或者是导入名称错误的情况
  • eslint-plugin-jsx-a11y: 该依赖包专注于检查 JSX 元素的可访问性。
  • eslint-plugin-prettier: 该插件辅助 Eslint 可以平滑地与 Prettier 一起协作,并将 Prettier 的解析作为 Eslint 的一部分,在最后的输出可以给出修改意见。这样当 Prettier 格式化代码的时候,依然能够遵循我们的 Eslint 规则。如果你禁用掉了所有和代码格式化相关的 Eslint 规则的话,该插件可以更好得工作。所以你可以使用 eslint-config-prettier 禁用掉所有的格式化相关的规则(如果其他有效的 Eslint 规则与 prettier 在代码如何格式化的问题上不一致的时候,报错是在所难免的了)
  • eslint-plugin-react: React 专用的校验规则插件

prettier

一个代码格式化工具,相比于 ESLint 中的代码格式规则,它提供了更少的选项,但是却更加专业。

.prettierrc.js 文件

module.exports = {
    printWidth: 100, // 一行最大多少字符
    tabWidth: 4, // tab占用的字符数
    useTabs: false, // 是否使用tab代替空格
    semi: true, // 是否每句后都加分号
    singleQuote: true, // 是否使用单引号
    bracketSpacing: true, // { key: value } 格式
    arrowParens: 'avoid', // 箭头函数参数是否使用 ()
    quoteProps: 'as-needed', // 按需添加引号
    trailingComma: 'none' // 数组尾逗号
};

几个工具之间的关系是:prettier 是最基础的,然后你需要用 eslint-config-prettier 去禁用掉所有和 prettier 冲突的规则,这样才可以使用 eslint-plugin-prettier 去以符合 eslint 规则的方式格式化代码并提示对应的修改建议。

使用husky + lint-staged

在提交前对代码进行校验

npm i -D husky lint-staged
  • husky: 能够帮你阻挡住不好的代码提交和推送。是一个 git 钩子工具,我们这里主要用 pre-commit 钩子。通俗点讲就是 husky 可以在你 commit 之前帮你做一些事情。
  • lint-staged: 在你提交的文件中,执行自定义的指令。自定义指令可以是你 eslint 相关,也可以是其他命令

在 package.json 中添加以下配置

"husky": {
    "hooks": {
        "pre-commit": "lint-staged"
    }
},
"lint-staged": {
    "*.js": [
        "prettier --write"
    ],
    "*.ts?(x)": [
        "eslint",
        "prettier --parser=typescript --write"
    ]
},

使用 commitlint

使用 commitlint 对commit-msg进行校验

npm i -D @commitlint/cli @commitlint/config-conventional

配置 commitlint.config.js

/* eslint-disable no-undef */
module.exports = {
    extends: ['@commitlint/config-conventional']
};
// build:主要目的是修改项目构建系统(例如 glup,webpack,rollup 的配置等)的提交
// ci:主要目的是修改项目继续集成流程(例如 Travis,Jenkins,GitLab CI,Circle等)的提交
// docs:文档更新
// feat:新增功能
// merge:分支合并 Merge branch ? of ?
// fix:bug 修复
// perf:性能, 体验优化
// refactor:重构代码(既没有新增功能,也没有修复 bug)
// style:不影响程序逻辑的代码修改(修改空白字符,格式缩进,补全缺失的分号等,没有改变代码逻辑)
// test:新增测试用例或是更新现有测试
// revert:回滚某个更早之前的提交
// chore:不属于以上类型的其他类型

在 package.json 中添加以下配置

"husky": {
    "hooks": {
        "pre-commit": "lint-staged",
        "commit-msg": "commitlint -e $HUSKY_GIT_PARAMS"
    }
},

参考文档

腾讯云开发者手册 eslint

通过ESLint和Prettier统一团队代码规范.

使用 husky、commitlint 和 lint-staged 来构建你的前端工作流(vue、react、dva)

代码风格统一:使用husky, prettier, eslint在代码提交时自动格式化,并检查代码

Last modification:January 14th, 2021 at 04:44 pm
如果觉得我的文章对你有用,请随意赞赏