使用eslint+prettier+husky+lint-staged+commitlint+stylelint规范项目格式

Posted 2021-10-11 az_land

前言

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

配置过程

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"
    }
},

使用stylelint

使用stylelint 对所有的css书写顺序及格式进行校验

npm i stylelint stylelint-config-recess-order stylelint-config-standard stylelint-order stylelint-scss -D

配置.stylelintrc.js

module.exports = {
    extends: [\'stylelint-config-standard\', \'stylelint-config-recess-order\'],
    rules: {
        \'at-rule-no-unknown\': [
            true,
            {
                ignoreAtRules: [\'mixin\', \'extend\', \'content\', \'include\', \'function\', \'return\']
            }
        ],
        indentation: 4,
        \'no-descending-specificity\': null, // 禁止特异性较低的选择器在特异性较高的选择器之后重写
        \'font-family-no-missing-generic-family-keyword\': null,
        \'function-name-case\': null
    }
};

配置 .stylelintignore 文件(默认不格式化node_modules)

*.min.css
 
# 其他类型文件
*.js
*.jpg
*.woff
 
# 测试和打包目录
/test/
/dist/

在package.json添加如下配置

"lint-staged": {
    "*.js": [
        "prettier --write"
    ],
    "*.ts?(x)": [
        "eslint",
        "prettier --parser=typescript --write"
    ],
    "*.{html,css,scss}": [
        "stylelint --fix",
        "prettier --write"
    ]
}

vscode 添加插件 stylelint-plus，在settings.json中添加如下配置

"stylelint.autoFixOnSave": true

参考文档

腾讯云开发者手册 eslint

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

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

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