自己正在使用的 VSCode for Vue 配置

插件

前端與Vue 相關：

Vetur: 格式化Vue文件
Vue 2 Snippets: 代碼快速生成
Auto Rename Tag: HTML/XML 修改
ESLint
Bracket Pair Colorizer: 給花括號添加顏色
Open HTML in Default Brower: 右鍵使用遊覽器打開HTML
Prettier: 格式化 CSS, js, md
Import Cost: 顯示 import 導入的包的大小

其他：

sftp: ftp 上傳工具
Todo Tree: 查看 TODO
filesize: 顯示文件大小
file-icons-mac: 文件圖標
File Utils: 快速操作文件(創建文件/刪除文件)
Debugger for Chrome
GitLens: git功能擴展

默認：尾部加分號，單眼號

配置設置

{
  "terminal.integrated.fontFamily": "Meslo LG M DZ for Powerline",
  "explorer.confirmDelete": false,
  "explorer.confirmDragAndDrop": false,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "workbench.iconTheme": "file-icons-mac",
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "prettier.tabWidth": 2,
  "prettier.singleQuote": true,
  "prettier.trailingComma": "es5",
  "prettier.eslintIntegration": true,
  "[jsonc]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
}

到此配置結束了，下面是其他內容

其他

一下內容都針對 macos 下的 VSCode, Windows 會有少許差異(比如文件路徑不一樣)

1. VSCode 插件安裝位置 ~/.vscode/extensions
2. VSCode 個人設置打開方式 Code -> Preferences -> Settings -> settings.json