摘要:形成良好統(tǒng)一的代碼規(guī)范,有利于提高代碼的可讀性,減少潛在的錯(cuò)誤,便于團(tuán)隊(duì)協(xié)作開發(fā)。其中是可選的,如果沒有則禁用所有規(guī)則,如果有則禁用所有規(guī)則。也可以定義一個(gè)命令同時(shí)運(yùn)行這兩個(gè)命令,我在這里使用了我們定義了在鉤子觸發(fā)時(shí)會(huì)執(zhí)行命令。
形成良好統(tǒng)一的代碼規(guī)范,有利于提高代碼的可讀性,減少潛在的錯(cuò)誤,便于團(tuán)隊(duì)協(xié)作開發(fā)。本文簡單介紹JS、CSS、 Git Commit 的規(guī)范工具及用法。
Lint JS我們使用ESlint對(duì)JS進(jìn)行代碼規(guī)范。
1. 安裝你可以全局安裝:npm install eslint -g
或者也可以在你的項(xiàng)目安裝 npm install eslint --save-dev
安裝完成后,可在命令行檢查你的代碼是否符合規(guī)范。如果是全局安裝則可以使用 eslint your-file 檢查你的文件。如果是項(xiàng)目內(nèi)安裝則使用:./node_modules/.bin/eslint your-file。
2. 配置通過eslint --init命令可以生成一個(gè)配置文件。你也可以自己創(chuàng)建.eslintrc.*文件,或者在package.json中通過eslintConfig配置。在這里我們使用.eslintrc文件進(jìn)行配置。當(dāng)你使用eslint命令檢查你的代碼時(shí),它會(huì)從當(dāng)前目錄開始一層層向上查找是否存在.eslintrc文件,直到找到最近的一個(gè).eslinrc文件,作為此次檢查的規(guī)則。
你可以在ESLint官網(wǎng)查看所有配置項(xiàng)。
目前已經(jīng)有很多大廠公開了他們的代碼規(guī)范,也有很多相對(duì)應(yīng)的 ESLint 插件,我們可以在.eslintrc中配置相對(duì)應(yīng)的插件,這樣就不用我們手動(dòng)去添加一個(gè)個(gè)規(guī)則了。
以我目前使用的Airbnb的代碼規(guī)范為例,他提供了eslint-config-airbnb-base插件,因此我只需要在項(xiàng)目安裝本插件:
npx install-peerdeps --save-dev eslint-config-airbnb-base
并且在.eslintrc中配置上這個(gè)插件, 大功告成!
{ "extends": ["airbnb-base"] }
需要注意的一點(diǎn)是,如果你是使用全局命令eslint你的代碼,在相應(yīng)的.eslintrc中的extends,plugins都需要在全局安裝。否則eslint會(huì)找不到對(duì)應(yīng)的插件。
最后,如果你還想對(duì)現(xiàn)有的 airbnb 或者其他規(guī)則進(jìn)行配置,則可在.eslintrc中的rules中加上相應(yīng)的配置。
{ "extends": ["airbnb-base"], "rules": { // 你的個(gè)性化配置 "rule-name": "" // 0-off, 1-warn, 2-error } }
還有一個(gè)比較例外的是可以使用以下方式,針對(duì)某些文件,重新修改相應(yīng)規(guī)則:
"overrides": [ { "files": ["*-test.js","*.spec.js"], "rules": { "no-unused-expressions": "off" } } ]3. 禁用
但是有些時(shí)候有些地方你可能真的需要禁用某些規(guī)則,eslint提供了幾種禁用方式:
/* eslint-disable [rules] */:這行之后的所有代碼禁用eslint 規(guī)則。
/* eslint-disable-line [rules] */: 這一行禁用eslint規(guī)則。
/* eslint-disable-next-line [rules] */: 下一行禁用eslint規(guī)則。
其中[rules] 是可選的,如果沒有rules則禁用所有規(guī)則,如果有rules則禁用所有規(guī)則。
如 /* eslint-disable */則會(huì)禁用掉所有規(guī)則,/* eslint-disable no-console*/ 則只會(huì)禁用掉no-console 這條規(guī)則。
Lint CSS我選擇了StyleLint來規(guī)范我的 CSS 。它可以說和eslint非常像了。
1. 安裝同樣的,全局或者項(xiàng)目下安裝stylelint.
npm install stylelint -g
安裝完成后,如果是全局安裝則可以使用 stylelint your-css-file 檢查你的文件。如果是項(xiàng)目內(nèi)安裝則使用:./node_modules/.bin/stylelint your-css-file。
2. 配置可以通過三種方式對(duì)stylelint進(jìn)行配置:
package.json中的stylelint屬性;
.stylelintrc?文件
stylelint.config.js?文件導(dǎo)出一個(gè) JS 對(duì)象
和 ESLint一樣,我們可以在extends中指定第三方插件,rules來配置對(duì)應(yīng)的規(guī)則。這里我們還是繼續(xù)使用Airbnb CSS 規(guī)范。
安裝stylelint-config-airbnb:
npm install stylelint-config-airbnb
在配置文件中聲明:
{??"extends":?"stylelint-config-airbnb"}
注意,如果你的.stylelintrc文件是在根目錄下,則extends的路徑需要寫成絕對(duì)路徑,比如:
{ "extends": "/usr/local/lib/node_modules/stylelint-config-airbnb" }
最后,運(yùn)行stylelint your-css-file就可以出現(xiàn)規(guī)范檢查結(jié)果啦!stylelint默認(rèn)會(huì)支持css,scss,less所以你也不用擔(dān)心哦~
同樣,你也可以像ESLint一樣,通過rules配置你自己的規(guī)則。
3. 禁用stylelint 的規(guī)則也和 ESLint一樣。所以如果熟悉了ESLint, stylelint真的可是說是無縫上手哦~
Lint Commit在這一步我會(huì)進(jìn)行兩步操作:
檢查前2步的ESLint,stylelint 是否全部通過;
提交的commit信息是否符合規(guī)范。
OK, Let"s do it!
1. 使用githooks 檢測代碼規(guī)范是否通過我們使用husky來管理我們的githooks。在安裝husky之前,請確保你的項(xiàng)目已經(jīng)git init了。
安裝husky:npm install husky --save-dev
在package.json中定義我們需要的鉤子及執(zhí)行的命令:
{ "scripts": { "lint:es": "eslint", // lint js "lint:css": "stylelint src/**/*.css", // lint css "lint:all": "npm-run-all lint:es lint:css" // lint es, css }, "husky": { "hooks": { "pre-commit": "npm run lint:all", } } }
在這里我們分別定義了lint:es和lint:css兩個(gè)命令來檢測代碼規(guī)范。你可以分別運(yùn)行這兩個(gè)命令。也可以定義一個(gè)命令同時(shí)運(yùn)行這兩個(gè)命令,我在這里使用了npm-run-all:
npm install npm-run-all --save-dev
我們定義了在pre-commit鉤子觸發(fā)時(shí)會(huì)執(zhí)行npm run lint:all命令。pre-commit鉤子會(huì)在git commit時(shí)觸發(fā),如果lint:all 沒有通過,則本次commit會(huì)失敗。
2. 使用commintlint檢查 commit 信息是否符合規(guī)范在這里,我們使用阮老師這篇文章中提到的 git 提交規(guī)范, 大致是:
( ): // 空一行 // 空一行
其中,type 可選項(xiàng)為:
feat:新功能(feature)
fix:修補(bǔ)bug
docs:文檔(documentation)
style: 格式(不影響代碼運(yùn)行的變動(dòng))
refactor:重構(gòu)(即不是新增功能,也不是修改bug的代碼變動(dòng))
test:增加測試
chore:構(gòu)建過程或輔助工具的變動(dòng)
安裝commitlint, 以及相對(duì)應(yīng)的commit規(guī)范。和eslint一樣,commitlint為我們提供檢測功能,同時(shí)他也有不同的插件來對(duì)應(yīng)不同的規(guī)范風(fēng)格。你可以在這里查看大家分享出來的相應(yīng)規(guī)范的配置。
npm install --save-dev @commitlint/{config-conventional,cli}
生成配置文件:
echo "module.exports = {extends: ["@commitlint/config-conventional"]}" > commitlint.config.js
它也支持多種文件格式的配置文件:
Configuration is picked up from commitlint.config.js, .commitlintrc.js, .commitlintrc.json, or .commitlintrc.yml file or a commitlint field in package.json
并且常用的配置項(xiàng)也與ESLint很相似:
{ "extends": ["@commitlint/config-conventional"], // 擴(kuò)展的規(guī)則集 "rules": { // commitmsg 的自定義規(guī)則 } }
這時(shí)候你就可以檢查你要提交的commit信息是否符合規(guī)范了:
echo "foo" | npx commitlint
不過這樣很雞肋,我要先commit一次要提交的信息,通過了,再用這條消息提交一次。我們完全可以在githooks時(shí)來解決這個(gè)問題:
{ "scripts": { "commitmsg": "commitlint -e GIT_PARAMS" }, "husky": { "hooks": { "pre-commit": "npm run lint:all", "commit-msg": "npm run commitmsg" } } }
在這里和githooks同時(shí)使用時(shí)需要加上GIT_PARAMS這個(gè)環(huán)境變量。我們在commit-msg這個(gè)鉤子時(shí)調(diào)用npm run commitmsg 來判斷commit信息是否符合規(guī)范。
3. 使用commitizen來填寫commit msg要想記住所有的commit類型和規(guī)范也是比較麻煩的事,commitizen提供交互式的方式來幫助我們填寫commit msg。
安裝commitizen及其adapater : npm install -g commitizen cz-conventional-changelog
全局安裝adapater: echo "{ "path": "cz-conventional-changelog" }" > ~/.czr
安裝完成后,使用 git cz 代替 git commit -m 來填寫 commit msg,會(huì)出現(xiàn)一個(gè)交互式工具:
OK。完成以上三步之后我們的git 工作流變成了:
git add . git cz
然后就會(huì)檢查我們的eslint, stylelint, commitlint。這樣,當(dāng)你提交成功時(shí),你的JS, CSS , Commit Msg 也是完全符合規(guī)范的哦~
總結(jié)檢查JS: ESlint
檢查CSS:StyleLint
檢查Commit Message: commintlint
三者結(jié)合,使用Git鉤子管理工具:husky
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/96364.html
摘要:用于檢查中文編寫格式規(guī)范的命令行工具,基于開發(fā),且方便集成。忽略不檢查該規(guī)則警告,但不阻斷錯(cuò)誤,且阻斷通過來忽略文件和目錄,語法。 lint-md 用于檢查中文 markdown 編寫格式規(guī)范的命令行工具,基于 AST 開發(fā),且方便集成 ci。Cli tool to lint your markdown file for Chinese. showImg(https://segment...
摘要:項(xiàng)目編碼規(guī)范化工具工具代碼校驗(yàn)工具,讓代碼更一致和避免。在配置文件到項(xiàng)可對(duì)單條規(guī)則一一進(jìn)行改寫。以下以項(xiàng)目需校驗(yàn)文件為例參考鏈接一步一步,統(tǒng)一項(xiàng)目中的編碼規(guī)范 Web 項(xiàng)目編碼規(guī)范化工具 工具 ESLint The pluggable linting utility for JavaScript and JSX 代碼校驗(yàn)工具(linting utility),讓代碼更一致和避免 bug...
摘要:基礎(chǔ)命令安裝檢查是否安裝成功新建項(xiàng)目項(xiàng)目啟動(dòng)打包功能配置運(yùn)行以下命令來創(chuàng)建一個(gè)新項(xiàng)目你可以選默認(rèn)的包含了基本的設(shè)置的,也可以選手動(dòng)選擇特性來選取需要的特性這里我們選擇手動(dòng)選擇功能自定義功能配置按下空格選擇或取消路由是否使用模式如果 基礎(chǔ)命令 # 安裝 npm install -g @vue/cli # 檢查是否安裝成功 vue -V # 新建項(xiàng)目 vue create my-pro...
閱讀 3021·2021-11-24 10:32
閱讀 678·2021-11-24 10:19
閱讀 5070·2021-08-11 11:17
閱讀 1456·2019-08-26 13:31
閱讀 1259·2019-08-23 15:15
閱讀 2287·2019-08-23 14:46
閱讀 2265·2019-08-23 14:07
閱讀 1074·2019-08-23 14:03