VS Code配置及插件推薦

用戶設置

打開 文件 > 首選項 > 用戶設置(U)，（忽略覆蓋工做區提示）

{
  // 一個製表符等於的空格數。該設置在 `editor.detectIndentation` 啓用時根據文件內容進行重寫。
  "editor.tabSize": 2,
  "editor.lineHeight": 24,
  "editor.renderLineHighlight": "none",
  "editor.renderWhitespace": "none",
  // 控制字體系列。
  "editor.fontFamily": "'Fira Code', Consolas, 'Courier New', monospace,'宋體'",
  "editor.fontLigatures": true,
  // 以像素爲單位控制字號。
  "editor.fontSize": 14,
  "editor.cursorBlinking": "smooth",
  "editor.wordWrap": "on",
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  // 控制選取範圍是否有圓角
  "editor.roundedSelection": false,
  // 建議小組件的字號
  "editor.suggestFontSize": 16,
  // 是否容許自定義的snippet片斷提示,好比自定義的vue片斷開啓後就能夠智能提示
  "editor.snippetSuggestions": "top",
  "editor.quickSuggestions": {
    "strings": true
  },
  // 執行文字相關的導航或操做時將用做文字分隔符的字符
  "editor.wordSeparators": "./\\()\"':,.;<>~!@#$%^&*|+=[]{}`~?",
  // 在「打開的編輯器」窗格中顯示的編輯器數量。將其設置爲 0 可隱藏窗格。
  "explorer.openEditors.visible": 0,
  "git.path": "D:/Program Files/Git/bin/git.exe",
  // 是否已啓用自動刷新
  "git.autorefresh": true,
  // git是否啓用自動拉取
  "git.autofetch": false,
  // 以像素爲單位控制終端的字號，這是 editor.fontSize 的默認值。
  "terminal.integrated.fontSize": 14,
  // 控制終端遊標是否閃爍。
  "terminal.integrated.cursorBlinking": true,
  "workbench.startupEditor": "newUntitledFile",
  "workbench.iconTheme": "eq-material-theme-icons-palenight",
  "workbench.colorTheme": "Material Theme Palenight High Contrast",
  "materialTheme.fixIconsRunning": false,
  "html.suggest.angular1": false,
  "html.suggest.ionic": false,
  "files.trimTrailingWhitespace": true,
  // VScode 文件搜索區域配置
  "search.exclude": {
    "**/dist": true,
    "**/build": true,
    "**/elehukouben": true,
    "**/.git": true,
    "**/.gitignore": true,
    "**/.svn": true,
    "**/.DS_Store": true,
    "**/.idea": true,
    "**/.vscode": false,
    "**/yarn.lock": true,
    "**/tmp": true
  },
  // 排除文件搜索區域，好比node_modules(貼心的默認設置已經屏蔽了)
  "files.exclude": {
    "**/.idea": true,
    "**/yarn.lock": true,
    "**/tmp": true
  },
  // 配置文件關聯，以便啓用對應的智能提示，好比wxss使用css
  "files.associations": {
    "*.vue": "vue",
    "*.wxss": "css"
  },
  // 配置emmet是否啓用tab展開縮寫
  "emmet.triggerExpansionOnTab": true,
  // 配置emmet對文件類型的支持，好比vue後綴文件按照html文件來進行emmet擴寫
  "emmet.syntaxProfiles": {
    "vue-html": "html",
    "vue": "html",
    "javascript": "javascriptreact",
    // xml類型文件默認都是單引號，開啓對非單引號的emmet識別
    "xml": {
      "attr_quotes": "single"
    }
  },
  // 在react的jsx中添加對emmet的支持
  "emmet.includeLanguages": {
    "jsx-sublime-babel-tags": "javascriptreact"
  },
  // 是否開啓eslint檢測
  "eslint.enable": true,
  // 文件保存時，是否自動根據eslint進行格式化
  "eslint.autoFixOnSave": true,
  // eslint配置文件
  "eslint.options": {
    "plugins": [
      "html",
      "javascript",
      {
        "language": "vue",
        "autoFix": true
      },
      "vue"
    ]
  },
  // eslint可以識別的文件後綴類型
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    "vue",
    {
      "language": "html",
      "autoFix": true
    },
    "typescript",
    "typescriptreact"
  ],
  // 快捷鍵方案,使用sublime的一套快捷鍵
  "sublimeTextKeymap.promptV3Features": true,
  // 格式化快捷鍵 shirt+alt+F
  // prettier進行格式化時是否安裝eslint配置去執行，建議false
  "prettier.eslintIntegration": true,
  //分號
  "prettier.semi": false,
  // 若是爲true，將使用單引號而不是雙引號
  "prettier.singleQuote": true,
  "prettier.tabWidth": 2,
  "prettier.useTabs": false,
  // vetur插件格式化使用beautify內置規則
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  //函數前加空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  // 沒有下邊這個 上邊不生效
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  // 細節,配置gitlen中git提交歷史記錄的信息顯示狀況
  "gitlens.advanced.messages": {
    "suppressCommitHasNoPreviousCommitWarning": false,
    "suppressCommitNotFoundWarning": false,
    "suppressFileNotUnderSourceControlWarning": false,
    "suppressGitVersionWarning": false,
    "suppressLineUncommittedWarning": false,
    "suppressNoRepositoryWarning": false,
    "suppressResultsExplorerNotice": false,
    "suppressUpdateNotice": true,
    "suppressWelcomeNotice": false
  },
  // 對不屬於任何工程的 JavaScript 文件啓用或禁用 "experimentalDecorators" 設置。如有 jsconfig.json 或 tsconfig.json 文件，將覆蓋此設置。要求工做區使用高於 2.3.1 版本的 TypeScript。
  "javascript.implicitProjectConfig.experimentalDecorators": true,
  "powermode.enabled": true,
  "powermode.presets": "flames",
  // 開啓apicloud在vscode中的wifi真機同步
  "apicloud.port": "23450",
  // 設置apicloud在vscode中的wifi真機同步根目錄
  "apicloud.subdirectories": "/apiclouduser",
  "terminal.integrated.shell.windows": "C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe"
}

---

用戶代碼片斷

打開 文件 > 首選項 > 用戶代碼片斷 > （搜索代碼語言）

HTML片斷

{
    "ss": {
        "prefix": "ss",
        "body": [
            "<script src=\"$1\"></script>"
        ],
        "description": "<script src=\"...\"></script>"
    },
    "html5": {
        "prefix": "html5",
        "body": [
            "<!DOCTYPE html>",
            "<html lang=\"zh-CN\">",
            "",
            "<head>",
            "  <meta charset=\"UTF-8\">",
            "  <meta name=\"viewport\" content=\"width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0\">",
            "  <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
            "  <title>${1:Document}</title>",
            "</head>",
            "",
            "<body>",
            "  $2",
            "</body>",
            "",
            "</html>"
        ],
        "description": "HTML5"
    }
}

JavaScript / JavaScript React

{
    "cl": {
        "prefix": "cl",
        "body": [
            "console.log($1)"
        ],
        "description": "console.log('')"
    },
    "dg": {
        "prefix": "dg",
        "body": [
            "document.getElementById($1)"
        ],
        "description": "document.getElementById(id)"
    },
    "jsdoc": {
        "prefix": "__",
        "body": [
            "/**",
            " * $1",
            " */"
        ],
        "description": "/** */"
    }
}

---

快捷鍵設置

// 將鍵綁定放入此文件中以覆蓋默認值
[
    // ctrl+shift+d 複製當前行到下一行
    {
        "key": "ctrl+shift+d",
        "command": "editor.action.copyLinesDownAction",
        "when": "editorTextFocus && !editorReadonly"
    },
    // ctrl+shift+f 格式化代碼
    {
        "key": "ctrl+shift+f",
        "command": "editor.action.formatDocument",
        "when": "editorHasDocumentFormattingProvider && editorTextFocus && !editorReadonly"
    },
    // alt+/ 代碼提示
    {
        "key": "alt+/",
        "command": "editor.action.triggerSuggest",
        "when": "editorTextFocus"
    },
    // ctrl+shift+/ 多行註釋
    {
        "key": "ctrl+shift+/",
        "command": "editor.action.blockComment",
        "when": "editorTextFocus"
    }
]

插件推薦

提示：VS Code自帶有代碼格式化功能，能夠格式化HTML、CSS、JavaScript、JSON文件，格式JSX文件時須要設置縮進方式爲空格·

Auto Close Tag （自動關閉HTML標籤）
Auto Rename Tag (HTML標籤自動更名)
Babel ES6/ES7 
VS Code JavaScript (ES6) snippets (ES6語法提示)
Beautify css/sass/scss/less
Brackets Light (主題)
Complete JSDoc Tags (js文檔註釋提示)
Git History (查看git提交記錄)
HTML CSS Support (HTML中提示可用的class)
npm Intellisense (提示能夠require的模塊名稱(最新版的vscode已經集成此功能))
One Dark Theme (主題)
Path Intellisense (路徑補全)
Prettier (格式化，使用標準風格，快捷鍵 alt+shift +F)
Reactjs code snippets (reactjs代碼提示)
Sass
SCSS IntelliSense
Sublime Babel
Sublime Text Keymap for VS Code (sublime鍵映射)
VSCode Great Icons (文件圖標)
vscode-icons （文件圖標）
HTMLHint （html代碼檢查）
HTML Snippets (超級實用且初級的 H5代碼片斷以及提示)
Document this (js 的註釋模板 (注意：新版的vscode已經原生支持,在function上輸入/** tab))
cssrem (將css中的px自動轉換爲rem.不再用計算器了)
Vetur (添加對.vue後綴文件的快速書寫支持)
Vue 2 Snippets (快速新建vue頁面)

主題、文件圖標推薦

• 主題我用的是：Atom One Dark Theme（theme-oceanicnext、Dracula）
• 文件圖標我用的是：VSCode Great Icons