使用eslint和githooks統(tǒng)一前端風(fēng)格的技巧
前端團(tuán)隊(duì)開發(fā)時(shí),是必須要有一個(gè)統(tǒng)一的前端規(guī)范的,用一套統(tǒng)一的規(guī)范來規(guī)范開發(fā)者,可以有效的避免在提交和拉取代碼時(shí)造成的代碼錯(cuò)亂問題,這邊文章主要講下我們團(tuán)隊(duì)的代碼規(guī)范使用,eslint結(jié)合vscode保存時(shí)自動(dòng)修復(fù)不規(guī)范代碼,githooks提交代碼時(shí)的eslint校驗(yàn)和信息規(guī)范。
添加eslint
vue-cli3構(gòu)建一個(gè)新項(xiàng)目(包含eslint模塊),完成后添加 .eslintrc.js
配置如下:
module.exports = { root: true, parserOptions: { parser: 'babel-eslint', sourceType: 'module' }, env: { browser: true }, // https://github.com/standard/standard/blob/master/docs/RULES-en.md extends: [ 'plugin:vue/base' ], // required to lint *.vue files plugins: [ 'vue' ], // add your custom rules here 'rules': { // allow paren-less arrow functions 'indent': [2, 2], // 兩個(gè)空格的縮進(jìn) 'quotes': [2, 'single'], // js必須使用單引號(hào) 'linebreak-style': [2, 'unix'], // 換行風(fēng)格 unix/windows 'semi': [2, 'never'], // 語句強(qiáng)制分號(hào)結(jié)尾 // 'no-console': [1], // 不允許console語句 'no-unused-vars': [1], // 聲明了變量但是沒有使用檢測 'space-unary-ops': [1, { 'words': true, 'nonwords': false }], // 一元運(yùn)算符的前/后要不要加空格 'brace-style': [2, '1tbs', { 'allowSingleLine': false }], // 大括號(hào)風(fēng)格 'comma-spacing': [2, { 'before': false, 'after': true }], // 逗號(hào)后有空格,前沒有空格 'comma-style': [2, 'last'], // 逗號(hào)跟在結(jié)尾 'key-spacing': [2, { 'beforeColon': false, 'afterColon': true }], // 對象字面量中冒號(hào)的前后空格 'lines-around-comment': [ // 行前/行后備注 2, { 'beforeBlockComment': false, // 段注釋的前后 'beforeLineComment': false, // 行注釋的前面 'afterBlockComment': false, // 塊注釋的后面 'afterLineComment': false, // 行注釋的后面 'allowBlockStart': true, 'allowObjectStart': true, 'allowArrayStart': true }], 'max-depth': [2, 4], // 代碼最多允許4層嵌套 'max-len': [1, 1000, 2], 'max-nested-callbacks': [2, 3], // 回調(diào)嵌套深度 'max-params': [2, 5], // 函數(shù)最多只能有5個(gè)參數(shù) 'max-statements': [1, 80], // 單個(gè)函數(shù)最多80條語句 'no-array-constructor': [2], // 禁止使用數(shù)組構(gòu)造器 'no-lonely-if': 2, // // 禁止else語句內(nèi)只有if語句 'no-multiple-empty-lines': [2, { 'max': 3, 'maxEOF': 1 }], // 空行最多不能超過2行 'no-nested-ternary': 2, // 不使用嵌套的三元表達(dá)式 'no-spaced-func': 2, // 函數(shù)調(diào)用時(shí) 函數(shù)名與()之間不能有空格 'no-trailing-spaces': 2, // 一行結(jié)束后面不要有空格 'no-unneeded-ternary': 2, // 禁止不必要的嵌套 var isYes = answer === 1 ? true : false;簡單的判斷用三元表達(dá)式代替 'object-curly-spacing': [2, 'always', { // 大括號(hào)內(nèi)是否允許不必要的空格 always始終允許;never始終不允許 'objectsInObjects': false, 'arraysInObjects': false }], 'arrow-spacing': 2, // =>的前/后括號(hào) 'block-scoped-var': 2, // 塊語句中使用var 'no-dupe-class-members': 2, // 'no-var': 1, // 禁用var,用let和const代替 'object-shorthand': [1, 'always'], // 強(qiáng)制對象字面量縮寫語法 'array-bracket-spacing': [2, 'never'], // 是否允許非空數(shù)組里面有多余的空格 'operator-linebreak': [2, 'after'], // 換行時(shí)運(yùn)算符在行尾還是行首 // 'semi-spacing': [2, { 'before': false, 'after': false }], // 分號(hào)前后空格 'keyword-spacing': ['error'], 'space-before-blocks': 2, // 不以新行開始的塊{前面要不要有空格 'block-spacing': [2, 'always'], 'space-before-function-paren': [2, 'never'], // 函數(shù)定義時(shí)括號(hào)前面要不要有空格 'space-in-parens': [2, 'never'], // 小括號(hào)里面要不要有空格 'spaced-comment': [1, 'always', { 'exceptions': ['-', '*', '+'] }], // 注釋風(fēng)格要不要有空格什么的 'arrow-parens': 0, // allow async-await 'generator-star-spacing': 0, // allow debugger during development 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0 }, globals: { '$': false, 'jquery': false, 'ActiveXObject': false, 'arbor': true, 'layer': false } }
運(yùn)行 npm run lint
會(huì)給出報(bào)錯(cuò),運(yùn)行 npm run serve
也會(huì)對項(xiàng)目進(jìn)行eslint校驗(yàn),無法通過校驗(yàn)就會(huì)報(bào)錯(cuò)
可以結(jié)合vscode的eslint插件快速修復(fù)無法通過驗(yàn)證的代碼,首先下載插件,然后更改setting.json配置文件,具體如下:
"eslint.validate": [ "javascript", "javascriptreact", "vue-html" ], "eslint.run": "onSave", "editor.codeActionsOnSave": { "source.fixAll.eslint": true }
配置完成之后重啟vscode,在編輯代碼的時(shí)候如果未符合eslint的校驗(yàn),保存時(shí)會(huì)自動(dòng)修復(fù)代碼。
添加git hooks
前端團(tuán)隊(duì)開發(fā)中如果沒有做正確的校驗(yàn)就提交了代碼,拉取代碼時(shí)會(huì)導(dǎo)致很多地方爆紅不符合定制的開發(fā)規(guī)范,因此可以在提交代碼時(shí)做些限制.在 git
提交代碼時(shí),會(huì)觸發(fā)一些列的鉤子函數(shù),可以通過 husky
這個(gè)git hooks的工具來進(jìn)行代碼提交校驗(yàn),需要先安裝依賴包 cnpm i -D husky lint-staged @commitlint/config-conventional @commitlint/cli
.然后在package.json中添加如下代碼:
// package.json "husky": { "hooks": { "pre-commit": "lint-staged",// 在pre-commit階段運(yùn)行下面配置的校驗(yàn)功能 "commit-msg": "commitlint -E HUSKY_GIT_PARAMS" // 這個(gè)是規(guī)范提交的信息的,結(jié)合commitlint.config.js使用 } }, "lint-staged": { "src/**/*.{js,vue}": [ "npm run lint", "git add ." ] }
// commitlint.config.js // 參考的官方配置,提交的信息必須按照下面規(guī)范書寫,類似`git commit -m 'feat: 添加eslint'` module.exports = { parserPreset: 'conventional-changelog-conventionalcommits', rules: { 'body-leading-blank': [1, 'always'], 'body-max-line-length': [2, 'always', 100], 'footer-leading-blank': [1, 'always'], 'footer-max-line-length': [2, 'always', 100], 'header-max-length': [2, 'always', 100], 'scope-case': [2, 'always', 'lower-case'], 'subject-case': [ 2, 'never', ['sentence-case', 'start-case', 'pascal-case', 'upper-case'] ], 'subject-empty': [2, 'never'], 'subject-full-stop': [2, 'never', '.'], 'type-case': [2, 'always', 'lower-case'], 'type-empty': [2, 'never'], 'type-enum': [ 2, 'always', [ 'build', 'chore', 'ci', 'docs', 'feat', 'fix', 'perf', 'refactor', 'revert', 'style', 'test' ] ] } }
接下來修改文件提交代碼,最后commit的時(shí)候就會(huì)對已修改文件進(jìn)行校驗(yàn),如果eslint校驗(yàn)不通過,或者commit信息不符合規(guī)范都是不能提交代碼的,以上步驟已經(jīng)可以很好的改善代碼和提交信息規(guī)范,這對于團(tuán)隊(duì)項(xiàng)目開發(fā)能夠很大對提高代碼質(zhì)量。
總結(jié)
到此這篇關(guān)于使用eslint和githooks統(tǒng)一前端風(fēng)格的技巧的文章就介紹到這了,更多相關(guān)eslint和githooks統(tǒng)一前端風(fēng)格內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
詳解全棧開發(fā)Vercel數(shù)據(jù)庫存儲(chǔ)服務(wù)
這篇文章主要為大家介紹了全棧開發(fā)Vercel數(shù)據(jù)庫存儲(chǔ)服務(wù)功能使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05js Html結(jié)構(gòu)轉(zhuǎn)字符串形式顯示代碼
js Html結(jié)構(gòu)轉(zhuǎn)字符串形式顯示代碼,需要的朋友可以參考下。2011-11-11JavaScript調(diào)用客戶端的可執(zhí)行文件(示例代碼)
這篇文章主要是對JavaScript調(diào)用客戶端的可執(zhí)行文件(示例代碼)進(jìn)行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2013-11-11JavaScript中對象property的讀取和寫入方法介紹
這篇文章主要介紹了JavaScript中對象property的讀取和寫入方法介紹,本文講解了原型繼承鏈中property的讀取、原型繼承鏈中property的寫入等內(nèi)容,需要的朋友可以參考下2014-12-12微信小程序之幾種常見的彈框提示信息實(shí)現(xiàn)詳解
這篇文章主要介紹了微信小程序之幾種常見的彈框提示信息實(shí)現(xiàn)詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07javascript之鼠標(biāo)拖動(dòng)位置互換效果代碼
javascript之鼠標(biāo)拖動(dòng)位置互換效果代碼...2007-11-11淺談Webpack4 Tree Shaking 終極優(yōu)化指南
這篇文章主要介紹了淺談Webpack4 Tree Shaking 終極優(yōu)化指南,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11