构建超溜的代码检查工作流(editconfig eslint stylelint husky lint-staged prettier)

keywords: editconfig eslint husky lint-staged prettier

TIP

我一般的习惯是

prebuild钩子每次build生产文件时lint
precommit 检测或者 pre-push 每次push代码时 lint (husky or pre-push)

注册钩子想在git在commit 或者push触发？？ --- husky 或者pre-commit pre-push
不想lint全部想要渐进式的加入lint ？？ ---lint-staged
自动修复代码？？ --- ESlint的fix（只在发现问题的地方进行 fix） + prettier 格式化代码
统一最基本的代码规范？？ .editconfig .editconfig需要配合相应的编辑器插件

###代码示例

TIP

配置文件类型eslintrc.* 支持

JavaScript
JSON
YAML
或者在package.json里面的eslintConfig字段里面设置

.eslintrc.json

{
  "scripts": {
    "precommit": "lint-staged",  //注册在git pre-commit的钩子调起 lint-staged
    "prettier": "prettier --write \"./**/*.{js,jsx,css,less,sass,scss,md,json}\"",
    "eslint": "eslint ",
    "eslint:fix": "eslint --fix",
    "stylelint": "stylelint \"./**/*.{css,less,sass,scss}\"",  //假如你用stylelint的话
    "stylelint:fix": "stylelint \"./**/*.{css,less,sass,scss}\"", 
,
    "lint-staged": "lint-staged"
,
  },
  "lint-staged": {  //渐进式的加入lint
    "src/**/*.{js,jsx}": [
        "prettier --tab-width 4 --write", //格式化代码
        "eslint --fix",  //修复
        "git add"
    ]
  }
}

 //需要安装pre-push包
  "pre-push": [
    "eslint"
  ],

.eslintigonre 忽略文件

/build/
/config/
/dist/
/*.js

初始化配置

node_modules/.bin/eslint --init
// 如果全局安装了 可以直接 eslint --init

可以根据里面的具体配置来配置使用大厂的popular style guide或者是自己DIY

配置方法

JavaScript 注释把配置信息直接嵌入到一个代码源文件中
通过配置文件 .eslintrc.** 文件 .eslintignore 或者 package.json 的eslintConfig字段或者在命令行中

配置文件示例

.eslintrc.json

{
    "parserOptions": {
        "ecmaVersion": 6, //启动 ECMAScript6
        "sourceType": "module",  //"script" (默认) 或 "module"（如果你的代码是 ECMAScript 模块)。
        "ecmaFeatures": {
            "jsx": true  // 开启jsx
        }
    },
    "rules": {
        "semi": 2
    },
    "env": {  //启用想要的环境的环境
        "browser": true,
        "node": true
    },
    "plugins": [  //插件
        "eslint-plugin-react"
    ]
}

react使用特殊的jsx 需要eslint-plugin-react
要额外支持新的 ES6 全局变量，使用 { "env":{ "es6": true } }(这个设置会同时自动启用 ES6 语法支持)。

Rule

ESLint 附带有大量的规则使用注释或配置文件修改你项目中要使用的规则。

"off" 或 0 - 关闭规则
"warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
"error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)

在注释中使用

/* eslint eqeqeq: "off", curly: "error" */
在这个例子里，eqeqeq 规则被关闭，curly 规则被打开，定义为错误级别。你也可以使用对应的数字定义规则严重程度：
/* eslint eqeqeq: 0, curly: 2 */

配置文件中使用

{
    "rules": {
        "eqeqeq": "off",
        "curly": "error",
        "quotes": ["error", "double"]
    }
}

可以在文件中临时启用或关闭警告

/* eslint-disable */

alert('foo');

/* eslint-enable */

对某一条规则警告

/* eslint-disable no-alert, no-console */

alert('foo');
console.log('bar');

/* eslint-enable no-alert, no-console */

放在文件顶部对整个文件禁用

/* eslint-disable */

alert('foo');

对某行禁用警告

alert('foo'); // eslint-disable-line

// eslint-disable-next-line
alert('foo');

/* eslint-disable-next-line */
alert('foo');

alert('foo'); /* eslint-disable-line */

对某行禁用多条规则

alert('foo'); // eslint-disable-line no-alert, quotes, semi

// eslint-disable-next-line no-alert, quotes, semi
alert('foo');

alert('foo'); /* eslint-disable-line no-alert, quotes, semi */

/* eslint-disable-next-line no-alert, quotes, semi */
alert('foo');