settings.json & 常用插件 & 用户代码片段

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：允许预览 svg ;false:不允许预览 svg
  "vsicons.dontShowNewVersionMessage": true,
  "workbench.startupEditor": "welcomePage",
  "gitlens.advanced.blame.customArguments": [],
  // less 设置
  "less.compile": {
    "compress": false, // 是否压缩
    "sourceMap": false, // 是否生成map文件，有了这个可以在调试台看到less行数
    "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

用户代码片段设置

文件 → 首选项 → 用户片段 → 可新增也可编辑

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"
  }
}

代码自动换行到可视区内

文件=>首选项=>设置：

Editor:World Wrap 将off修改为on即可