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

完美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}/index.js", "stopOnEntry": false, "args": [], "cwd": "$ {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即时便条，边开发边显示调试信息。

关闭弹窗：

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

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 194,242评论 5赞 459
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 81,769评论 2赞 371
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 141,484评论 0赞 319
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 52,133评论 1赞 263
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 61,007评论 4赞 355
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 46,080评论 1赞 272
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 36,496评论 3赞 381
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 35,190评论 0赞 253
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 39,464评论 1赞 290
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 34,549评论 2赞 309
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 36,330评论 1赞 326
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 32,205评论 3赞 312
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 37,567评论 3赞 298
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 28,889评论 0赞 17
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 30,160评论 1赞 250
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 41,475评论 2赞 341
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 40,650评论 2赞 335

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

推荐阅读更多精彩内容