eslint workflow在專案中的應用

摘要： 工程化的專案中code review 不可或缺，但linter 檢查器更能發現並解決潛在的語法錯誤，不合理的語法使用，並能保持程式碼風格一致。下面的workflow解決了eslint在部署階段的自動檢測與修復 install yarn add eslin...

工程化的專案中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"]
}
複製程式碼