實(shí)例詳解Vue項(xiàng)目使用eslint prettier規(guī)范代碼風(fēng)格？1. 安裝 Vetur 插件 2. 在 VS Code 的設(shè)置中添加如下規(guī)則： { "vetur.format.defaultForm

實(shí)例詳解Vue項(xiàng)目使用eslint prettier規(guī)范代碼風(fēng)格？

1. 安裝 Vetur 插件 2. 在 VS Code 的設(shè)置中添加如下規(guī)則： { "vetur.format.defaultFormatter": { "html": "prettier"， "css": "prettier"， "postcss": "prettier"， "scss": "prettier"， "less": "prettier"， "js": "prettier"， "ts": "prettier"， "stylus": "stylus-supremacy" } } 這里是設(shè)置 Vetur 默認(rèn)使用的格式化插件 prettier。 這樣對(duì)于.vue文件中的 html 和 javascript 代碼都有格式化支持了。 vue eslint 代碼自動(dòng)格式化 vue-cli 代碼風(fēng)格為JavaScript Standard Style 代碼檢查規(guī)范嚴(yán)格，一不小心就無法運(yùn)行，使用eslint的autoFixOnSave可以在保存代碼的時(shí)候自動(dòng)格式化代碼 VSCode拓展插件推薦（HTML、Node、Vue、React開發(fā)均適用）

web前端包含的測(cè)試過程是如何進(jìn)行的？

這個(gè)東西各個(gè)公司工作室各個(gè)組各個(gè)項(xiàng)目都不一樣，但基本技能還是那些：

1. 不要把所有問題留在測(cè)試階段，開發(fā)就是最好的測(cè)試。所以開發(fā)的時(shí)候，多console，多打端點(diǎn)，使用chrome測(cè)試開發(fā)工具測(cè)資源、渲染等。渲染還可以使用時(shí)間戳API打印出來進(jìn)行檢測(cè)，chrome測(cè)試開發(fā)工具還可以測(cè)低網(wǎng)絡(luò)高延遲比如2G網(wǎng)絡(luò)請(qǐng)求，建議學(xué)習(xí)下。

2. 寫好代碼后，一般你的構(gòu)建工具比如E2E、ESlint包括webpack自帶的一些檢測(cè)會(huì)測(cè)試你的編碼規(guī)范、UI性能以及代碼可執(zhí)行度；同時(shí)最好自己引入node斷言或一些JS測(cè)試包比如chai.js 等進(jìn)行單元測(cè)試。（公司內(nèi)部都會(huì)自己基于webpack自己開發(fā)一套構(gòu)建工具）

3.測(cè)試后，只是證明你的代碼沒問題了，兼容、安全、網(wǎng)絡(luò)還有待測(cè)試。兼容一般會(huì)專門交給測(cè)試，測(cè)不同瀏覽器兼容，測(cè)瀏覽器不同版本兼容，測(cè)PC和移動(dòng)端兼容，如果是native和H5還會(huì)分開測(cè)，所以公司都專門有測(cè)試。安全，其他公司我不知道，反正我們公司自帶門神檢測(cè)。網(wǎng)絡(luò)這一塊，只能到測(cè)試服務(wù)器后，線上使用chrome開發(fā)者工具測(cè)試，看一下資源包等加載、解析、渲染等問題。

4.最后，說到上線，最好是多分支開發(fā)，一個(gè)線上分支，一個(gè)測(cè)試分支，剩下的都是各個(gè)開發(fā)分支。多git status和git diff，看下更改。另外留意線上改動(dòng)，確保和線上同步。這點(diǎn)自己小組確立規(guī)范，不能亂，不然每次push都是沖突很惱火的。

如何減少團(tuán)隊(duì)的低質(zhì)量代碼？

團(tuán)隊(duì)中的代碼質(zhì)量高低與否，對(duì)于代碼和項(xiàng)目的可持續(xù)維護(hù)有很重要的意義。低質(zhì)量的代碼將形成技術(shù)債務(wù)，拉高維護(hù)和再開發(fā)的難度。想要提高團(tuán)隊(duì)的代碼質(zhì)量，有以下幾點(diǎn)建議：

1. 制定團(tuán)隊(duì)的代碼規(guī)范。沒有規(guī)矩，不成方圓。只有制定了合適的規(guī)范，團(tuán)隊(duì)的代碼質(zhì)量才能有所保證。代碼規(guī)范包括的方面很多，一般包括代碼格式、編碼規(guī)范、文檔規(guī)范等。許多編程語言都有流行的代碼風(fēng)格規(guī)范，可以進(jìn)行參考。
2. 利用工具嚴(yán)格執(zhí)行規(guī)范。制定了規(guī)范之后，需要嚴(yán)格執(zhí)行。使用如Linter等工具進(jìn)行代碼風(fēng)格和語法錯(cuò)誤的檢查，或構(gòu)建適合團(tuán)隊(duì)自身的定制檢查工具。使用這些工具在團(tuán)隊(duì)提交代碼到代碼庫(kù)之前進(jìn)行自動(dòng)化檢查，拒絕無法通過檢查的代碼，確定代碼的基本質(zhì)量。
3. 提升代碼測(cè)試重要性。對(duì)于實(shí)際的代碼而言，許多的低質(zhì)量代碼是無法通過Linter檢查出來的，此時(shí)我們需要更加完備的測(cè)試對(duì)提交的代碼進(jìn)行質(zhì)量檢測(cè)，并把測(cè)試覆蓋率等加入到代碼質(zhì)量的指標(biāo)中進(jìn)行量化。
4. 推行Code Review。代碼評(píng)審是通過閱讀代碼來檢查代碼質(zhì)量的方式。對(duì)于團(tuán)隊(duì)而言，由核心成員執(zhí)行Code Review有利于持續(xù)提升成員的代碼質(zhì)量，更為深入地檢驗(yàn)代碼的各項(xiàng)指標(biāo)，對(duì)于團(tuán)隊(duì)代碼質(zhì)量有著不可估量的好處。

總而言之，想要減少團(tuán)隊(duì)中的低質(zhì)量代碼，需要制定規(guī)范，嚴(yán)格執(zhí)行，加強(qiáng)測(cè)試，推行Code Review。另外，也需要加強(qiáng)對(duì)團(tuán)隊(duì)成員的代碼能力管理，共同提升代碼質(zhì)量。