為了項目代碼長期維護浆竭，代碼規(guī)范是技術(shù)團隊建設(shè)必須重視的一件事情泵额。規(guī)范的制定很容易，可是執(zhí)行卻一直不那么徹底犹菇。尤其是趕項目進度的時候全蝶。寫代碼的是人闹蒜，不是機器。
列舉下為了代碼規(guī)范的有效實行抑淫，我們團隊使用過的方法：
1绷落、團隊成員相互手動 code review，每周開code review 會總結(jié)始苇，僅僅堅持了兩個月砌烁；
2、vistual studio編輯器上安裝svn code review插件催式，在代碼提交的時候進行code review函喉， 可以評價每一行代碼，發(fā)給對應(yīng)的人荣月，并有任務(wù)要求每人每周必須review多少行代碼管呵。這個方法運行了很長時間，代碼規(guī)范得執(zhí)行得到了較大改善哺窄。但在換了git版本管理工具后廢棄捐下。
我們團隊所有項目都是使用的vue，新項目使用的vue-cli腳手架搭建萌业。 經(jīng)過過多次改進后坷襟，團隊現(xiàn)行的代碼規(guī)范執(zhí)行辦法：
1、統(tǒng)一使用編輯器 visual studio code生年。
2婴程、安裝擴展ESLint、Vetur晶框、Prettier - Code formatter排抬。
3懂从、在項目的.eslintrc.js文件中配置統(tǒng)一的代碼檢測規(guī)范授段。? 很多大廠都公開有這個配置文件蹲蒲，可以參考。 我們也是拿了一份比較嚴格的過來侵贵，在使用的過程中不斷修改届搁，根據(jù)項目的實際情況放寬了部分規(guī)范。
4窍育、在編輯器首選項設(shè)置 autoFixOnSave 為true卡睦，可以在寫代碼過程中檢測不規(guī)范的地方，標紅并有問題說明漱抓”矶停看不明白的可以去eslint官網(wǎng)查相關(guān)說明。https://eslint.org/docs/rules/?乞娄。? 英文不好的瞬逊，可以去看騰訊云翻譯的機器版本 https://cloud.tencent.com/developer/chapter/12618
經(jīng)過以上設(shè)置，可以解決大部分因為換行仪或，空格之類的不規(guī)范問題确镊。
5、項目package.json 中寫入lint配置? ? "lint": "vue-cli-service lint --fix --ext .js,.vue src",? 這樣就可以使用npm run lint 來檢測代碼規(guī)范范删，同時自動修復(fù)部分不規(guī)范的地方蕾域。
6、交叉開發(fā)
經(jīng)過以上操作到旦，對有代碼潔癖范的我來說旨巷，團隊代碼看起來至少算是整齊了。但只是解決了代碼格式問題添忘，更多的問題還是需要人工review采呐。我們采用了交叉開發(fā)的方式，每個人不再是總維護一個或幾個項目昔汉，而是可能隨時被征調(diào)去開發(fā)任何項目懈万。這樣做的前提是我們前端的代碼邏輯不復(fù)雜，注釋清晰靶病，上手新項目的成本低会通。好處是順便revie前人的代碼，相互學(xué)習(xí)娄周，減輕代碼疲勞涕侈。人員離職交接很容易。
最后附上vscode編輯器的settings.json配置：
{
? ? "editor.wordWrap": "on",
? ? "files.associations": {
? ? ? ? "*.cjson": "jsonc",
? ? ? ? "*.wxss": "css",
? ? ? ? "*.wxs": "javascript"
? ? },
? ? "emmet.includeLanguages": {
? ? ? ? "wxml": "html"
? ? },
? ? "git.autofetch": true,
? ? "files.autoSave": "off",
? ? "eslint.validate": [
? ? ? ? "javascript",
? ? ? ? "javascriptreact",
? ? ? ? "vue-html",
? ? ? ? { "language": "vue", "autoFix": true }
? ? ],
? ? "eslint.autoFixOnSave": true,
? ? "prettier.tabWidth": 4,
? ? "minapp-vscode.disableAutoConfig": true,
? ? "vetur.format.options.tabSize": 4,
? ? "vetur.format.defaultFormatterOptions": {
? ? ? ? "js-beautify-html": {
? ? ? ? ? ? "wrap_attributes": "auto"
? ? ? ? }
? ? },
? ? "[jsonc]": {
? ? ? "editor.defaultFormatter": "esbenp.prettier-vscode"
? ? },
? ? "[javascript]": {
? ? ? "editor.defaultFormatter": "esbenp.prettier-vscode"
? ? },
? ? "vetur.format.defaultFormatter.html": "js-beautify-html"
}
