VSCode 使用说明书

持续更新 V1.9

快捷键

快捷键 功能
Ctrl + Shift + F 自动排版
Shift + Alt + ←→ 扩大选择
Ctrl + / 单行注释
Shift + Alt + A 多行注释
Shift + Enter 下面新建一行
Ctrl + Shift + Enter 上面新建一行
F3 向下查找(== Ctrl + F,但光标停留在文档内)
Shift + F3 来实现自下而上的跳转
F2 重命名变量
Ctrl + . 代码提示(escape 取消提示)
等同于IDEA 查找/替换/全局替换
Ctrl + Shift + B 选中代码块
Ctrl + Backspace 删除前一个单词
Ctrl + Home/End 移动到文件末尾
Alt + Z Toggle word wrap
Ctrl + U 大写
Ctrl + L 小写
Ctrl + Shift + ][ 代码折叠
Ctrl + Shift + L Select all occurrences of current word
Ctrl + Alt + 添加多个复制游标(<==>Alt+ 鼠标),可以用来选择列
拖拽中键 添加多个光标
Ctrl + I 选中当前行
Ctrl + ][ 增加/减少缩进
Ctrl + Shift + A 向上复制一行
Ctrl + C 复制一行
三击 选中一行
四击 选中文档
Ctrl + 拖动 移动
Ctrl + Shift + 拖动 复制
沿着行号拖拽 选中多行
光标停留在变量/方法名,然后按下 Ctrl 查看定义
窗口
Ctrl + Shift + W 关闭窗口
Ctrl + W 关闭标签页
Ctrl + \ 切出一个新的编辑界面(最多 3 个)
Ctrl + Tab 切换标签
Alt+ ←→ 返回上一个标签
Alt+ Shift+ T 运行任务
Ctrl+ Shift+ = 重新运行上一个任务
Ctrl + P 转到文件(文件名:行数)
Ctrl + Tab 在文件列表中挑选
Ctrl + G : 行跳转
Ctrl + T # 支持在多个文件里进行符号跳转
Ctrl+ Shift+ O @ 符号来获取当前文件所有的 Symbols (变量/函数/类名/方法等等)
Ctrl+ Shift+ P > 命令面板( <==> F1)
Ctrl+ Alt+ R Snippet
视图
Ctrl + B Toggle 资源管理器
Ctrl + Shift + X 插件视图
Ctrl + Shift + E 文件视图
Ctrl + Shift + G Git 视图
Ctrl + Delete 进程管理器
Ctrl + Shift + U 输出面板
Ctrl + Shift + M 面板
Ctrl + +/- 缩放数据
Ctrl + K->S 快捷键
Ctrl + K->R 查看快捷键文档
Ctrl + K->T 更换主题
Ctrl+ Shift+ ` 命令行窗口
Ctrl+ Shift+ 5 拆分命令行窗口
Ctrl+ Shift+ C 打开 CMD 窗口
跳转
Ctrl + F12 查看实现(Java 才有接口概念)
Shift + F12 查看引用
F12 查看定义
调试
Alt + R Debug

Emmet

Emmet 的语法类似于 CSS 选择器,你通过写一段接近于 CSS 选择器的代码缩写,然后使用 Emmet 引擎将它展开成复杂但完整的 HTML 或者 CSS 代码。

语法 作用
ul>li*3 子节点+乘法操作
div+p+bq 兄弟节点
ul#list>li*3 ID
.logo <\div class=”logo”><\/div>
ul#navigation>li*5>a{Item $} Item 1~Item 5
! 快速生成 HTML
!!! <!DOCTYPE html>
p10 padding: 10px;
$ 占位符 序号
>li^div div和li上一级同级
div>(ul>li>a)+div>p 括号内容为一个代码块,表示与括号内部嵌套和外面层级无关
[] 属性指令
a[href=’###’ name=‘xiaoA’] 中括号内填写属性键值对的形式,并且空格隔开
{} 文本指令 ,如︰ ul>li.test$*3{测试$}
ul>.test$*3 部分标签可以不使用输入标签,直接输入指令,即可识别父类标签。

缩写包围
缩写展开已经非常强大了,但是 Emmet 里还有一个 “使用缩写包围” 命令,它是干什么用的呢?比如说,你已经写好了一段 HTML:

<span>Hello\</span>
然后你希望把它放到一个列表中。你当然可以先写一个 li,展开缩写,接着把上面的 HMTL 片段剪切到列表中。你也可以选中这段 HTML 片段,在命令面板中执行 “使用缩写包围”(Wrap with Abbreviation) 命令。接着,VS Code 就会显示一个输入框,你可以在这个输入框内填入 Emmet 缩写,这个缩写展开后,会自动把我们选中的 HTML 放在其中。Emmet 操作同样也支持多光标,如果你创建了多个光标,你可以同时在它们上面执行 “使用缩写包围” 命令。

删除节点。在 HTML 中删除 HTML 节点最麻烦的就是你需要把开、关两个节点都删除掉,否则 HTML 结构就不完整了。通过命令 “Emmet:移除标签”,你就可以同时将开、关两个节点都删除掉。

Emmet 支持
默认情况下,你可以直接在 html、haml、jade、slim、jsx、xml、xsl、css、scss、sass、less、stylus、handlebars、php 和 javascriptreact 中使用 Emmet 。但对于其他语言,你也可以通过如下的设置来将其打开。

1
2
3
4
5
6
7
> "emmet.includeLanguages": {
> "javascript": "javascriptreact",
> "vue-html": "html",
> "razor": "html",
> "plaintext": "jade"
> }
>

这段设置的要点就是,将某个 Emmet 默认不支持的语言,映射到一个 Emmet 支持的语言上。比如上面的设置里,我们把 vue-html 映射成了 html,那么当你在 vue-html 使用 Emmet 时,Emmet 就会把它当作 html 来处理了。

使用技巧

命令面板

Show running extensions 来查看所有你安装的正在运行的插件。

Configure User Snippets 打开代码片段

Markdown: Open Locked Preview to the Side 在侧边打开锁定的预览命令

Snippet

在每个 Tab Stop 的位置,我们可以提供占位符,也就是提前预设好一些值。但这些占位符是我们提前写在代码片段里的,跟当前代码的上下文往往没什么关系。不过,VS Code 的代码片段支持里,还提供了一种模板,叫做预设变量。

比如说,我们想在代码片段里的某个位置使用剪切板的内容,那么我们在那个位置写上 $CLIPBOARD 就好了,如果我们希望插入代码片段后自己可以修改这个值,也可以将它放在一个 Tab Stop 里面,语法则是 ${1:$CLIPBOARD}。

我们可以用 ${1:label} 来指定 Tab Stop 和占位符,但其实我们也可以在代码片段的多个位置使用同样的 Tab Stop 。

创建多层子文件夹和文件

在 VS Code 的资源管理中,当你需要创建一个文件夹,然后在这个文件夹中创建一个新文件时,你其实可以做到一步完成它们的创建。方法是:点击创建文件的按钮,然后在输入框中输入folderName/fileName即可。

配置

  1. 自动保存︰File- Preferences - Setting - User - auto save -

    afterdelay

    下面有个数字1000表示1秒,这个可自行设置,表示多少秒以后自动保存

  2. 自动格式化: File(文件)- Preferences(首选项)- Setting (设置)

    User(用户)- Text-Editor(文本编辑)- Formatng(格式化)

  3. 面包屑

    VS Code 在最近几个月才添加了面包屑这个功能,并且默认是关闭的。要打开这个功能,我们需要“打开设置”(Open Settings),搜索 “breadcrumbs.enabled”

  4. 这每一个“点”都代表着一个空格符。你可以通过设置 editor.renderWhitespace: all 让编辑器将所有的空格符、制表符等全部都渲染出来。这样你就能够一眼看出这个文件中使用的究竟是制表符还是空格符,以及有没有在哪里不小心多打了一个空格等。

  5. 第二行到第六行代码的中间,从内到外你能够依次看到两个竖线。这两个竖线就是缩进参考线。编辑器会根据你指定的制表符的长度,来决定缩进参考线的位置。这样你就可以非常清楚地知道代码有没有正确地缩进,而且也方便你区分出不同代码块之间的层级关系。这个功能是可以通过 editor.renderIndentGuides 来控制开关的。

  6. 当你按下 Ctrl + N在编辑器里创建一个新文件的时候,这个新的文件会被识别为普通文本文件,你在里面书写内容时并没有合适的语法高亮和自动补全,所以你可能会经常看到有些用户,创建了新的空文件后,然后再去调整文件的语言类型。

    但是,如果通过把 files.defaultLanguage 设置为你想要的语言,比如说,把它设置成 “Markdown”,那么创建空文件的时候,VS Code 就会把它当作一个 Markdown 文件,然后你在里面能够得到 Markdown 的所有语言支持。

插件

插件名 作用
Paste Json As Code 将复制黏贴来的json文件直接序列化成代码(比如java)
VS Live Share 完成真正的远程实时代码协同开发
JSHint JavaScript 静态代码分析工具
VSCode-Icons 插件可以实现对各种文件类型的文件前的图标进行优化显示
Code Runner 多语言环境,适合用来学习
Document This 快速生成注释
IntelliSense for CSS css class名提示
Faker Faker 可以随机生成姓名、地址、图像、电话乱数假文段落
CSS Peek 追踪至样式表中 CSS 类和 ids 定义的地方
HTML Boilerplate HTML 模版插件
Prettier 是目前 Web 开发中最受欢迎的代码格式化程序
Icon Fonts 能够在项目中添加图标字体插件,支持超过 20 个热门的图标集
Minify 用于压缩合并 JavaScript 和 CSS 文件的应用程序
Change Case 修改文本的更多命名格式,包括驼峰命名、下划线分隔命名
Regex Previewer 将正则表达式模式应用在任何打开的文件上
Image preview 描述:引入图片左侧导航条显示图像预览
Fundebug 专注JavaScript、微信小程序、ReactNative、Node.jsBUG监控
GitLens 帮助我们通过Git注释和代码镜头一目了然地查看代码作者身份
Setting Syncing 用GitHub绑定id上传插件信息,新电脑用此id可下载之前插件
jQuery Code Snippets query 快捷提示
Open in browser 在浏览器运行当前页面,快捷键(option+B)
Debugger for Chrom 配合 chrome 进行 debug
HTML CSS Support html,css 提示
Emmet HTML 格式提示
Vetur Vue 语法高亮
Sass Sass必装
language-stylus 支持 stylus

ESLint 是一个语法规则和代码风格的检查工具,可以用来保证写出语法正确、风格统一的代码。

而 VSCode 中的 ESLint 插件就直接将 ESLint 的功能集成好,安装后即可使用,对于代码格式与规范的细节还可以自定义,并且一个团队可以共享同一个配置文件,这样一个团队所有人写出的代码就可以使用同一个代码规范,在代码签入前每个人可以完成自己的代码规范检查。

知识点

VS Code 则选择了一种相对轻量,而且大家都易于理解的方式,那就是所有的操作都基于文件和文件夹。当你打开一个文件夹,VS Code 的核心功能就会对这个文件夹进行分析,并提供对应的功能。比如,在打开的文件夹下检测到有 .git 文件,就加载 Git 插件来提供版本管理的功能;或者发现文件夹下有 tsconfig.json ,就会激活 TypeScript 插件提供语言服务。

看到这里你可能会问,VS Code 是 基于文件夹来进行管理的,各个插件也会分析当前打开的文件夹,但这是不是也意味着 VS Code 其实对项目没有任何管理和配置的能力呢?

其实不然,VS Code 是允许你创建几个跟当前文件夹或者跟项目有关的配置保存在这个文件夹中。这跟 IDE 的工程文件的思路是一致的,把设置放在这个文件夹中,便于团队内部进行共享。但二者区别在于,VS Code 的绝大部分功能,不需要这些配置文件也能工作,同时,这些文件都尽可能保证易于阅读和修改。

1
2