（转）[备忘] 完美Visual Studio Code(vsc

完美Visual Studio Code(vscode)
Git项目地址
原文

完美Visual Studio Code(vscode)
自定义快捷键（eclipse习惯）
遇到的问题
占用很大内存
Vue支持emmet
Debug不命中或不运行
自定义自动补全
DeBug调试JS代码
断点方法
普通断点
条件断点
插件
增强插件
Project Manager-项目管理
使用方法
路径智能感知
Git版本管理
美化代码
vue组件追踪
JS & CSS 压缩
浏览器打开
美化vscode图标
辅助插件
翻译(英汉词典)
ESLint
自动完成标签
js导入显示大小
snippet-片段
jQuery Snippets
Vue Snippets
语言
python
vue
proto
Sass或Scss
Markdown支持
观望中的插件
禁用插件
关闭Quokka弹窗
自定义快捷键（eclipse习惯）
新版本：左下角设置按钮 -> Keyboard Shortcuts -> 点击右上角的{}图标。
老版本：左下角设置按钮 -> 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 触发显示
ctrl+alt+down copyLinesDownAction 向下复制一行
ctrl+alt+up copyLinesUpAction 向上复制一行
ctrl+shift+c commentLine 注释行
ctrl+d deleteLines 删除行
ctrl+k addSelectionToNextFindMatch 添加选择到下一个查找匹配
ctrl+shift+f format 格式化
ctrl+shift+x transformToUppercase 转换为大写
ctrl+shift+y transformToLowercase 转换为小写
ctrl+shift+alt+x extensions 扩展（原ctrl+shift+x快捷 键）
ctrl+shift+alt+y toggleRepl 切换Repl（原ctrl+shift+y快 捷键）
ctrl+shift+alt+d addSelectionToNextFindMatch 添加选择到下一个查找匹配
ctrl+k或ctrl+shift+alt+d说明，当你选中字母a，按下此快捷键可再选中下一 个 字母a，若再按下ctrl+f2则可选中全文所有字母a。

遇到的问题
占用很大内存
关闭跟随链接就可以了。在设置里面搜索followSymlinks，然后取消那个单选框。

Vue支持emmet
首先，依次打开“文件–>首选项–>设置”，英文版的是依次打开 “File–>Preferences–>Settings”。
点击Extensions（扩展，），找到settings.json中然后打开，在setting.json中新增：

"emmet.triggerExpansionOnTab": true,
"emmet.includeLanguages": {
"vue-html": "html",
"vue": "html"
}

Debug不命中或不运行
调了很久的错误，原因未知。解决方案：
在需要debug的代码里新增一行代码：debugger，重启debug后即可精准命中，此时再新 增debug断点即可。

使用了babel-node的话需要把sourceMaps设为true：

// nodemon and babel
{
"name": "Launch babel development",
// ...
"sourceMaps": true
},

自定义自动补全
官方文档

按下Ctrl+Shift+P
在搜索框输入User Snippets
选择New Global Snippets file...
默认是打开C:\Users\你的用户名\AppData\Roaming\Code\User\snippets目录
DeBug调试JS代码
.vscode/launch.json配置：

{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
// 欲了解更多信息，请访问: 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
}
]
}

断点方法
普通断点
在编辑框左侧右键，选择Add Breakpoiny

条件断点
比如想要使下列代码在data === '123'的时候运行断点：

function isEmptyString(data) {
return data == null || data.trim().length === 0
}

在编辑框左侧右键，选择Add Conditional Breakpoiny后输入data === '123'

插件
增强插件
Project Manager-项目管理
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
}
]

假设vscode安装在D盘，则rootPath的值/workspace/markdown是指相对于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 压缩
安装完后右下角有个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

浏览器打开
在默认浏览器或应用程序中打开文件。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图标
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，无查询次数限制。可翻译驼 峰和下划线命名，及对整个文件中的标识符批量翻译。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
统一的代码风格

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

自动完成标签
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导入显示大小
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

语言
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支持
请查看vscode的markdown进阶专题.md

观望中的插件
插件 描述 分类
Debugger for Chrome js在chrome中的debug功能 增强
HTMLHint html文件规范检测 增强
fileheader [已停止更新] 顶部注释模板，可定义作 者、时间等信 息，并会自动更新最后修改时间 增强
filesize 在底部状态栏显示当前文件大小，点击后 还可以看到详细 创建、修改时间 增强
Auto Import TypeScript 和 TSX代码补全 增强
IntelliSense for CSS class names in HTML link标签引用的外部文件，提供 HTML 中 CSS class 名字的补全 增强
Prettier 美化 JavaScript/TypeScript/CSS 代 码 增强
WakaTime 从你的使用习惯中生成数据报表。似乎是 在线预览。 辅助
Live Share 实时协作编辑和调试。 增强
Flow Language Support JavaScript类型检查器 辅助
禁用插件
插件名 中文名 禁用原因
Code Runner 选中代码运行 不支持复杂环境，用到的地方少
Quokka.js 即时调试 几乎没用到，有时间再研究
XML Tools XML文档工具 几乎没用到，有时间再研究
JavaScript (ES6) code snippets JS代码支持 缩写定义不符合写作习惯
HTML Snippets HTML支持 VSCode已默认支持
HTML CSS Support HTML CSS 支持 设计缺陷，浪费CPU
CSS Peek CSS跟踪 VSCode已默认支持
关闭Quokka弹窗
JavaScript即时便条，边开发边显示调试信息。

关闭弹窗：

1. 在弹窗中单击“仅限社区功能”按钮。
2. 在〜/.quokka/config.json中手动创建带有{“pro”：false}内容的。
3. Quokka全局配置文件，禁用弹窗。