概念:

• husky,暴露出git的hook鉤子,在這些鉤子執(zhí)行一些命令,
• lint-staged,只在git的暫存區(qū)有修改的文件進(jìn)行l(wèi)int操作,執(zhí)行一些校驗?zāi)_本
• eslint,prettier,styelint有npm包還有對應(yīng)的scode插件,其中npm包是用于執(zhí)行那些諸如入eslint --fix "src/**/*.{js,jsx,…}"的腳本命令,所需要的包,每次修改要都要執(zhí)行一次該命令才會格式化代碼,而對應(yīng)的vscode插件則可以通過vscode的工作區(qū)或者用戶去設(shè)置settings.json來配置保存代碼時執(zhí)行校驗,還可以通過.editorconfig來統(tǒng)一編輯器的代碼風(fēng)格.
• eslint 代碼質(zhì)量檢查,會與prettier配置沖突,通過extends配置eslint-config-prettier,eslint-plugin-prettier來覆蓋掉與prettier沖突的規(guī)則
• prettier,代碼美化
• stylelint,格式化css,還有scss等,會與prettier沖突,通過stylelint-config-prettier配置解決prettier沖突
• commitlint,配置提交信息規(guī)范

相關(guān)的包:

husky

• yarn add husky -D

npm set-script prepare "husky install"
npm run prepare
// -c指定了lint-staged的配置文件
npx husky add .husky/pre-commit "npx lint-staged -c ./.husky/lintstagedrc.js"
npx husky add .husky/commit-msg "npx commitlint --edit $1"

lint-staged

配置文件lintstagedrc.js

在這里插入代碼片module.exports = {"**/*.{js,jsx}": ["eslint --fix"],"*.{scss,less,styl,html}": ["stylelint --fix", "prettier --write"],"*.vue": ["prettier --write", "eslint --fix", "stylelint --fix"]
}

eslint

• eslint, eslint-config-prettier, eslint-plugin-prettier(默認(rèn)調(diào)用prettier的配置文件)

module.exports = {extends:[...,'eslint-config-prettier','plugin:prettier/recommended'],//這里直接使用了插件eslint-plugin-prettier的配置,plugin:開頭,那么就可以不用在plugins字段聲明prettier插件了}

prettier

• prettier

module.exports = {printWidth: 100, // 打印寬度tabWidth: 2, // tab 寬度useTabs: false, // 使用tabsemi: false, // 分號vueIndentScriptAndStyle: false, // vue indent <script/>  <style/>singleQuote: false, // 單引號quoteProps: "as-needed", // 對象key 引號bracketSpacing: true, // 導(dǎo)入對象和{}之間加空格trailingComma: "none", // 尾隨逗號// jsxBracketSameLine: true, // 尖括號和結(jié)尾同一行 DeprecatedbracketSameLine: true, // 尖括號和結(jié)尾同一行jsxSingleQuote: false, // jsx 中使用單引號arrowParens: "avoid", //  x=>x , (x)=>insertPragma: false, // insert <!-- @format -->requirePragma: false, // 只在@format或者@prettier 文件格式proseWrap: "never", //  prose散文是否根據(jù)printWidth 格式換行htmlWhitespaceSensitivity: "strict", // HTML空白靈敏度endOfLine: "auto" // 結(jié)尾
}

stylelint

• stylelint,stylelint-config-standard,stylelint-config-prettier(沖突以prettier由主),style-order(插件),

module.exports = {extends:['stylelint-config-standard','stylelint-config-prettier'],plugins:['stylelint-order']
}

commitlint

• commitlint,@commitlint/cli,@commitlint/config-conventional

commitlint.config.js

module.exports = {extends: ["@commitlint/config-conventional"],rules: {"body-leading-blank": [2, "always"],"footer-leading-blank": [1, "always"],"header-max-length": [2, "always", 108],"type-empty": [2, "never"],"scope-empty": [0],"subject-empty": [2, "never"],"subject-full-stop": [0],"type-case": [0],"scope-case": [0],"subject-case": [0],"type-enum": [2,"always",["feat", "fix", "perf", "style", "docs", "test", "refactor", "build", "ci", "chore", "revert"]]}
}

.editorconfig

# http://editorconfig.org
root = true# 說明
## 設(shè)置文件編碼為 UTF-8；
## 用兩個空格代替制表符；
## 在保存時刪除尾部的空白字符；
## 在文件結(jié)尾添加一個空白行；
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true[*.md]
trim_trailing_whitespace = false[Makefile]
indent_style = tab