插件

前端与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 导入的包的大小
Path Intellisense: 文件路径提示

其他：

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",
  "editor.tabSize": 2,
  "explorer.confirmDelete": false,
  "explorer.confirmDragAndDrop": false,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "workbench.iconTheme": "file-icons-mac",
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      // force-aligned | force-expand-multiline
      "wrap_attributes": "force-aligned"
    },
    "prettyhtml": {
      "printWidth": 100,
      "singleQuote": false,
      "wrapAttributes": false,
      "sortAttributes": true
    },
    "prettier": {
        "semi": true,
        "singleQuote": true
    }
  },
  "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"
  },
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
}

到此配置结束了，下面是其他内容

其他

一下内容都针对 macos 下的 VSCode, Windows 会有少许差异(比如文件路径不一样)

1. VSCode 插件安装位置 ~/.vscode/extensions
2. VSCode 个人设置打开方式 Code -> Preferences -> Settings -> settings.json

VSCode 配置打开方式