eslint workflow在项目中的应用

811 阅读1分钟

工程化的项目中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设计,任务流的配置形式,类似于&&作用 类似于下面的逻辑if [$file in src/**/*.js]; do eslint --fix && git add; fi

// .lintstagedrc
{
  "src/**/*.{js,vue}": ["eslint --fix", "git add"],
  "src/*.{js,vue}": ["eslint --fix", "git add"]
}

Usage

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

workflow