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