實(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。 這樣對于.vue文件中的 html 和 javascript 代碼都有格式化支持了。 vue eslint 代碼自動格式化 vue-cli 代碼風(fēng)格為JavaScript Standard Style 代碼檢查規(guī)范嚴(yán)格，一不小心就無法運(yùn)行，使用eslint的autoFixOnSave可以在保存代碼的時候自動格式化代碼 VSCode拓展插件推薦（HTML、Node、Vue、React開發(fā)均適用）

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

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

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

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

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

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

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

團(tuán)隊(duì)中的代碼質(zhì)量高低與否，對于代碼和項(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)格和語法錯誤的檢查，或構(gòu)建適合團(tuán)隊(duì)自身的定制檢查工具。使用這些工具在團(tuán)隊(duì)提交代碼到代碼庫之前進(jìn)行自動化檢查，拒絕無法通過檢查的代碼，確定代碼的基本質(zhì)量。
3. 提升代碼測試重要性。對于實(shí)際的代碼而言，許多的低質(zhì)量代碼是無法通過Linter檢查出來的，此時我們需要更加完備的測試對提交的代碼進(jìn)行質(zhì)量檢測，并把測試覆蓋率等加入到代碼質(zhì)量的指標(biāo)中進(jìn)行量化。
4. 推行Code Review。代碼評審是通過閱讀代碼來檢查代碼質(zhì)量的方式。對于團(tuán)隊(duì)而言，由核心成員執(zhí)行Code Review有利于持續(xù)提升成員的代碼質(zhì)量，更為深入地檢驗(yàn)代碼的各項(xiàng)指標(biāo)，對于團(tuán)隊(duì)代碼質(zhì)量有著不可估量的好處。

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