工作的溝通，不只是電子郵件或者面對面語言交流，程式碼也是溝通方式之一。

用程式碼實現需求，只是萬里長征走完了第一步，必須讓程式碼表達自己的設計思想。

試想一下，你負責的功能被另外一個同事接手，如果你的程式碼結構清晰、註釋合理，他就不用頻繁的詢問程式碼疑點，不用打斷你的工作。

編寫程式碼的時候，應該考慮到別人的閱讀感受，減少閱讀障礙，為整個團隊創造程式碼，而不是你自己。

真正牛逼的程式設計師是寫出能讓人看得懂的程式碼。

不要小看這個，雖說我們寫的程式碼確實是跑給機器的，但是程式碼是人寫的，而通常一個專案的開發，需要多個程式設計師一同協助開發，這時能寫出 human readble 的程式碼就顯得至關重要，因為不僅可以減少後期維護的時間成本，而且還能讓後面加入的新同事能更快的上手專案。

要能寫出乾淨、整潔並讓人易懂的程式碼，必然離不開一些規則，只要自覺遵守、合理運用這些規則，程式碼通常都不會太差。

下面分享給大家這份來自阿里的前端程式碼規範。

一．程式設計規約

(一)命名規範

1.1.1專案命名
1.1.2目錄命名
1.1.3 JS、CSS、SCSS、HTML、PNG 檔案命名
1.1.4命名嚴謹性

(二)HTML 規範 （Vue Template 同樣適用）

1.2.1 HTML 型別
1.2.2 縮排
1.2.3 分塊註釋
1.2.4 語義化標籤
1.2.5 引號

(三)CSS 規範

1.3.1 命名
1.3.2 選擇器
1.3.3 儘量使用縮寫屬性
1.3.4 每個選擇器及屬性獨佔一行
1.3.5 省略0後面的單位
1.3.6 避免使用ID選擇器及全域性標籤選擇器防止汙染全域性樣式

(四)LESS 規範

1.4.1 程式碼組織
1.4.2 避免巢狀層級過多

(五)Javascript 規範

1.5.1 命名
1.5.2 程式碼格式
1.5.3 字串
1.5.4 物件宣告
1.5.5 使用 ES6+
1.5.6 括號
1.5.7 undefined 判斷
1.5.8 條件判斷和迴圈最多三層
1.5.9 this 的轉換命名
1.5.10 慎用 console.log

二、Vue 專案規範

(一) Vue 編碼基礎

2.1.1. 元件規範
2.1.2. 模板中使用簡單的表示式
2.1.3 指令都使用縮寫形式
2.1.4 標籤順序保持一致
2.1.5 必須為 v-for 設定鍵值 key
2.1.6 v-show 與 v-if 選擇
2.1.7 script 標籤內部結構順序
2.1.8 Vue Router 規範

(二) Vue 專案目錄規範

2.2.1 基礎
2.2.2 使用 Vue-cli 腳手架
2.2.3 目錄說明
2.2.4註釋說明
2.2.5 其他

完整版PDF資料免費分享，只需你點贊支援，動動手指點選此處就可免費領取了。