[备忘] 完美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
},

自定义自动补全

官方文档

1. 按下Ctrl+Shift+P
2. 在搜索框输入User Snippets
3. 选择New Global Snippets file...
4. 默认是打开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即时便条，边开发边显示调试信息。

关闭弹窗：

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