VS Code 保存時按eslint規範格式化代碼(for vue typescript)

在寫Vue & TypeScript 初體驗相關的示例代碼時, 在VS Code保存時總能不自動格式化代碼, 全部的出錯都得本身手工處理(沒養成良好的編碼習慣), 非常麻煩, 因而想着怎麼解決這個問題.

前提條件

1. VS Code插件

• ESlint, Javascript代碼檢測工具，能夠配置每次保存時格式化js，但每次保存只格式化一點點，需連續按住屢次保存才能格式化好全部代碼.
• Vetur, 可格式化html、css、js、vue文件
• Prettier - Code formatter, 只關注格式化，並不具備eslint檢查語法等能力，只關心格式化文件(最大長度、混合標籤和空格、引用樣式等)，包括JavaScript · Flow · TypeScript · CSS · SCSS · Less · JSX · Vue · GraphQL · JSON · Markdown等.

2. VS Code settings.json配置

當前使用的配置是

{
    "files.autoSave": "off",
    "files.autoSaveDelay": 1000,
    "emmet.syntaxProfiles": {
      "vue-html": "html",
      "vue": "html"
    },
    
    "eslint.autoFixOnSave": true,
    "prettier.semi": true, //去掉代碼結尾的分號
    "prettier.singleQuote": true, //使用帶引號替代雙引號
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true, //讓函數(名)和後面的括號之間加個空格
    "vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html
    "vetur.format.defaultFormatter.js": "vscode-typescript", //讓vue中的js按編輯器自帶的ts格式進行格式化
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "force-aligned" //屬性強制折行對齊
        }
    },
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
          "language": "html",
          "autoFix": true
        },
        {
          "language": "vue",
          "autoFix": true
        }
      ],
  "eslint.options": {
      "plugins": ["html"]
  },
     //爲了符合eslint的兩個空格間隔原則
    "editor.tabSize": 2,
    "eslint.enable": true,
    "workbench.colorTheme": "Solarized Light",
    "vetur.format.defaultFormatter.ts": "vscode-typescript",
    "vetur.format.defaultFormatter.css": "prettier",
    "prettier.disableLanguages": [],
    "prettier.tabWidth": 4,
    "files.associations": {
      "*.wpy": "vue"
    },
    "[javascript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "breadcrumbs.enabled": true,
    "vsicons.dontShowNewVersionMessage": true
}
複製代碼

3. 依賴包

需安裝eslint, 不建議使用全局的方式安裝, 這樣沒法保證項目成員全部人可以開箱即用.

yarn add eslint --dev
yarn add eslint-friendly-formatter --dev
yarn add eslint-plugin-html --dev
yarn add eslint-plugin-vue --dev
複製代碼

4. 排錯

若是安裝好各類插件和依賴後, 依賴沒法自動格式化好代碼, 能夠嘗試如下步驟:

1. 重啓VS Code
2. 從新運行本地開發服務器
3. 查看VS Code中運行的任務ESlint的輸出是否有出錯, 若是有, 請按提示處理. 以下圖所示:

   

說明缺乏eslint-plugin-html依賴包(多是忘安裝了), yarn add eslint-plugin-html --dev安裝下便可.

5. 相關連接

• Vetue
• js-beautify-html