完美Visual Studio Code(vscode)
Git項(xiàng)目地址
原文
完美Visual Studio Code(vscode)
自定義快捷鍵（eclipse習(xí)慣）
遇到的問題
占用很大內(nèi)存
Vue支持emmet
Debug不命中或不運(yùn)行
自定義自動(dòng)補(bǔ)全
DeBug調(diào)試JS代碼
斷點(diǎn)方法
普通斷點(diǎn)
條件斷點(diǎn)
插件
增強(qiáng)插件
Project Manager-項(xiàng)目管理
使用方法
路徑智能感知
Git版本管理
美化代碼
vue組件追蹤
JS & CSS 壓縮
瀏覽器打開
美化vscode圖標(biāo)
輔助插件
翻譯(英漢詞典)
ESLint
自動(dòng)完成標(biāo)簽
js導(dǎo)入顯示大小
snippet-片段
jQuery Snippets
Vue Snippets
語(yǔ)言
python
vue
proto
Sass或Scss
Markdown支持
觀望中的插件
禁用插件
關(guān)閉Quokka彈窗
自定義快捷鍵（eclipse習(xí)慣）
新版本：左下角設(shè)置按鈕 -> Keyboard Shortcuts -> 點(diǎn)擊右上角的{}圖標(biāo)。
老版本：左下角設(shè)置按鈕 -> Keyboard Shortcuts -> keybindings.json。
visual studio code 鍵盤快捷鍵參考
// Place your key bindings in this file to overwrite the defaults
[
{ "key": "alt+/", "command": "editor.action.triggerSuggest","when": "editorTextFocus" },
{ "key": "ctrl+alt+down","command": "editor.action.copyLinesDownAction", "when": "editorTextFocus" },
{ "key": "ctrl+alt+up", "command": "editor.action.copyLinesUpAction", "when": "editorTextFocus" },
{ "key": "ctrl+shift+c","command": "editor.action.commentLine","when": "editorTextFocus" },
{ "key": "ctrl+d","command": "editor.action.deleteLines","when": "editorTextFocus" },
{ "key": "ctrl+k","command": "editor.action.addSelectionToNextFindMatch", "when": "editorFocus"},
{ "key": "ctrl+shift+f","command": "editor.action.format","when": "editorTextFocus"},
{ "key": "ctrl+shift+x","command": "editor.action.transformToUppercase", "when": "editorTextFocus"},
{ "key": "ctrl+shift+y","command": "editor.action.transformToLowercase", "when": "editorTextFocus"},
{ "key": "ctrl+shift+alt+x","command": "workbench.view.extensions" },
{ "key": "ctrl+shift+alt+y","command": "workbench.debug.action.toggleRepl"},
{ "key": "ctrl+shift+alt+d","command": "editor.action.addSelectionToNextFindMatch","when": "editorFocus" },
快捷鍵 命令 說明
alt+/ triggerSuggest 觸發(fā)顯示
ctrl+alt+down copyLinesDownAction 向下復(fù)制一行
ctrl+alt+up copyLinesUpAction 向上復(fù)制一行
ctrl+shift+c commentLine 注釋行
ctrl+d deleteLines 刪除行
ctrl+k addSelectionToNextFindMatch 添加選擇到下一個(gè)查找匹配
ctrl+shift+f format 格式化
ctrl+shift+x transformToUppercase 轉(zhuǎn)換為大寫
ctrl+shift+y transformToLowercase 轉(zhuǎn)換為小寫
ctrl+shift+alt+x extensions 擴(kuò)展（原ctrl+shift+x快捷 鍵）
ctrl+shift+alt+y toggleRepl 切換Repl（原ctrl+shift+y快 捷鍵）
ctrl+shift+alt+d addSelectionToNextFindMatch 添加選擇到下一個(gè)查找匹配
ctrl+k或ctrl+shift+alt+d說明，當(dāng)你選中字母a，按下此快捷鍵可再選中下一 個(gè) 字母a，若再按下ctrl+f2則可選中全文所有字母a。
遇到的問題
占用很大內(nèi)存
關(guān)閉跟隨鏈接就可以了。在設(shè)置里面搜索followSymlinks，然后取消那個(gè)單選框。
Vue支持emmet
首先，依次打開“文件–>首選項(xiàng)–>設(shè)置”，英文版的是依次打開 “File–>Preferences–>Settings”。
點(diǎn)擊Extensions（擴(kuò)展，），找到settings.json中然后打開，在setting.json中新增：
"emmet.triggerExpansionOnTab": true,
"emmet.includeLanguages": {
"vue-html": "html",
"vue": "html"
}
Debug不命中或不運(yùn)行
調(diào)了很久的錯(cuò)誤，原因未知。解決方案：
在需要debug的代碼里新增一行代碼：debugger，重啟debug后即可精準(zhǔn)命中，此時(shí)再新 增debug斷點(diǎn)即可。
使用了babel-node的話需要把sourceMaps設(shè)為true：
// nodemon and babel
{
"name": "Launch babel development",
// ...
"sourceMaps": true
},
自定義自動(dòng)補(bǔ)全
官方文檔
按下Ctrl+Shift+P
在搜索框輸入U(xiǎn)ser Snippets
選擇New Global Snippets file...
默認(rèn)是打開C:\Users\你的用戶名\AppData\Roaming\Code\User\snippets目錄
DeBug調(diào)試JS代碼
.vscode/launch.json配置：
{
// 使用 IntelliSense 了解相關(guān)屬性。
// 懸停以查看現(xiàn)有屬性的描述。
// 欲了解更多信息，請(qǐng)?jiān)L問: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
// npm run dev
{
"type": "node",
"request": "launch",
"name": "Launch npm run dev",
"runtimeExecutable": "npm",
"runtimeArgs": [
"run",
"dev"
],
"console": "integratedTerminal",
"env": {
"NODE_ENV": "testing"
}
},
// babel production
{
"type": "node",
"request": "launch",
"name": "Launch babel-node production",
"runtimeExecutable": "babel-node",
"runtimeArgs": [
"index.js"
],
"env": {
"NODE_ENV": "production"
},
"console": "integratedTerminal"
},
// babel development
{
"name": "Launch babel development",
"type": "node",
"request": "launch",
"program": "{workspaceRoot}",
"runtimeExecutable": "babel-node",
"runtimeArgs": [],
"env": {
"NODE_ENV": "development"
},
"console": "integratedTerminal",
"preLaunchTask": "",
"sourceMaps": true
}
]
}
斷點(diǎn)方法
普通斷點(diǎn)
在編輯框左側(cè)右鍵，選擇Add Breakpoiny
條件斷點(diǎn)
比如想要使下列代碼在data === '123'的時(shí)候運(yùn)行斷點(diǎn)：
function isEmptyString(data) {
return data == null || data.trim().length === 0
}
在編輯框左側(cè)右鍵，選擇Add Conditional Breakpoiny后輸入data === '123'
插件
增強(qiáng)插件
Project Manager-項(xiàng)目管理
Name: Project Manager
Id: alefragnani.project-manager
Description: Easily switch between projects
Version: 10.5.1
Publisher: Alessandro Fragnani
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager
使用方法
按下Ctrl+Shift+P，輸入Project選擇Project Manager:Edit Projects編輯配 置文件，示例：
[
{
"name": "articles",
"rootPath": "/workspace/markdown",
"paths": [],
"group": "",
"enabled": true
}
]
假設(shè)vscode安裝在D盤，則rootPath的值/workspace/markdown是指相對(duì)于D:/盤根目 錄 的workspace/markdown
路徑智能感知
Name: Path Intellisense
Id: christian-kohler.path-intellisense
Description: Visual Studio Code plugin that autocompletes filenames
Version: 1.4.2
Publisher: Christian Kohler
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense
Path Intellisense
Git版本管理
Name: GitLens — Git supercharged
Id: eamodio.gitlens
Description: Supercharge the Git capabilities built into Visual Studio Code — Visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more
Version: 9.7.4
Publisher: Eric Amodio
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
配置git路徑，在settings.json添加一行："git.path": "D:/Git/bin/git.exe",
重啟vscode
美化代碼
支持 javascript, JSON, CSS, Sass, and HTML
Name: Beautify
Id: hookyqr.beautify
Description: Beautify code in place for VS Code
Version: 1.5.0
Publisher: HookyQR
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify
vue組件追蹤
Name: ESLint
Id: dbaeumer.vscode-eslint
Description: Integrates ESLint JavaScript into VS Code.
Version: 1.9.0
Publisher: Dirk Baeumer
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
JS & CSS 壓縮
安裝完后右下角有個(gè)Minify按鈕
Name: JS & CSS Minifier
Id: olback.es6-css-minify
Description: Easily Minify ES5/ES6/ES7/ES8 and CSS
Version: 2.6.0
Publisher: olback
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=olback.es6-css-minify
瀏覽器打開
在默認(rèn)瀏覽器或應(yīng)用程序中打開文件。html文件中右鍵Open In Default Browser
Name: open in browser
Id: techer.open-in-browser
Description: This allows you to open the current file in your default browser or application.
Version: 2.0.0
Publisher: TechER
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=techer.open-in-browser
美化vscode圖標(biāo)
Name: vscode-icons
Id: vscode-icons-team.vscode-icons
Description: Icons for Visual Studio Code
Version: 8.6.0
Publisher: VSCode Icons Team
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons
輔助插件
翻譯(英漢詞典)
Name: 翻譯(英漢詞典)
Id: codeinchinese.englishchinesedictionary
Description: 本地77萬詞條英漢詞典，不依賴任何在線翻譯API，無查詢次數(shù)限制。可翻譯駝 峰和下劃線命名，及對(duì)整個(gè)文件中的標(biāo)識(shí)符批量翻譯。Translate a selected identifier, or all the recognized identifiers in one source file.
Version: 0.0.11
Publisher: 中文編程
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=CodeInChinese.EnglishChineseDictionary
ESLint
統(tǒng)一的代碼風(fēng)格
Name: ESLint
Id: dbaeumer.vscode-eslint
Description: Integrates ESLint JavaScript into VS Code.
Version: 1.8.0
Publisher: Dirk Baeumer
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
自動(dòng)完成標(biāo)簽
Name: Auto Complete Tag
Id: formulahendry.auto-complete-tag
Description: Extension Packs to add close tag and rename paired tag automatically for HTML/XML
Version: 0.1.0
Publisher: Jun Han
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-complete-tag
js導(dǎo)入顯示大小
Name: Import Cost
Id: wix.vscode-import-cost
Description: Display import/require package size in the editor
Version: 2.12.0
Publisher: Wix
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost
Import Cost
snippet-片段
jQuery Snippets
Name: jQuery Code Snippets
Id: donjayamanne.jquerysnippets
Description: Over 130 jQuery Code Snippets
Version: 0.0.1
Publisher: Don Jayamanne
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=donjayamanne.jquerysnippets
Vue Snippets
Name: Vue 2 Snippets
Id: hollowtree.vue-snippets
Description: A Vue.js 2 Extension
Version: 0.1.11
Publisher: hollowtree
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets
語(yǔ)言
python
Name: Python
Id: ms-python.python
Description: Linting, Debugging (multi-threaded, remote), Intellisense, code formatting, refactoring, unit tests, snippets, and more.
Version: 2019.4.12954
Publisher: Microsoft
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=ms-python.python
vue
Name: Vetur
Id: octref.vetur
Description: Vue tooling for VS Code
Version: 0.21.0
Publisher: Pine Wu
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=octref.vetur
proto
Name: vscode-proto3
Id: zxh404.vscode-proto3
Description: Protobuf 3 support for Visual Studio Code
Version: 0.2.2
Publisher: zxh404
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=zxh404.vscode-proto3
Sass或Scss
Name: Sass
Id: robinbentley.sass-indented
Description: Indented Sass syntax highlighting, autocomplete & snippets
Version: 1.5.1
Publisher: Robin Bentley
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=robinbentley.sass-indented
Markdown支持
請(qǐng)查看vscode的markdown進(jìn)階專題.md
觀望中的插件
插件 描述 分類
Debugger for Chrome js在chrome中的debug功能 增強(qiáng)
HTMLHint html文件規(guī)范檢測(cè) 增強(qiáng)
fileheader [已停止更新] 頂部注釋模板，可定義作 者、時(shí)間等信 息，并會(huì)自動(dòng)更新最后修改時(shí)間 增強(qiáng)
filesize 在底部狀態(tài)欄顯示當(dāng)前文件大小，點(diǎn)擊后 還可以看到詳細(xì) 創(chuàng)建、修改時(shí)間 增強(qiáng)
Auto Import TypeScript 和 TSX代碼補(bǔ)全 增強(qiáng)
IntelliSense for CSS class names in HTML link標(biāo)簽引用的外部文件，提供 HTML 中 CSS class 名字的補(bǔ)全 增強(qiáng)
Prettier 美化 JavaScript/TypeScript/CSS 代 碼 增強(qiáng)
WakaTime 從你的使用習(xí)慣中生成數(shù)據(jù)報(bào)表。似乎是 在線預(yù)覽。 輔助
Live Share 實(shí)時(shí)協(xié)作編輯和調(diào)試。 增強(qiáng)
Flow Language Support JavaScript類型檢查器 輔助
禁用插件
插件名 中文名 禁用原因
Code Runner 選中代碼運(yùn)行 不支持復(fù)雜環(huán)境，用到的地方少
Quokka.js 即時(shí)調(diào)試 幾乎沒用到，有時(shí)間再研究
XML Tools XML文檔工具 幾乎沒用到，有時(shí)間再研究
JavaScript (ES6) code snippets JS代碼支持 縮寫定義不符合寫作習(xí)慣
HTML Snippets HTML支持 VSCode已默認(rèn)支持
HTML CSS Support HTML CSS 支持 設(shè)計(jì)缺陷，浪費(fèi)CPU
CSS Peek CSS跟蹤 VSCode已默認(rèn)支持
關(guān)閉Quokka彈窗
JavaScript即時(shí)便條，邊開發(fā)邊顯示調(diào)試信息。
關(guān)閉彈窗：
- 在彈窗中單擊“僅限社區(qū)功能”按鈕。
- 在?/.quokka/config.json中手動(dòng)創(chuàng)建帶有{“pro”：false}內(nèi)容的。
- Quokka全局配置文件，禁用彈窗。
