VS Code实用技巧

Posted 2020-10-31 lixiulin

相关文档

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

下载安装

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

简介

• 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"
```