基础知识

基本设置

Microsoft 在 2015 年 4 月 30 日 Build 开发者大会上正式宣布了 Visual Studio Code 项目：一个运行于 Mac OS X、Windows 和 Linux 之上的，针对于编写现代 Web 和云应用的跨平台源代码编辑器。

安装软件

VSCode 是微软推出的跨平台、扩展组件丰富的文本编辑器。

官方提供稳定的发行版本与最新测试版本两个版本。

全局命令

在 windows 系统中在安装 VisualStudio Code 时选择设置 PATH 就可以在命令行全局使用了。

彻底删除

有时编辑器安装插件过多，造成异常时就需要重置 VSCODE。

重置前将安装的插件和热键备份，在下次重装时就省很多事情，具体操作方式请看下面的章节

window 系统

首先删除 vscode 软件
window 系统删除以下文件夹将banmashou 换成你的帐号

C:\Users\banmashou\.vscode
C:\Users\banmashou\AppData\Roaming\Code

配置共享

你完全不需要配置 vscode，可以将其他用户的配置拿来使用，也可以将配置分享给其他电脑或用户。

首先安装插件 settings-sync

提交配置

安装完插件后会要求登录 github 帐号

登录后在 vscode 的界面中选择一个 gist 或 skip 自动创建一个用来在 github 上保存配置

使用 ctrl+shift+p 在弹出的命令框中输入 sync 并选择更新上传，现在配置就已经上传了

下载配置

下面来介绍其他电脑下载配置的方法

安装 settings-sync插件
和上面步骤一样登录github 并选择和提交配置电脑一样的 gist
使用 ctrl+shift+p 在弹出的命令框中输入 sync 并选择下载配置

风格界面

中文语言

扩展中搜索 chinese 即中文语言包

https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-zh-hant

也可以点击上面链接在浏览器中安装

重启 vscode 工具完成

设置风格

下面的两款风格插件都不错，里面有多个主题。

截屏模式

该模式可以将按钮与鼠标操作在屏幕上显示。

开启方式

开启方式为 ctrl+shift+p 后选择 screen

其他设置

隐藏行号

设置 > 用户设置 > Line Numbers

导航设置

设置 > 工作台 > 导航路径 > (Breadcrumbs: Enabled & Breadcrumbs: File Path)

滚动缩放

文本编辑器 > Editor: Mouse Wheel Zoom

文件排序

资源管理器按最新修改排序

功能 > 资源管理器 > Sort Order[modified]

编码优化

自动换行

HTML 标签前后自动换行，访问设置 > 扩展〉HTML 进行配置

属性换行

如果要将 HTML 的属性对齐排列，请在设置 > 扩展〉HTML中进行设置

Prettier 格式化

代码格式化使用 Prettier处理，我们需要在项目根目录创建配置文件.prettierrc，记得将配置文件提交到版本库中，这样可以使项目成员使用统一的格式化配置。

下面是斑马兽的配置。

{
  "arrowParens": "always",
  "bracketSameLine": true,
  "bracketSpacing": true,
  "embeddedLanguageFormatting": "auto",
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "jsxSingleQuote": false,
  "printWidth": 120,
  "proseWrap": "never",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all",
  "useTabs": false,
  "vueIndentScriptAndStyle": false,
  "singleAttributePerLine": false
}

更多配置请参数官方文档 https://prettier.io/docs/en/options.html

代码片段

vscode 提供自定义代码片段功能非常方便。

参数说明

prefix      :这个参数是使用代码段的快捷入口,比如这里的log在使用时输入log会有智能感知.
body        :这个是代码段的主体.需要设置的代码放在这里,字符串间换行的话使用\r\n换行符隔开.注意如果值里包含特殊字符需要进行转义.
　　　　　　　 多行语句的以,隔开
$1          :这个为光标的所在位置.
$2          :使用这个参数后会光标的下一位置将会另起一行,按tab键可进行快速切换,还可以有$3,$4,$5.....
description :代码段描述,在使用智能感知时的描述

操作实例

下面自定义一个代码片段，当输入 bm 并按 tab 键后自动输出 banmashou.com。

{
	"Print to console": {
		"prefix": "bm",
		"body": [
			"banmashou.com",
		],
		"description": "输出banmashou.com"
	}
}

结果如下

多段文字配置

{
	"表关联": {
		"prefix": "bm-foreign",
		"body": [
			"\\$table->unsignedBigInteger('package_id')->nullable()->comment('套餐编号');",
			"\\$table->foreign('package_id')->references('id')->on('packages')->onDelete('cascade');",
		],
		"description": "多表关联"
	}
}

平滑移动

vscode 中使用 vim 时，默认情况下移动光标会有卡顿延迟，下面来设置平滑移动光标。

在命令行执行以下命令

# For VSCode
defaults write com.microsoft.VSCode ApplePressAndHoldEnabled -bool false

# For VSCode Insiders
defaults write com.microsoft.VSCodeInsiders ApplePressAndHoldEnabled -bool false

修改 系统偏好设置 > 键盘 更改 按键重复 与 重复前延迟

智能提示

使用深度学习可以有效的帮助我们提高代码的编写效率，下面我推荐几款 AI 代码提示软件

软件	介绍	安装客户端
tabnine	使用深度学习来帮助您更快地编写代码，支持主流代码编辑器
kite	AI 驱动的提示和补全引擎,功能也是非常强大	需要
aixcoder	国产的先进的深度学习模型压缩技术	需要

上面的 AI 提示软件你可以同时安装一个或多个，个人 tabnine 较多些

SASS/LESS

下面介绍几种编译 SASS 的方法

Formate Hero

Formate Hero支持在 Visual Studio Code 中自动编译以下文件：less, sass, scss, typescript, jade, pug and jsx。

首先安装插件 Formate Hero
然后在 vscode 状态栏底部打开编译

保存后将自动将文件编译到 dist 目录中，可以通过修改插件配置项设置编译目录

Live Sass

使用 SASS 可以及大的提高编写 CSS 的效率

首先安装插件 Live Sass Compiler
创建 bm.scss 文件
使用 ctrl+ship+p 搜索 Watch sass 开启 scss 文件自动编译

系统会自动生成 bm.css 文件，在 html 等文件中引入即可

vim

从 vim 切换回来的朋友，可以通过安装 vim插件来使用 vim 操作

vim-sneak

在配置中开启vim-sneak 可以在页面中快速跳转

运动指令	描述
`s<char><char>`	输入 s 并按两个字母，向前查找，按;继续查找下一个
`S<char><char>`	向后移到第一次出现
`<operator>z<char><char>`	`向前执行第一次出现`
`<operator>Z<char><char>`	`向后执行到第一次出现`

im-select

im-select 用于从 insert 模式切换为 normal 模式时自动切换为英文，请通过 im-select 文档查看安装方式

插件配置

安装后需要在 vscode 的配置项中设置

选项	说明
`vim.autoSwitchInputMethod.enable`	是否开启使用默认输入法
`vim.autoSwitchInputMethod.defaultIM`	默认输入法，请查看下表
`vim.autoSwitchInputMethod.obtainIMCmd`	Im-select 路径（使用默认值）
`vim.autoSwitchInputMethod.switchIMCmd`	有 `{im}` 占位符的命令（使用默认值）

下面是苹果系统输入法表，系统开启输入法下在于下面表里其中之一

Key	Description
com.apple.keylayout.US	U.S.
com.apple.keylayout.ABC	ABC
com.apple.keylayout.British	British
com.apple.keylayout.Irish	Irish
com.apple.keylayout.Australian	Australian
com.apple.keylayout.Dvorak	Dvorak
com.apple.keylayout.Colemak	Colemak

window 系统如果您的键盘布局为 en_US，则输入法键为 1033，也可以在此页面上找到您的语言环境 ID

使用示例

大部分系统使用以下配置都可以正常使用

mac

json

"vim.autoSwitchInputMethod.enable": true,
"vim.autoSwitchInputMethod.defaultIM": "com.apple.keylayout.US",
"vim.autoSwitchInputMethod.obtainIMCmd": "/usr/local/bin/im-select",
"vim.autoSwitchInputMethod.switchIMCmd": "/usr/local/bin/im-select {im}"

windows

json

"vim.autoSwitchInputMethod.enable": true,
"vim.autoSwitchInputMethod.defaultIM": "1033",
"vim.autoSwitchInputMethod.obtainIMCmd": "D:\\bin\\im-select.exe",
"vim.autoSwitchInputMethod.switchIMCmd": "D:\\bin\\im-select.exe {im}"

热键配置

设置 leader 键为空格

下面是对 VIM 定制的热键配置，首先需要打开配置文件

MAC

下面是 MAC 系统的热键配置，你可以根据需要自行设置

[
  {
    "key": "cmd+e",
    "command": "-workbench.action.openRecent"
  },
  {
    "key": "cmd+e",
    "command": "extension.intellijRecentFiles",
    "when": "!inQuickOpen"
  },
  {
    "key": "cmd+e",
    "command": "workbench.action.quickOpenNavigateNext",
    "when": "inQuickOpen"
  },
  {
    "key": "cmd+e",
    "command": "workbench.action.quickOpenNavigateNext",
    "when": "inQuickOpen"
  },
  {
    "key": "shift+cmd+e",
    "command": "workbench.action.quickOpenNavigatePrevious",
    "when": "inQuickOpen"
  },
  {
    "key": "alt+escape",
    "command": "-editor.action.triggerSuggest",
    "when": "editorHasCompletionItemProvider && textInputFocus && !editorReadonly"
  },
  {
    "key": "alt+x",
    "command": "editor.action.toggleWordWrap"
  },
  {
    "key": "alt+z",
    "command": "-editor.action.toggleWordWrap"
  },
  {
    "key": "shift+cmd+o",
    "command": "-ftp.open"
  },
  {
    "key": "alt+1",
    "command": "workbench.action.terminal.focusPrevious"
  },
  {
    "key": "ctrl+shift+down",
    "command": "workbench.action.terminal.focusNext"
  },
  {
    "key": "shift+cmd+d",
    "command": "editor.action.revealDefinition",
    "when": "editorHasDefinitionProvider && editorTextFocus && !isInEmbeddedEditor"
  },
  {
    "key": "f12",
    "command": "-editor.action.revealDefinition",
    "when": "editorHasDefinitionProvider && editorTextFocus && !isInEmbeddedEditor"
  },
  {
    "key": "cmd+;",
    "command": "editor.action.openLink"
  },
  {
    "key": "cmd+j",
    "command": "workbench.action.toggleSidebarVisibility"
  },
  {
    "key": "cmd+b",
    "command": "-workbench.action.toggleSidebarVisibility"
  },
  {
    "key": "shift+cmd+r",
    "command": "workbench.files.action.collapseExplorerFolders"
  },
  {
    "key": "cmd+h",
    "command": "extension.dash.all",
    "when": "editorTextFocus"
  },
  {
    "key": "ctrl+alt+h",
    "command": "-extension.dash.all",
    "when": "editorTextFocus"
  },
  {
    "key": "cmd+k cmd+z",
    "command": "workbench.action.toggleZenMode"
  },
  {
    "key": "cmd+k z",
    "command": "-workbench.action.toggleZenMode"
  },
  {
    "key": "cmd+k cmd+h",
    "command": "workbench.action.toggleActivityBarVisibility"
  },
  {
    "key": "shift+cmd+k",
    "command": "editor.action.formatDocument",
    "when": "editorHasDocumentFormattingProvider && editorTextFocus && !editorReadonly && !inCompositeEditor"
  },
  {
    "key": "shift+alt+f",
    "command": "-editor.action.formatDocument",
    "when": "editorHasDocumentFormattingProvider && editorTextFocus && !editorReadonly && !inCompositeEditor"
  }
]

WINDOWS

下面是 WINDOWS 系统的热键配置，你可以根据需要自行设置

...

	"vim.sneak": true,
  "vim.commandLineModeKeyBindings": [],
  "vim.normalModeKeyBindingsNonRecursive": [
  {
    "before": ["s", "s"],
    "commands": ["workbench.action.files.save"]
  },
  {
    "before": ["z", "z"],
    "commands": [":wq"]
  },
  {
    "before": ["<leader>", "d"],
    "commands": ["editor.action.revealDefinition"]
  }
  ],
  "vim.insertModeKeyBindings": [
  {
    "before": ["j", "j"],
    "after": ["<Esc>"]
  }
  ],
  "vim.leader": "<space>",
  "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
  "explorer.confirmDelete": false,
  "vim.useSystemClipboard": true,
  "vim.camelCaseMotion.enable": true,
  "vim.easymotion": true,
  "vim.highlightedyank.enable": true,
  "vim.easymotionMarkerForegroundColorTwoChar": "#ffffff",
  "vim.easymotionMarkerForegroundColorOneChar": "#ffffff",
  "vim.handleKeys": {
  "<C-a>": false,
  "<C-f>": false,
  "<C-c>": false,
  "<C-x>": false,
  "<C-v>": false
  }

...

系统热键

这是官方提供的快捷键速查表，下面是中文快捷键说明。

按 Press	功能 Function
Ctrl + Shift + P，F1	显示命令面板 Show Command Palette
Ctrl + P	快速打开 Quick Open
Ctrl + Shift + N	新窗口/实例 New window/instance
Ctrl + Shift + W	关闭窗口/实例 Close window/instance

基础编辑

按 Press	功能 Function
Ctrl+X	剪切行（空选定） Cut line (empty selection)
Ctrl+C	复制行（空选定）Copy line (empty selection)
Alt+ ↑ / ↓	向上/向下移动行 Move line up/down
Shift+Alt + ↓ / ↑	向上/向下复制行 Copy line up/down
Ctrl+Shift+K	删除行 Delete line
Ctrl+Enter	在下面插入行 Insert line below
Ctrl+Shift+Enter	在上面插入行 Insert line above
Ctrl+Shift+\	跳到匹配的括号 Jump to matching bracket
Ctrl+] / [	缩进/缩进行 Indent/outdent line
Home	转到行首 Go to beginning of line
End	转到行尾 Go to end of line
Ctrl+Home	转到文件开头 Go to beginning of file
Ctrl+End	转到文件末尾 Go to end of file
Ctrl+↑ / ↓	向上/向下滚动行 Scroll line up/down
Alt+PgUp / PgDown	向上/向下滚动页面 Scroll page up/down
Ctrl+Shift+[	折叠（折叠）区域 Fold (collapse) region
Ctrl+Shift+]	展开（未折叠）区域 Unfold (uncollapse) region
Ctrl+K Ctrl+[	折叠（未折叠）所有子区域 Fold (collapse) all subregions
Ctrl+K Ctrl+]	展开（未折叠）所有子区域 Unfold (uncollapse) all subregions
Ctrl+K Ctrl+0	折叠（折叠）所有区域 Fold (collapse) all regions
Ctrl+K Ctrl+J	展开（未折叠）所有区域 Unfold (uncollapse) all regions
Ctrl+K Ctrl+C	添加行注释 Add line comment
Ctrl+K Ctrl+U	删除行注释 Remove line comment
Ctrl+/	切换行注释 Toggle line comment
Shift+Alt+A	切换块注释 Toggle block comment
Alt+Z	切换换行 Toggle word wrap
Ctrl+Alt	键盘上向上或者向下键，使一列上出现多个光标
Ctrl+Shift+l	选择相同的词统一编辑
Shift+Alt+鼠标拖动	选择区域进行编辑

导航控制

按 Press	功能 Function
Ctrl + T	显示所有符号 Show all Symbols
Ctrl + G	转到行... Go to Line...
Ctrl + P	转到文件... Go to File...
Ctrl + Shift + O	转到符号... Go to Symbol...
Ctrl + Shift + M	显示问题面板 Show Problems panel
F8	转到下一个错误或警告 Go to next error or warning
Shift + F8	转到上一个错误或警告 Go to previous error or warning
Ctrl + Shift + Tab	导航编辑器组历史记录 Navigate editor group history
Alt + ←/→	返回/前进 Go back / forward
Ctrl + M	切换选项卡移动焦点 Toggle Tab moves focus

搜索和替换

按 Press	功能 Function
Ctrl + F	查找 Find
Ctrl + H	替换 Replace
F3 / Shift + F3	查找下一个/上一个 Find next/previous
Alt + Enter	选择查找匹配的所有出现 Select all occurences of Find match
Ctrl + D	将选择添加到下一个查找匹配 Add selection to next Find match
Ctrl + K Ctrl + D	将最后一个选择移至下一个查找匹配项 Move last selection to next Find match
Alt + C / R / W	切换区分大小写/正则表达式/整个词 Toggle case-sensitive / regex / whole word

多光标和选择

按 Press	功能 Function
Alt +单击	插入光标 Insert cursor
Ctrl + Alt +↑/↓	在上/下插入光标 Insert cursor above / below
Ctrl + U	撤消上一个光标操作 Undo last cursor operation
Shift + Alt + I	在选定的每一行的末尾插入光标 Insert cursor at end of each line selected
Ctrl + I	选择当前行 Select current line
Ctrl + Shift + L	选择当前选择的所有出现 Select all occurrences of current selection
Ctrl + F2	选择当前字的所有出现 Select all occurrences of current word
Shift + Alt + →	展开选择 Expand selection
Shift + Alt + ←	缩小选择 Shrink selection
Shift + Alt + （拖动鼠标）	列（框）选择 Column (box) selection
Ctrl + Shift + Alt +（箭头键）	列（框）选择 Column (box) selection
Ctrl + Shift + Alt + PgUp / PgDown	列（框）选择页上/下 Column (box) selection page up/down
zc	折叠代码块
zo	展开代码块
zC	折叠所有代码块
zO	展开所有代码块

语言编辑

按 Press	功能 Function
Ctrl + 空格	触发建议 Trigger suggestion
Ctrl + Shift + Space	触发器参数提示 Trigger parameter hints
Tab	Emmet 展开缩写 Emmet expand abbreviation
Shift + Alt + F	格式化文档 Format document
Ctrl + K Ctrl + F	格式选定区域 Format selection
F12	转到定义 Go to Definition
Alt + F12	Peek 定义 Peek Definition
Ctrl + K F12	打开定义到边 Open Definition to the side
Ctrl + .	快速解决 Quick Fix
Shift + F12	显示引用 Show References
F2	重命名符号 Rename Symbol
Ctrl + Shift + . /，	替换为下一个/上一个值 Replace with next/previous value
Ctrl + K Ctrl + X	修剪尾随空格 Trim trailing whitespace
Ctrl + K M	更改文件语言 Change file language

窗口管理

按 Press	功能 Function
Ctrl+F4, Ctrl+W	关闭编辑器 Close editor
Ctrl+K F	关闭文件夹 Close folder
Ctrl+\	拆分编辑器 Split editor
Ctrl+ 1 / 2 / 3	聚焦到第 1，第 2 或第 3 编辑器组 Focus into 1st, 2nd or 3rd editor group
Ctrl+K Ctrl+ ←/→	聚焦到上一个/下一个编辑器组 Focus into previous/next editor group
Ctrl+Shift+PgUp / PgDown	向左/向右移动编辑器 Move editor left/right
Ctrl+K ← / →	移动活动编辑器组 Move active editor group

文件管理

按 Press	功能 Function
Ctrl+N	新文件 New File
Ctrl+O	打开文件... Open File...
Ctrl+S	保存 Save
Ctrl+Shift+S	另存为... Save As...
Ctrl+K S	全部保存 Save All
Ctrl+F4	关闭 Close
Ctrl+K Ctrl+W	关闭所有 Close All
Ctrl+Shift+T	重新打开关闭的编辑器 Reopen closed editor
Ctrl+K	输入保持打开 Enter Keep Open
Ctrl+Tab	打开下一个 Open next
Ctrl+Shift+Tab	打开上一个 Open previous
Ctrl+K P	复制活动文件的路径 Copy path of active file
Ctrl+K R	显示资源管理器中的活动文件 Reveal active file in Explorer
Ctrl+K O	显示新窗口/实例中的活动文件 Show active file in new window/instance

显示控制

按 Press	功能 Function
F11	切换全屏 Toggle full screen
Shift+Alt+1	切换编辑器布局 Toggle editor layout
Ctrl+ = / -	放大/缩小 Zoom in/out
Ctrl+B	切换侧栏可见性 Toggle Sidebar visibility
Ctrl+Shift+E	显示浏览器/切换焦点 Show Explorer / Toggle focus
Ctrl+Shift+F	显示搜索 Show Search
Ctrl+Shift+G	显示 Git Show Git
Ctrl+Shift+D	显示调试 Show Debug
Ctrl+Shift+X	显示扩展 Show Extensions
Ctrl+Shift+H	替换文件 Replace in files
Ctrl+Shift+J	切换搜索详细信息 Toggle Search details
Ctrl+Shift+C	打开新命令提示符/终端 Open new command prompt/terminal
Ctrl+Shift+U	显示输出面板 Show Output panel
Ctrl+Shift+V	切换 Markdown 预览 Toggle Markdown preview
Ctrl+K V	从旁边打开 Markdown 预览 Open Markdown preview to the side

代码调试

按 Press	功能 Function
F9	切换断点 Toggle breakpoint
F5	开始/继续 Start/Continue
Shift+F5	停止 Stop
F11 / Shift+F11	下一步/上一步 Step into/out
F10	跳过 Step over
Ctrl+K Ctrl+I	显示悬停 Show hover

集成终端

按 Press	功能 Function
Ctrl+`	显示集成终端 Show integrated terminal
Ctrl+Shift+`	创建新终端 Create new terminal
Ctrl+Shift+C	复制选定 Copy selection
Ctrl+Shift+V	粘贴到活动端子 Paste into active terminal
Ctrl+↑ / ↓	向上/向下滚动 Scroll up/down
Shift+PgUp / PgDown	向上/向下滚动页面 Scroll page up/down
Ctrl+Home / End	滚动到顶部/底部 Scroll to top/bottom

工作区

有时我们希望开发时在一个 VS 编辑器中同时编辑多个文件，这时候可以使用工作区来管理。

创建文件 banmashou 并用 VSCODE 打开
然后选择将工作区另存为 操作，保存到 banmashou 目录即可
再次打开 banmashou/bmcms 文件夹
然后选择 将文件夹添加到工作区

基础知识 ​

基本设置 ​

安装软件 ​

全局命令 ​

彻底删除 ​

配置共享 ​

提交配置 ​

下载配置 ​

风格界面 ​

中文语言 ​

设置风格 ​

截屏模式 ​

其他设置 ​

编码优化 ​

自动换行 ​

属性换行 ​

Prettier 格式化 ​

代码片段 ​

参数说明 ​

操作实例 ​

平滑移动 ​

智能提示 ​

SASS/LESS ​

Formate Hero ​

Live Sass ​

vim ​

vim-sneak ​

im-select ​

插件配置 ​

使用示例 ​

热键配置 ​

MAC ​

WINDOWS ​

系统热键 ​

基础编辑 ​

导航控制 ​

搜索和替换 ​

多光标和选择 ​

语言编辑 ​

窗口管理 ​

文件管理 ​

显示控制 ​

代码调试 ​

集成终端 ​

工作区 ​

常用插件 ​