- 規(guī)范代碼有利于團(tuán)隊(duì)協(xié)作
- 手工規(guī)范費(fèi)時(shí)費(fèi)力笨觅，準(zhǔn)確性不令人滿意
- 可以配合編輯器自動(dòng)提醒乾颁，提高開(kāi)發(fā)效率
1.eslint[lint:檢測(cè)]
1.1 隨著ECMAScript版本一直更新的Js lint工具糠赦，插件豐富，并且能夠套用規(guī)范，規(guī)則豐富，能夠滿足大部分團(tuán)隊(duì)需求廊酣。
1.2 eslint可以配合git，可以再git commit代碼時(shí)赏枚，使用git hook調(diào)用eslint進(jìn)行代碼規(guī)范驗(yàn)證亡驰，不規(guī)范的代碼無(wú)法提交到倉(cāng)庫(kù)。
2.editorconfig
2.1 不同編輯器隊(duì)文本的格式會(huì)有一定的區(qū)別饿幅，如果不統(tǒng)一一些規(guī)范凡辱，可能跟別人合作的時(shí)候每次更新下來(lái)別人的代碼會(huì)出現(xiàn)一大堆報(bào)錯(cuò)。
3.配置
- 3.1 安裝eslint ESLINT官網(wǎng) + NPM包官網(wǎng)
$npm i eslint -D
//在項(xiàng)目根目錄下創(chuàng)建文件.eslintrc用于規(guī)范輸出文件
{
"extends":"standard" //需要安裝
}
//在client目錄下創(chuàng)建.eslintrc--用于規(guī)范jsx
{
"parser":"babel-eslint", //需要安裝栗恩，指定babel-eslint去解析js代碼透乾，代替eslint默認(rèn)的解析器
"env":{
"browser":true, //聲明執(zhí)行在瀏覽器環(huán)境，防止報(bào)錯(cuò)沒(méi)有dom變量
"es6":true, //聲明es6代碼
"node":true //聲明node摄凡，防止報(bào)錯(cuò)沒(méi)有node變量
},
"parserOptions":{
"ecmaVersion":6, //定義ecma版本
"sourceType":"module" //聲明寫(xiě)代碼方式為模塊化
},
"extends":"airbnb", //需要安裝续徽，美國(guó)一個(gè)踩過(guò)非常多react坑的公司總結(jié)出來(lái)的
"rules":{ //自定義規(guī)則
"semi":[0] //問(wèn)號(hào)（semi）不去檢查（[0]）
}
}
//webpack.config.client.js下添加rules
{
enforce:"pre", //在其他的loader之前進(jìn)行此loader，如果出錯(cuò)則不進(jìn)行下面的loader
test:/.(js|jsx)$/,
loader:"eslint-loader",
exclude:[
path.resolve(__dirname,"../node_modules") //Node_modules排除
]
}
//安裝依賴包[airbnb包安裝時(shí)會(huì)提醒包缺失]
$npm i babel-eslint \
\ eslint-config-airbnb eslint-config-standard \
\ eslint-loader \
\ eslint-plugin-import \
\ eslint-plugin-react \
\ eslint-plugin-promise \
\ eslint-plugin-jsx-a11y \
\ eslint-plugin-node \
\ eslint-plugin-standard -D \
//安裝并且配置好后
npm run dev:client
//如果有不符合規(guī)范的亲澡，會(huì)在控制臺(tái)打印ERROR，以及文件纫版，行數(shù)
//eslint行注釋:行末添加 【//eslint-disable-line】床绪，之后eslint對(duì)該行代碼不進(jìn)行檢測(cè)
//eslint提示會(huì)有很多優(yōu)化方面的提示
- 3.2 安裝editorconfig
//根目錄下新建.editorconfig
root = true
[*]
charset=utf-8
indent_style=space
indent_size=2
end_of_line=lf
insert_final_newline=true
trim_trailing_whitespace=true
//webstorm本身已經(jīng)集成editorconfig
- 3.3 git時(shí)使用eslint檢測(cè)
$git init //本地項(xiàng)目git倉(cāng)庫(kù)化，需要安裝git
$npm i husky -D
//package.json添加script
"lint":"eslint --ext .js --ext .jsx client/",
"precommit":"npm run lint"
$git commit -m "asds"
//husky會(huì)執(zhí)行precommit 命令
//如果lint不通過(guò)其弊，控制臺(tái)會(huì)eslint出ERROR