Vue風格指南總結及對應ESLint規則配置

全手打原創，轉載請標明出處：http://www.javashuo.com/article/p-pzxgwtuf-hc.html，多謝，=。=~

 

必要的：規避錯誤；

強烈推薦：改善可讀性和開發體驗；

推薦：多選擇狀況下建議一個默認的選擇；

謹慎使用：照顧極端狀況或幫助老代碼平穩遷移的vue特性；

 

如下包括Vue官網表示必要的和強烈推薦的

---

 1、命名規範

一、組件名爲多個單詞，除根組件App外——避免跟現有的以及將來的 HTML 元素衝突。

二、在插件、混入等擴展中始終爲自定義的私有屬性使用 $_ 前綴（或使用模塊做用域，保證不容許外部訪問的函數的私有性）。一般爲：

 

三、單文件組件的文件名要麼是單詞大寫開頭 (PascalCase)，要麼是橫線鏈接 (kebab-case)——單詞大寫開頭利於代碼編輯器的自動補全。

四、應用特定樣式和約定的基礎組件 (也就是展現類的、無邏輯的或無狀態的組件) 應該所有以一個特定的前綴開頭，好比 Base、App 或 V——編輯器排序後基礎組件會所有列在一塊兒，防止隨意選擇前綴，被頻繁使用放全局時相同前綴易於webpack打包。

五、只應該擁有單個活躍實例的組件（即每一個頁面只使用一次該組件，它不接受prop）應該以 The 前綴命名，以示其惟一性——例如頭heading、導航欄sidebar。

六、和父組件緊密耦合的子組件應該以父組件名做爲前綴命名（一個組件只在某個父組件的場景下有意義）——一般目錄嵌套的方法文件名相同時在編輯器中快速切換文件困難，過多嵌套的子目錄增長瀏覽組件所花的時間。

七、組件名中單詞的順序應該以高級別的 (一般是通常化描述的) 單詞開頭，以描述性的修飾詞結尾。好比：

八、組件名大小寫：對於絕大多數項目來講，在單文件組件和字符串模板中組件名應該老是 PascalCase 的——可是在 DOM 模板中老是 kebab-case 的（HTML 是大小寫不敏感的）。

 

ESLint：

{
  "vue/component-name-in-template-casing": ["error", "kebab-case", {
    "registeredComponentsOnly": false,
    "ignores": []
  }]
}

 

九、JS/JSX 中的組件名應該始終是 PascalCase 的，儘管在較爲簡單的應用中只使用 Vue.component 進行全局組件註冊時，可使用 kebab-case 字符串。

 

 

ESLint：

{
  "vue/name-property-casing": ["error", "PascalCase"]
}

 

十、組件名應該傾向於完整單詞而不是縮寫。

十一、prop名大小寫：在聲明 prop 的時候，其命名應該始終使用 camelCase，而在模板和 JSX 中應該始終使用 kebab-case。

 

 

ESLint：

{
  "vue/prop-name-casing": ["error", "camelCase"]
}

 

PS：對於駝峯和橫線命名的選擇能夠整體遵循：在 JavaScript 中是 camelCase，在 HTML 中則是 kebab-case。

 

2、其餘

一、組件的 data 必須是一個函數，除了 new Vue 外的任何地方。

二、props定義儘可能詳細。一般爲：

 

ESLint：

{
  "vue/require-prop-types": "error"
}

 

三、給v-for設置鍵值，與key結合使用，能夠高效的更新虛擬DOM（使用數組中不會變化的那一項做爲key值）。一般爲：

 

ESLint：

{
  "vue/require-v-for-key": "error"
}

 

四、不要把 v-if 和 v-for 用在同一個元素上——由於v-for 比 v-if 具備更高的優先級。

 

ESLint：

{
  "vue/no-use-v-if-with-v-for": ["error", {
    "allowUsingIterationVar": false
  }]
}

 

五、爲單文件組件樣式設置做用域，傾向於選用基於 class 的策略（css modules）而不是 scoped 特性。一般爲：

六、把每一個組件單獨拆分紅文件，即一個組件爲一個.vue文件。

七、在單文件組件、字符串模板和 JSX 中沒有內容的組件應該是自閉合的（自閉合組件表示它們不只沒有內容，並且刻意沒有內容）——但在 DOM 模板裏永遠不要這樣作。

八、多個特性的元素應該分多行撰寫，每一個特性一行。一般爲：

 

ESLint：

{
  "vue/max-attributes-per-line": ["error", {
    "singleline": 1,
    "multiline": {
      "max": 1,
      "allowFirstLine": false
    }
  }]
}

 

九、組件模板應該只包含簡單的表達式，複雜的表達式則應該重構爲計算屬性或方法。例如：

十、應該把複雜計算屬性分割爲儘量多的更簡單的屬性——易於測試、閱讀、更好的「擁抱變化」（需求變動時重構量小）。例如：

十一、非空 HTML 特性值應該始終帶引號 (單引號或雙引號，選你 JS 裏不用的那個)。

十二、指令縮寫 (用 : 表示 v-bind: 和用 @ 表示 v-on:) 應該要麼都用要麼都不用。

 

ESLint：

{
  "vue/v-bind-style": ["error", "shorthand"],
  "vue/v-on-style": ["error", "shorthand"]
}

 

如下包括Vue官網表示推薦的

---

一、組件/實例的選項的順序

• name
• components
• mixins
• props
• data
• computed
• watch
• 生命週期鉤子 (按照它們被調用的順序)

　　　　beforeCreate

　　　　created

　　　　beforeMount

　　　　mounted

　　　　beforeUpdate

　　　　updated

　　　　activated

　　　　deactivated

　　　　beforeDestroy

　　　　destroyed

• methods

 

ESLint：

{
  "vue/order-in-components": ["error", {
    "order": [
      "el",
      "name",
      "parent",
      "functional",
      ["delimiters", "comments"],
      ["components", "directives", "filters"],
      "extends",
      "mixins",
      "inheritAttrs",
      "model",
      ["props", "propsData"],
      "data",
      "computed",
      "watch",
      "LIFECYCLE_HOOKS",
      "methods",
      ["template", "render"],
      "renderError"
    ]
  }]
}

 

二、元素/組件特性的順序

• v-for
• v-if
• v-else-if
• v-else
• v-show
• id
• ref
• key
• slot
• v-model
• 其餘特性（全部普通的綁定或未綁定的特性）
• v-on

 

ESLint：

{
  "vue/attributes-order": ["error", {
    "order": [
      "DEFINITION",
      "LIST_RENDERING",
      "CONDITIONALS", 
      "RENDER_MODIFIERS",
      "GLOBAL", 
      "UNIQUE", 
      "TWO_WAY_BINDING", 
      "OTHER_DIRECTIVES", 
      "OTHER_ATTR", 
      "EVENTS", 
      "CONTENT"
    ]
  }]
}

 

三、組件/實例選項中的空行

 

四、單文件組件頂級元素的順序

• <script>/* ... */</script>
• <template>...</template>
• <style>/* ... */</style>

或

• <template>...</template>
• <script>/* ... */</script>
• <style>/* ... */</style>

 

如下包括Vue官網表示謹慎使用的

---

一、沒有在 v-if/v-else-if/v-else 中使用 key；

二、元素選擇器在 scoped 中出現（儘量選用類選擇器）；

三、隱性的父子組件通訊（應該優先經過 prop 和事件進行父子組件之間的通訊，而不是 this.$parent 或改變 prop，理想狀態是prop 向下傳遞，事件向上傳遞的）；

四、應該優先經過 Vuex 管理全局狀態，而不是經過 this.$root 或一個全局事件總線；

 

參考資料

vue官方風格指南：https://cn.vuejs.org/v2/style-guide/

eslint-plugin-vue：https://eslint.vuejs.org/rules/