概述

Visual Studio Code (簡稱 VS Code / VSC) 是一款免費開源的現代化輕量級代碼編輯器，支持幾乎所有主流的開發語言的語法高亮、智能代碼補全、自定義熱鍵、括號匹配、代碼片段、代碼對比 Diff、GIT 等特性，支持插件擴展，並針對網頁開發和雲端應用開發做了優化。軟件跨平台支持 Win、Mac 以及 Linux。

vscode 官網：
https://code.visualstudio.com/

1、下載VSCode

打開瀏覽器輸入
https://code.visualstudio.com/(進入到官網),點擊下載，可以根據自己的操作系統進行下載。

下載地址：
https://vscode.cdn.azure.cn/stable/e5a624b788d92b8d34d1392e4c4d9789406efe8f/VSCodeUserSetup-x64-1.51.1.exe

2、VSCODE安裝

下圖為確認安裝過程，安裝成功後啟動VSCode：

3、VSCode安裝插件

Chinese (Simplified) Language Pack for Visual Studio Code（配置顯示語言「zh-cn」）、

Vetur、stylelint、Sass、Prettier – Code formatter、GitLens–Git supercharged、ESLint、EditorConfig for VS Code、Debugger for Chrome、Debugger for Java、Code Runner、Auto Rename Tag

》》重啟之後

4、自定義配置

打開文件->首選項->設置，就會進入到 settings.json 文件中，以下是自定義配置：

{
  "git.confirmSync": false,
  "git.autofetch": true,
  "git.checkoutType": "remote",
  "git.enableSmartCommit": true,
  "files.autoSave": "onFocusChange",
  "files.associations": {
    "*.vue": "vue",
    "*.wpy": "vue",
    "*.wxml": "wxml",
    "*.wxss": "css",
    "*.js": "javascript",
    "*.html": "html",
    "*.cjson": "jsonc",
    "*.wxs": "javascript"
  },
  "emmet.syntaxProfiles": {
    "vue-html": "html",
    "vue": "html"
  },
  "emmet.includeLanguages": {
    "wxml": "html"
  },
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    },
    {
      "autoFix": true,
      "language": "javascript"
    },
    {
      "autoFix": true,
      "language": "javascriptreact"
    },
    {
      "autoFix": true,
      "language": "typescript"
    },
    {
      "autoFix": true,
      "language": "typescriptreact"
    }
  ],
  "terminal.integrated.shell.windows": "C:\Windows\System32\cmd.exe",
  "window.zoomLevel": 1,
  "explorer.confirmDelete": false,
  "vetur.experimental.templateInterpolationService": false,
  "editor.tabSize": 4,
  "editor.tabCompletion": "on",
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  }
}

5、設置>用戶代碼片段

{
    // Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and 
    // description. 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": {
        "prefix": "log",
        "body": [
            "console.log('$1')",
            "$2"
        ],
        "description": "Log output to console"
    },
    "Print to vue template": {
        "prefix": "vue",
        "body": [
            "<template>",
            "    <div class='page-view'>",
            "      1",
            "    </div>",
            "</template>",
            "      ",
            "<script lang='ts'>",
            "import Vue from 'vue'",
            "export default Vue.extend({",
            "    data() {",
            "      return{}",
            "    },",
            "    methods:{}",
            "});",
            "</script>",
            "      ",
            "<style lang='scss' scoped>",
            ".page-view {",
            "  min-height: 100%;",
            "}",
            "</style>"
        ],
        "description": "Log output to vue template"
    }
}