eslint workflow在项目中的应用

工程化的项目中code review不可或缺，但linter检查器更能发现并解决潜在的语法错误，不合理的语法使用，并能保持代码风格一致。下面的workflow解决了eslint在部署阶段的自动检测与修复

install

yarn add eslint yorkie lint-staged -D

configure

eslint

// .eslintrc.js
module.exports = {
  root: true,
  parser: 'babel-eslint',
  parserOptions: {
    sourceType: 'module'
  },
  env: {
    browser: true
  },
  globals: {
    android: false
  },
  // ...
}

复制代码

yorkie

解决git hooks的生成，hooks位于/.git/hooks/，下面的pre-commit的则为/.git/hooks/pre-commit，为bash脚本

// package.json
{
	"gitHooks": {
    	"pre-commit": "lint-staged"
  	}
}
复制代码

lint-staged

专为linter设计，任务流的配置形式，相似于&&做用

// .lintstagedrc
{
   // if [$file in src/**/*.js]; do eslint --fix && git add; fi
  "src/**/*.js": ["eslint --fix", "git add"],
  "src/*.js": ["eslint --fix", "git add"],
  "src/**/*.vue": ["eslint --fix", "git add"],
  "src/*.vue": ["eslint --fix", "git add"]
}
复制代码

Usage

git commit -m $msg时，触发pre-commit钩子，执行lint-staged相关配置，即.lintstagedrc里的，主要自动修复而后添加进暂存区，eslint --fix && git add

workflow