关于javascript:使用eslintprettierhuskylintstagedcommitlintstylelint规范项目格式

前言

我的项目做迁徙，须要一个全新的环境，刚好是时候祭出欠缺的格局治理来对代码做校验了。

配置过程

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 在代码提交时主动格式化，并查看代码。