一、vue語法高亮

1.1 安裝Vetur

1. 建立.vue檔案, 寫些程式碼, 發現一片漆黑

2. 安裝啟用vetur外掛, 程式碼就有高亮了. 右鍵選單還會變多一些, 主要多了個格式化文件.

這裡配置了多個格式化的，所以會有多個。

看下vetur的特性: 語法高亮, 程式碼片段(emmet給我的感覺是一個寫好了的snippet), 質量提示&錯誤、格式化/風格、智慧提示等。

對於這些功能可以檢視官方文件。

1.2 Vetur提示

質量提示&錯誤之——提示即Lint

紅色圈起來的. 第一個連結, 赫然看見

Install ESLint plugin for the best linting experience. Vetur's template linting is only for quick start and does not support rule configuration.

vetur 的程式碼提示不支援任何配置, 建議安裝ESLint.

格式化/風格——後面還會講

1. Vetur只支援整個文件格式化, 不支援選中某個片段格式化
2. Vetur內嵌瞭如下格式化工具, 如果本地安裝了相應版本, 則會使用本地安裝的版本, 預設配置如圖

• • prettier: For css/scss/less/js/ts.
  • prettier-eslint: For js. Runprettierandeslint --fix.
  • prettyhtml: For html.
  • stylus-supremacy: For stylus.
  • vscode-typescript: For js/ts. The same js/ts formatter for VS Code.
  • sass-formatter: For the .sass section of the files.

這裡, 說一句:

• ESLint主要負責: 質量檢查(例如使用了某個變數卻忘記了定義)、風格檢查
• 後面用到的Prettier主要負責: 風格檢查, 沒有質量檢查

二、安裝ESLint

1. 安裝npm包

npm install -D eslint

2. 安裝ESLint外掛

這時候, ESLint其實已經可以用了, 例如

Vetur也繼續可用

3. 啟用ESLint

.vscode/settings.json檔案(或者 code-》首選項-》設定-》工作區JSON)加入如下配置

  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "vue",
      "autoFix": true
    },
  ]

有如下提示. 因為autoFix預設是啟用的. 改一下就行

反正, ESLint 已經能夠對<template>和<script> 進行提示了

三、 安裝 eslint-plugin-vue

vetur預設集成了一個eslint-plugin-vue版本來對<template>提示.

也可自己安裝一個新的版本. 如果自己安裝一個新的版本, 那麼配置過程如下:

1. .vscode/settings.json檔案, 配置

vetur.validation.template: false

2. 安裝eslint-plugin-vue外掛

npm install -D eslint-plugin-vue

3. 配置.eslintrc檔案, 配置方法也可以參考連結[link](https://github.com/octref/veturpack)

{
  "extends": [
    "eslint:recommended",
    "plugin:vue/recommended"
  ],
  "rules": {
    "vue/html-self-closing": "off"
  }
}

說明: eslint-plugin-vue把所有規則分為四個類別，依次為：base, essential, strongly-recommended, recommended, 連結 https://vuejs.github.io/eslint-plugin-vue/rules/

四、vetur-設定風格工具

vetur的預設程式碼風格工具如下. 前面截圖過

1 2 3 4 5 6 7 8 9

"vetur.format.defaultFormatter.html":"prettyhtml", "vetur.format.defaultFormatter.css":"prettier", "vetur.format.defaultFormatter.postcss":"prettier", "vetur.format.defaultFormatter.scss":"prettier", "vetur.format.defaultFormatter.less":"prettier", "vetur.format.defaultFormatter.stylus":"stylus-supremacy", "vetur.format.defaultFormatter.js":"prettier", "vetur.format.defaultFormatter.ts":"prettier", "vetur.format.defaultFormatter.sass":"sass-formatter"

• 你可以完全關閉vetur, 而使用prettier. 我不建議這樣做.
• 有2個配置可以被格式化繼承,但是當.prettierrc和.eslintrc.js存在時,他會被覆蓋.

  "vetur.format.options.tabSize": 2,
  "vetur.format.options.useTabs": false

我們拷貝一份到“使用者設定”中.

五、vetur-設定風格

上面知道 vetur 可以設定不同的風格，這些風格可以共存也可以只設置為某一種，下面就是設定風格為：js-beautify-html 的具體配置
1. 把 “"vetur.format.defaultFormatter.html": "prettyhtml",”修改成

"vetur.format.defaultFormatter.html": "js-beautify-html", 如下圖

2. 設定風格

"vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
        // js-beautify-html settings here

　　"wrap_attributes":"auto",//屬性強制折行對齊 　　"wrap_line_length":0, // 設定一行多少字元換行，設定為 0 表示不換行 　　//"end_with_newline":true 　　"semi":false,　　　　　　　 // 　　"singleQuote":true　　　　 // 單引號

    }
}

怎麼配置呢,這裡是線上配置介面beautifier,配置完, 把配置貼過來,效果就有了

六、儲存自動格式化

下面是對自動儲存時格式化的設定：

  "editor.formatOnSave": true, // 在儲存時自動格式化
  "editor.formatOnType": false, // 在鍵入一行後是否自動化格式
  "editor.formatOnPaste": true, // 在貼上時自動格式化
  "editor.wordWrap": "off", // 換行規則，off 永不換行
  "editor.detectIndentation": false, // vscode 預設是啟用根據檔案型別自動設定 tabSize 的值
  // 儲存時按照哪個規則進行格式化
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },

七、vetur-prettier風格

1. 設定prettier風格, 可以在.vscode/settings.json檔案, 如下. 或者建立個.prettierrc.js檔案. (在 .settings.json 配置的prettier風格, 有些老專案會不生效, 我也不知道為啥咯, 所以還是建議單獨配置)

"vetur.format.defaultFormatterOptions": {

　　"prettier": { 　　　　// Prettier option here 　　　　"trailingComma": "es5", // 多行時，儘可能列印尾隨的逗號 　　　　"tabWidth": 4, // 會忽略vetur的tabSize配置 　　　　"useTabs": false, // 是否利用tab替代空格 　　　　"semi": true, // 句尾是否加; 　　　　"singleQuote": true, // 使用單引號而不是雙引號 　　　　"arrowParens": "avoid", // allow paren-less arrow functions 箭頭函式的引數使用圓括號 　　}

}

對於 prettier 的配置可以看這裡：Prettier

2. vscode的tab縮排可以設定如下.

3.在“.prettierrc.js”中配置風格, vue檔案可以格式化, 不支援js檔案, 需要單獨安裝外掛

八、prettier和ESLint衝突

1. 我們要安裝2個外掛

• 安裝eslint-config-prettier

1) 禁用一些eslint和prettier衝突的規則, Turns off all rules that are unnecessary or might conflict with Prettier.可以參考這裡：eslint-config-prettier

• 安裝eslint-plugin-prettier.呼叫prettier 格式化程式碼，然後與格式化前對比，如果不一致，這個地方就會被prettier 進行標記。

1) 可以將prettier的規則設定為eslint的規則，對不符合規則的進行提示。（與eslint-plugin-vue相同）github link.

2) 使用 ESLint 與 eslint-plugin-prettier 的結果是最終得到的程式碼是充分尊重 Prettier 的結果

不用的方案)prettier-eslint-cli 是先執行prettier,再自動使用 eslint --fix 將與 ESLint 規則衝突的程式碼修正成 ESLint 想要的. 這樣引入 Prettier 不會影響原有的設定. 但是我們不用.

2. 怎麼配置

eslint-config-* ，配置時寫成: 注意:確保將它放在 extends 陣列的最後

extends: 'prettier' // 使用的時候需要確保，這個配置在extends的最後一項。例如以下形式:

//.eslintrc.js
{
  extends: [
    'standard', // 使用standard做程式碼規範
    "prettier",
  ],
}

自定義規則使用eslint-plugin-* 的命名，使用時寫成

1 2 3 4

plugins: ["prettier"], rules: { "prettier/prettier":"error"// 表示被 prettier 標記的地方丟擲錯誤 }

上面兩項配置可以簡化成

{
  "extends": ["plugin:prettier/recommended"]
}

然後儲存時, 和prettier衝突的就不會調整了.

九、vue script首行縮排問題

可能是專案開始用的不是vscode工具, 例如webstorm. 所以<script><script>中首行縮進了2個空格.

如果還在用webstorm, 建議配置下webstorm的首行縮排, vscode就不升級外掛了. 採用首行不縮排格式.