VS Code实用技巧

相关文档

• 官方文档（英文版）：Documentation for Visual Studio Code

下载安装

• https://code.visualstudio.com...

简介

• VScode是微软推出的一款轻量级的编辑器,采用了和VS相同的UI界面。
• 左侧布局：是用于展示所要编辑的所有文件和文件夹的文件管理器，依次是资源管理器，搜索，GIT，调试，插件。
• 右侧布局：是打开文件的编辑区域，最多可同时打开三个编辑区域到侧边。
• 底栏布局：依次是Git Branch，error&warning，编码格式等。

常用插件

• HTML Snippets：超级使用且初级的H5代码片段以及提示
• HTML CSS Support: css自动补齐
• VScode-icons：美化VSCode的界面，在文件名前面显示小图标，安装后每次打开自动启用。
• View InBrowser：默认浏览器查看HTML文件（快捷键Ctrl+F1）
• markdownlint：Markdown格式提示，可以通过快捷键 (快捷键Ctrl+Shift+V)
• background：可以让vscode的背景修改为自己喜欢的图，最多3张照片

// Plugin background enabled.background 插件是否启用
"background.enabled": false,

// Use default images.使用默认图片
"background.useDefault": false,

// Your custom Images(Max length is 3). 自己定制背景图，最多3个
"background.customImages": [
    "file:///E:/wushen.png",
    "file:///E:/wushen.png",
    "file:///E:/wushen.png"
]

常用快捷键

• 1.窗口管理

  • 打开一个新窗口 Ctrl+Shift+N
  • 关闭窗口 Ctrl+Shift+W
  • 缩放窗口显示比例 Ctrl++/-
  • 侧边栏显示和隐藏 Ctrl+B

• 2.文件管理

  • 新建文件 Ctrl+N
  • 保存文件 Ctrl+S
  • 在当前文件内查找 Ctrl+F
  • 在当前文件内替换 Ctrl+H
  • 整个文件夹中查找 Ctrl+Shift+F
  • 切换文档 Ctrl+Tab
  • 向前/向后切换文档 Ctrl+PgUp/PgDn
  • html文件预览，需安装插件：View In Browser

• 3.分栏管理

  • 文件分栏（最多3个）Ctrl+，或者按住Ctrl鼠标点击Explorer里的文件名
  • 分栏切换Ctrl+1 Ctrl+2 Ctrl+3

• 4.代码格式管理

  • 代码行缩进Ctrl+[， Ctrl+]
  • 折叠打开代码块 Ctrl+Shift+[， Ctrl+Shift+]
  • 代码格式化：Shift+Alt+F
  • 修剪空格Ctrl+Shift+X
  • 在当前行下边插入一行Ctrl+Enter
  • 在当前行上方插入一行Ctrl+Shift+Enter

• 5.光标相关

  • 移动到行首：Home
  • 移动到行尾：End
  • 移动到文件结尾：Ctrl+End
  • 移动到文件开头：Ctrl+Home
  • 选中当前行Ctrl+i（双击）
  • 选择从光标到行尾Shift+End
  • 选择从行首到光标处Shift+Home
  • 删除光标右侧的所有字Ctrl+Delete
  • 同时选中所有匹配的Ctrl+Shift+L

• 6.自动保存

  • 文件 -> 自动保存
  • Ctrl+Shift+P，输入 auto

IDE设置

// 控制是否显示 minimap(缩略图)
   "editor.minimap.enabled": true,

// 视区宽度自动换行设置。
　"editor.wordWrap": "on",

// 指定用在工作台中的颜色主题。
　"workbench.colorTheme": "Monokai"