Vue 全宇宙最浪 VSCode 配置、插件

別人的那一堆配置、插件我就不寫了～

首先進入官網下載並安裝。

基本配置

• 在編譯器 文件 >> 首選項 >> 設置，能夠拷貝相面的選項後搜索相關配置
• 設置製表符等於空格數爲 2： "editor.tabSize": 2
• 設置文件末尾增長新行："files.insertFinalNewline": true
• 默認換行符："files.eol": "n
• 保存文件剪切尾隨空格："files.trimTrailingWhitespace": true
• 文件字符集編碼： "files.encoding": "utf8"

使用配置文件

項目跟路徑增長配置文件 .vscode/settings.json

將你的編輯器按照下面的配置進行設置，以免常見的代碼不一致和差別：

用兩個空格代替製表符（soft-tab 即用空格表明 tab 符）。
保存文件時，刪除尾部的空白符。
設置文件編碼爲 UTF-8。
在文件結尾添加一個空白行。

{
  "editor.tabSize": 2,
  "files.insertFinalNewline": true,
  "files.eol": "\n",
  "files.trimTrailingWhitespace": true,
  "eslint.autoFixOnSave": true,
  "editor.formatOnSave": true,
  "eslint.validate": [
    "javascript",
    {
      "language": "vue",
      "autoFix": true
    },
    "html"
  ],
  "prettier.stylelintIntegration": true,
  "prettier.eslintIntegration": true,
  "vetur.format.defaultFormatter.html": "prettier",
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "semi": true,
      "singleQuote": true,
      "arrowParens": "always",
      "trailingComma": "es5"
    }
  },
  "path-intellisense.mappings": {
    "@/": "${workspaceRoot}/src/"
  }
}

增長 .editorconfig 文件

# editorconfig.org

root = true

[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true

必要的插件

https://marketplace.visualstudio.com/

• Prettier - Code formatter：代碼格式化 https://prettier.io/
• htmlhint：html 語法檢查 https://github.com/htmlhint/HTMLHint
• ESLint：javascript 語法檢查 https://eslint.org/

"prettier.eslintIntegration": true,

• stylelint：css 語法檢查 https://stylelint.io/

"prettier.stylelintIntegration": true

Vetur：vue 開發工具，增長如下配置 https://vuejs.github.io/vetur/formatting.html#formatters

"eslint.validate": [
    "javascript",
    "javascriptreact",
    {
        "language": "vue",
        "autoFix": true
    },
],
"vetur.validation.template": false,
"vetur.format.defaultFormatter.html": "prettyhtml"

處理 prettier 格式化配置

"vetur.format.defaultFormatterOptions": {
  "prettier": {
    "semi": true,
    "singleQuote": true,
    "arrowParens": "always"
  }
},

若是須要，路徑 @/component/HelloWorld.vue eslint 解析出錯時增長一下配置：

settings: {
  "import/resolver": {
    webpack: {
      config: {
        resolve: {
          alias: {
            '@': path.resolve('src'),
          }
        }
      }
    },
  },
},

• vscode-icons：文件類型 icon
• Path Intellisense：自動路勁補全
• markdownlint：markdown 語法檢查
• Settings Sync：編輯器配置、插件不一樣設備間同步
• Live Server：web 服務器
• vim：vim 方式開發（可選）
• svn：Subversion source control for VS Code
• px2rem：轉換 css 樣式的 px 爲 rem 單位
• sftp：sftp sync extension for VS Code
• Import Cost：測量引入組件包大小，Vue 單文件組件須要增長如下配置：

"importCost.javascriptExtensions": [
    "\\.jsx?$",
    "\\.vue?$"
],

備註

eslint 自動處理語法問題：

Ctrl+Shift+p

輸入：eslint:fix all

回車後 eslint 會自動處理一些語法問題