前端工程化（1）：VSCode中編寫Vue代碼的最佳姿式

網上有一大堆關於格式化vue代碼的方法，但基本都配合使用了prettier格式化插件，相信搗鼓過的同窗確定會跟我同樣都有一種感覺：雜亂！prettier插件在使用的時候須要與eslint配合使用，二者在一塊兒使用的話不只會產生衝突（你須要額外在prettier規則配置裏配置上和eslint同樣的規則），並且二者功能重疊（二者在一塊兒工做的原理也是在eslint --fix之後再用prettier去格式化代碼）。eslint --fix已經能幫你格式化出一套漂亮的vue代碼，再用prettier就顯得畫蛇添足。

其實，要想統一併寫出一手漂亮的vue代碼，最簡單直接的辦法就是按照vue官方提供的vue風格指南，配合官方提供的配套的校驗插件 eslint-plugin-vue，再在VSCode中安裝vetur和eslint插件便可。

1. Vetur

vetur 是vue官方提供的支持vue編寫風格的VSCode插件。具體的安裝很簡單，這裏我就介紹幾個vetur經常使用的功能：

vue 代碼高亮

支持多種語言，包括但不侷限於ts、coffee。

快速生成代碼片斷

當你新建一個vue文件時，你能夠經過輸入scaffold快速生成以下代碼：

<template>
  
</template>

<script>
export default {

}
</script>

<style>

</style>
複製代碼

或者經過輸入template、script、style，生成相應的html、script、style代碼。

使用縮寫語法快速編寫 html、css 等

vetur集成了 emmet 插件，好比輸入div.a回車就變成<div class="a"></div>。emmet還有不少功能，想要了解更多的同窗能夠上emmet官網逛逛。

靜態檢查代碼錯誤

可以靜態的檢測template、script、style中的語法錯誤。

格式化代碼

vetur官方建議配合prettier來進行代碼格式化，但本文並不採起prettier來進行代碼的格式化，有興趣的同窗能夠去瀏覽vetur官網。

智能提示

vetur集成了vue的語法，因此當你在編寫一些vue具備的指令、事件或者生命週期等一切屬於vue的語法時，都會對你進行智能化的提示，從而讓你快速的編寫出vue代碼。

框架支持

vetur還對一些框架有支持，好比vue-router、element-ui等，能給這些框架提供自動補全屬性的功能。

2. VSCode 中的 eslint

VSCode中的eslint插件將使用安裝在當前打開的工做區文件夾中的eslint庫，也就是會讀取你當前項目的eslint配置信息。若是你的eslint配置是寫在.eslintrc.js文件中，則VSCode中的eslint插件將會讀取.eslintrc.js文件的配置信息來對你的代碼作靜態分析，並標記出不符合規範的代碼片斷。

安裝完eslint插件之後，咱們須要在VSCode配置中添加幾個選項：

"eslint.validate": [
    "javascript",
    "javascriptreact",
    {
        "language": "vue",
        "autoFix": true
    }
], 
"eslint.autoFixOnSave": true 
複製代碼

配置好這兩個選項後，VSCode就能靜態的對vue代碼進行檢查，並提示有不符合規範的地方，而且當文件保存時，將自動修復不符合規範的地方。

3. 代碼中的 eslint

代碼中不只須要js的eslint還須要vue的eslint。

安裝

npm install --save-dev eslint eslint-plugin-vue
複製代碼

eslint-plugin-vue這個插件的做用是能用eslint按照官方提供的風格指南來校驗.vue文件的template和script裏的代碼。eslint-plugin-vue提供了一系列的規則供開發者們參考。

配置

根目錄下新建.eslintrc.js文件，並寫入：

module.exports = {
  extends: [
    // add more generic rulesets here, such as:
    'eslint:recommended',
    'plugin:vue/essential'
  ],
  rules: {
    // override/add rules settings here, such as:
    // 'vue/html-self-closing': 'off'
  }
}
複製代碼

配合第二步，VSCode就能夠按照vue風格指南對.vue文件的script片斷進行eslint和vue風格指南靜態校驗。

雖然script片斷統一了風格，可是每一個人寫template的風格也不同，若是還想約束並校驗template的風格，則將上述的配置修改成：

module.exports = {
  extends: [
    ...,
    'plugin:vue/recommended'
  ]
}
複製代碼

當你修改保存時，VSCode就會對你代碼裏的template和script裏的代碼進行eslint自動修復。

4. VSCode 中的 stylelint

同VSCode中的eslint同樣，stylelint也將會按照你工做區中的stylelint配置文件對代碼中的樣式作靜態檢查，並標記不符合規範的代碼片斷。

在VSCode中安裝完插件之後，stylelint建議咱們作以下配置，來防止其餘報錯衝突：

"css.validate": false,
"scss.validate": false,
"less.validate": false
複製代碼

遺憾的是，stylelint不能提供保存自動修復的功能。

5. 代碼中的 stylelint

安裝

npm install --save-dev stylelint stylelint-standard stylelint-recommended-scss
複製代碼

配置

根目錄下新建.stylelintrc.js文件，並寫入：

module.exports = {
  'extends': [
    // add more generic rulesets here, such as:
    'stylelint-config-standard',
    "stylelint-config-recommended-scss"
  ],
  'rules': {
    // override/add rules settings here, such as:
    // 'declaration-block-semicolon-newline-after': 'always' // 不容許多條 css 規則寫在一行
  }
}
複製代碼

因爲VSCode不能在保存的時候自動修復不合規範的樣式代碼，因此咱們能夠經過兩種方式來修復：

npm scripts 腳本

在package.json中配置：

"lintstyle": "stylelint 'src/**/*.{vue,css,scss,sass}' --fix"
複製代碼

執行npm run lintstyle指令就能修復指定文件的不合規範的樣式代碼。

webpack

在vue-cli3中安裝 @ascendancyy/vue-cli-plugin-stylelint 插件，而後在vue.config.js文件中配置：

pluginOptions: {
  lintStyleOnBuild: true, // 構建時是否檢查錯誤
  stylelint: {
    fix: true, // 構建時是否自動修復
    files: ['src/**/*.{vue,htm,html,css,sss,less,scss}']  // 指定文件
  }
}
複製代碼

項目啓動的時候會檢查不合樣式規範的代碼並修復，而且在每次修改保存後，觸發構建的同時，也將修復代碼中不合規範的樣式。

最後

本文的目的也是爲了讓用VSCode開發Vue的同窗們再也不被其餘的插件搞得亂七八糟，只須要eslint和stylelint，不須要下載額外的格式化插件，也不須要額外的繁瑣的配置，按照上述幾步，就能很輕鬆的格式化出一套統一標準的Vue代碼。