插件:
通用插件
在function上输入/** tab
注释JS
Open HTML in Default Browser
在浏览器中打开
Live HTML Previewer
在vsCode中打开浏览器
(preview)
CSS Peek
给你发送样式设置的 CSS 代码
HTML Snippets
超级实用且初级的 H5代码片段以及提示
HTML CSS Support
让 html 标签上写class 智能提示当前项目所支持的样式
jQuery Code Snippets
超级实用且初级的 jQuery 代码片段以及提示
vscode-icon
让 vscode 资源树目录加上图标,必备良品!
Project Manager
在多个项目之前快速切换的工具
beautify
格式化代码的工具
Bootstrap 3 Sinnpet
常用 bootstrap 的可以下
Atuo Rename Tag
修改 html 标签,自动帮你完成尾部闭合标签的同步修改,不过有些bug。
fileheader
顶部注释模板,可定义作者、时间等信息,并会自动更新最后修改时间 (Ctrl + Alt + i)
filesize
在底部状态栏显示当前文件大小,点击后还可以看到详细创建、修改时间
Bracket Pair Colorizer
让括号拥有独立的颜色,易于区分。可以配合任意主题使用。
SVG Viewer
此插件在 Visual Studio 代码中添加了许多实用的 SVG 程序,你无需离开编辑器,便可以打开 SVG 文件并查看它们。同时,它还包含了用于转换为 PNG 格式和生成数据 URI 模式的选项。
Minify
这是一款用于压缩合并 JavaScript 和 CSS 文件的应用程序。它提供了大量自定义的设置,以及自动压缩保存并导出为.min文件的选项。它能够分别通过 uglify-js、clean-css 和 html-minifier,与 JavaScript、CSS 和 HTML 协同工作。
(Minify)
Git Easy
增加了vscode中自带的git操作,安装后按F1调出控制台,输入git easy [options]完成git操作
JavaScript (ES6) snippets
支持JavaScript ES6 语法
Easy less
支持less语法
Vue插件
vetur
语法高亮、智能感知、Emmet等
Vue 2 Snippets
vue 代码提示,高亮。 (ps:使用其他框架,直接搜就好,像是react,angular,就会出现相关的代码提示和语法支持常用插件)
VueHelper
snippet代码片段
Import Cost
引入包大小计算,对于项目打包后体积掌握很有帮助
主题
Dracula
目前我觉得是vscode上最漂亮的主题,vscode 1.11+允许自定义statusBar等全局ui后,该主题也跟进改了很多小细节,良心!~
vsc常用快捷键:
同时打开多个窗口(查看多个项目)
- 打开一个新窗口: Ctrl+Shift+N
- 关闭窗口: Ctrl+Shift+W
同时打开多个编辑器(查看多个文件)
- 新建文件 Ctrl+N
- 历史打开文件之间切换 Ctrl+Tab,Alt+Left,Alt+Right
- 切出一个新的编辑器(最多3个)Ctrl+\,也可以按住Ctrl鼠标点击Explorer里的文件名
- 左中右3个编辑器的快捷键Ctrl+1 Ctrl+2 Ctrl+3
- 3个编辑器之间循环切换 Ctrl+`
- 编辑器换位置,Ctrl+k然后按Left或Right
格式调整
- 代码行缩进Ctrl+[, Ctrl+]
- 折叠打开代码块 Ctrl+Shift+[, Ctrl+Shift+]
- Ctrl+C Ctrl+V如果不选中,默认复制或剪切一整行
- 代码格式化:Shift+Alt+F,或Ctrl+Shift+P后输入format code
- 修剪空格Ctrl+Shift+X
- 上下移动一行: Alt+Up 或 Alt+Down
- 向上向下复制一行: Shift+Alt+Up或Shift+Alt+Down
- 在当前行下边插入一行Ctrl+Enter
- 在当前行上方插入一行Ctrl+Shift+Enter
光标相关
- 移动到行首:Home
- 移动到行尾:End
- 移动到文件结尾:Ctrl+End
- 移动到文件开头:Ctrl+Home
- 移动到后半个括号 Ctrl+Shift+]
- 选中当前行Ctrl+i(双击)
- 选择从光标到行尾Shift+End
- 选择从行首到光标处Shift+Home
- 删除光标右侧的所有字Ctrl+Delete
- Shrink/expand selection: Shift+Alt+Left和Shift+Alt+Right
- Multi-Cursor:可以连续选择多处,然后一起修改,Alt+Click添加cursor或者Ctrl+Alt+Down 或 Ctrl+Alt+Up
- 同时选中所有匹配的Ctrl+Shift+L
- Ctrl+D下一个匹配的也被选中(被我自定义成删除当前行了,见下边Ctrl+Shift+K)
- 回退上一个光标操作Ctrl+U
重构代码
- 跳转到定义处:F12
- 定义处缩略图:只看一眼而不跳转过去Alt+F12
- 列出所有的引用:Shift+F12
- 同时修改本文件中所有匹配的:Ctrl+F12
- 重命名:比如要修改一个方法名,可以选中后按F2,输入新的名字,回车,会发现所有的文件都修改过了。
- 跳转到下一个Error或Warning:当有多个错误时可以按F8逐个跳转
- 查看diff 在explorer里选择文件右键 Set file to compare,然后需要对比的文件上右键选择Compare with 'file_name_you_chose'.
查找替换
- 查找 Ctrl+F
- 查找替换 Ctrl+H
- 整个文件夹中查找 Ctrl+Shift+F
显示相关
- 全屏:F11
- zoomIn/zoomOut:Ctrl + =/Ctrl + -
- 侧边栏显/隐:Ctrl+B
- 预览markdown Ctrl+Shift+V
其他
- 自动保存:File -> AutoSave ,或者Ctrl+Shift+P,输入 auto
此文章多个作者综合合成如上内容