settings.json

{
  "files.autoSave": "afterDelay",
  "eslint.packageManager": "yarn",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue"
  ],
  "editor.renderWhitespace": "none",
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "gitlens.advanced.messages": {

    "suppressGitVersionWarning": true
  },
  "editor.renderIndentGuides": false,
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "semi": true, // 要分號
      "singleQuote": true // 要單引號
    }
  },
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "[less]": {
    "editor.defaultFormatter": "michelemelluso.code-beautifier"
  },
  "editor.detectIndentation": false,
  "editor.tabSize": 2,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "files.eol": "\n",
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "terminal.integrated.shell.windows": "C:\\windows\\System32\\cmd.exe",
  "window.zoomLevel": 1,
  "gitlens.advanced.fileHistoryFollowsRenames": false,
  "git.enableSmartCommit": true,
  "[jsonc]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "liveServer.settings.donotShowInfoMsg": true,
  "[dockerfile]": {
    "editor.quickSuggestions": {
      "strings": true
    }
  },
  "settingsSync.ignoredExtensions": [],
  "files.exclude": {
    // "**/node_modules": true   // true 時會隱藏node_modules文件
  },
  "explorer.confirmDelete": false,
  "svgviewer.enableautopreview": false,  // true：允許預(yù)覽 svg ;false:不允許預(yù)覽 svg
  "vsicons.dontShowNewVersionMessage": true,
  "workbench.startupEditor": "welcomePage",
  "gitlens.advanced.blame.customArguments": [],
  // less 設(shè)置
  "less.compile": {
    "compress": false, // 是否壓縮
    "sourceMap": false, // 是否生成map文件，有了這個可以在調(diào)試臺看到less行數(shù)
    "out": false, // 是否輸出css文件，false為不輸出
  },
  "workbench.colorTheme": "One Dark Pro",
}

常用的 VScode 插件

1. Auto Close Tag
2. Auto Import
3. Auto Rename Tag
4. Beautify css/sass...
5. browser-tab
6. Chinese
7. Easy LESS
8. ESLint
9. GitLens git 工具
10. Guides
11. HTML CSS Support
12. HTML Snippets
13. indent-rainbow
14. JavaScript (ES6) code snippets
15. Live Server
16. One Dark Pro
17. open in browser
18. Path Intellisense
19. Rainbow Brackets
20. Smarty
21. SVG Viewer
22. Vetur
23. vscode-icons
24. Browser Preview
25. Simple React Snippets

用戶代碼片段設(shè)置

文件 → 首選項 → 用戶片段 → 可新增也可編輯

eg：自定義 vue 片段

{
    // Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
    // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
    // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
    // used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
    // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
    // Placeholders with the same ids are connected.
    // Example:
    // "Print to console": {
    //  "scope": "javascript,typescript",
    //  "prefix": "log",
    //  "body": [
    //      "console.log('$1');",
    //      "$2"
    //  ],
    //  "description": "Log output to console"
  // }
  "vue": {
    "prefix": "vue",
    "body": [
        "<template>",
        "  <div>",
        "",
        "  </div>",
        "</template>",
        "",
        "<script>",
        "export default {",
        "  name: '',",
        "  components: {},",
        "  data() {",
        "    return {};",
        "  },",
        "};",
        "</script>",
        "",
        "<style lang='less' scoped>",
        "</style>",
        "",
    ],
    "description": "generate a vue file"
  }
}

代碼自動換行到可視區(qū)內(nèi)

文件=>首選項=>設(shè)置：

Editor:World Wrap 將off修改為on即可