[备忘] 完美Visual Studio Code(vscode)
完美Visual Studio Code(vscode)
本文Git项目地址
自定义快捷键（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。
将Markdown导出成PDF
将Markdown导出成PDF或图片(png,jpeg)
安装插件：
Name: Markdown PDF
Id: yzane.markdown-pdf
Description: Convert Markdown to PDF
Version: 1.4.4
Publisher: yzane
VS Marketplace Link
Windows将Markdown导出成PDF配置setting.json：
{
"markdown-pdf.executablePath": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe"
}
Macbook将Markdown导出成PDF配置setting.json：
{
"markdown-pdf.executablePath": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
}
遇到的问题
占用很大内存
关闭跟随链接就可以了。在设置里面搜索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
使用方法
按下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
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
配置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
vue组件追踪
Name: ESLint
Id: dbaeumer.vscode-eslint
Description: Integrates ESLint JavaScript into VS Code.
Version: 1.9.0
Publisher: Dirk Baeumer
VS Marketplace Link
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
浏览器打开
在默认浏览器或应用程序中打开文件。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
美化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
辅助插件
TODO标记
TODO/FIXME标记高亮
Name: Todo Tree
Id: gruntfuggly.todo-tree
Description: Show TODO, FIXME, etc. comment tags in a tree view
Version: 0.0.139
Publisher: Gruntfuggly
VS Marketplace Link
翻译(英汉词典)
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
ESLint
统一的代码风格
Name: ESLint
Id: dbaeumer.vscode-eslint
Description: Integrates ESLint JavaScript into VS Code.
Version: 1.8.0
Publisher: Dirk Baeumer
VS Marketplace Link
自动完成标签
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
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
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
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
语言
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
vue
Name: Vetur
Id: octref.vetur
Description: Vue tooling for VS Code
Version: 0.21.0
Publisher: Pine Wu
VS Marketplace Link
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
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
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全局配置文件，禁用弹窗。