0%

小试VS Code

前言

一直以来使用的编辑器是Sublime Text直到发现了微软发布的: Visual Studio Code。使用后发现简直是神器啊,比卡顿的Atom,收费的Sublime Text不知道高到哪里去了。详情请看: “Atom、Sublime Text、VSCode 三者比较,各有哪些优势和弱势?” “如何评价 Visual Studio Code?”,用了发现根本停不下来,想来写写用法,顺便也能给大家安利一波。

安装VS Code

官网请戳

下载请戳

配置VS Code

VS Code的用户配置分3个级别,分别是默认配置、全局配置和工作区配置,优先级也依次递增。

团队项目

这团队项目中一些规范可以通过项目目录下建一个.vscode/setting.json文件进行配置,比如:

.vscode/setting.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// tab长度
"editor.tabSize": 2,

// 启用后,将在保存文件时剪裁尾随空格。
"files.trimTrailingWhitespace": true,

// 配置 glob 模式以排除文件和文件夹。
"files.exclude": {
"**/.git": true,
"**/.svn": true,
"**/.DS_Store": true,
"**/.idea": true
},

// 配置 glob 模式以在搜索中排除文件和文件夹。从 files.exclude 设置中继承所有 glob 模式。
"search.exclude": {
"**/node_modules": true,
"**/bower_components": true,
"**/dist": true,
"**/coverage": true,
"**/doc": true
},

默认配置

VS Code常用插件

  • HTML Snippets:增强了zen-coding,增加了H5的自动补全,安装后每次打开自动启用(可能与其他插件冲突)。
  • Angular 1.x Snippets:增加了AngularJs 1在.html和.js中的代码补全,安装后每次打开自动启用。
  • Git Easy:增加了vscode中自带的git操作,安装后按F1调出控制台,输入git easy [options]完成git操作,代替git bash。
  • HTML CSS Support: 增加.html中css的代码补全,可以手动增加配置文件来增加外部css中的class补全。详情见插件说明。
  • VScode-icons: 美化VSCode的界面,在文件名前面显示小图标,安装后每次打开自动启用。
  • Git Blame:可以查看当前光标所在位置的Git Log,最近一次提交的人和时间,显示在左下角,安装后每次打开自动启用。
  • HTML CSS Class Completion:扫描项目中的所有css中的class名,在html中自动补全,安装后每次打开自动启用。注意:如果css过多容易卡死。
  • Debugger for Chrome:方便js调试的插件,前端项目在Chrome中运行起来之后,可以直接在VSCode中打断点、查看输出、查看控制台,需要配置launch.json,详情见插件说明。
  • Matlab:matlab代码高亮
  • LaTeX Workshop:可以方便的编辑,编译,预览LaTeX

VS Code常用快捷键

编辑器与窗口管理

同时打开多个窗口(查看多个项目)

  • 打开一个新窗口: Ctrl+Shift+N

  • 关闭窗口: Ctrl+Shift+W

    同时打开多个编辑器(查看多个文件)

  • 新建文件 Ctrl+N

  • 历史打开文件之间切换 Ctrl+TabAlt+LeftAlt+Right

  • 切出一个新的编辑器(最多3个)Ctrl+\,也可以按住Ctrl鼠标点击Explorer里的文件名

  • 左中右3个编辑器的快捷键Ctrl+1Ctrl+2Ctrl+3

  • 3个编辑器之间循环切换 Ctrl+ `

编辑器换位置,Ctrl+k然后按LeftRight

代码编辑

格式调整

  • 代码行缩进Ctrl+[Ctrl+]
  • 折叠打开代码块 Ctrl+Shift+[Ctrl+Shift+]Ctrl+C Ctrl+V如果不选中,默认复制或剪切一整行
  • 代码格式化:Shift+Alt+F,或Ctrl+Shift+P后输入format code
  • 修剪空格Ctrl+Shift+X
  • 上下移动一行: Alt+UpAlt+Down
  • 向上向下复制一行: Shift+Alt+UpShift+Alt+Down
  • 在当前行下边插入一行Ctrl+Enter
  • 在当前行上方插入一行Ctrl+Shift+Enter

光标相关

  • 移动到行首:Home
  • 移动到行尾:End
  • 移动到文件结尾:Ctrl+End
  • 移动到文件开头:Ctrl+Home
  • 移动到后半个括号 Ctrl+Shift+]
  • 选中当前行Ctrl+i(双击)
  • 选择从光标到行尾Shift+End
  • 选择从行首到光标处Shift+Home
  • 删除光标右侧的所有字Ctrl+Delete
  • 同时选中所有匹配的Ctrl+Shift+L
  • 回退上一个光标操作Ctrl+U

重构代码

  • 跳转到定义处:F12
  • 定义处缩略图:只看一眼而不跳转过去Alt+F12
  • 列出所有的引用:Shift+F12
  • 同时修改本文件中所有匹配的:Ctrl+F12
  • 重命名:比如要修改一个方法名,可以选中后按F2,输入新的名字,回车,会发现所有的文件都修改过了。
  • 跳转到下一个ErrorWarning:当有多个错误时可以按F8逐个跳转

查找替换

  • 查找 Ctrl+F
  • 查找替换 Ctrl+H
  • 整个文件夹中查找 Ctrl+Shift+F

显示相关

  • 全屏:F11
  • zoomIn/zoomOut:Ctrl + =/Ctrl + -
  • 侧边栏显/隐:Ctrl+B
  • 预览markdown Ctrl+Shift+V

其他

  • 自动保存:文件 -> 自动保存 ,或者Ctrl+Shift+P,输入 auto