代码编辑器(IDE) VS Code 常用扩展插件/快捷键大全


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,详情见插件说明。

background VSCode美化插件,修改界面背景,详情见插件说明。

Auto Close Tag 自动闭合HTML标签

Auto Rename Tag 修改HTML标签时,自动修改匹配的标签

Bookmarks 添加行书签

Code Runner 运行选中代码段(支持大量语言,包括Node)

CodeBing 在VSCode中弹出浏览器并搜索,可编辑搜索引擎

Color Highlight 颜色值在代码中高亮显示

Color Picker 拾色器

Document This 注释文档生成

EditorConfig for VS Code EditorConfig 插件

Emoji 在代码中输入emoji

ESLint ESLint插件,高亮提示

File Peek 根据路径字符串,快速定位到文件

Font-awesome codes for html FontAwesome提示代码段

ftp-sync 同步文件到ftp

Git Blame 在状态栏显示当前行的Git信息

Git History(git log) 查看git log

GitLens 显示文件最近的commit和作者,显示当前行commit信息

Guides 高亮缩进基准线

Gulp Snippets Gulp代码段

HTML CSS Class Completion CSS class提示

HTML CSS Support css提示(支持vue)

HTMLHint HTML格式提示

Indenticator 缩进高亮

JavaScript (ES6) code snippets ES6语法代码段

language-stylus
Stylus语法高亮和提示

Lodash Lodash代码段

markdownlint Markdown格式提示

MochaSnippets Mocha代码段

Node modules resolve 快速导航到Node模块

npm 运行npm命令

npm Intellisense 导入模块时,提示已安装模块名称

Output Colorizer 彩色输出信息

Partial Diff 对比两段代码或文件

Path Autocomplete 路径完成提示

Path Intellisense 另一个路径完成提示

Prettify JSON 格式化JSON

Project Manager 快速切换项目

REST Client 发送REST风格的HTTP请求

Settings Sync VSCode设置同步到 Gist

String Manipulation 字符串转换处理(驼峰、大写开头、下划线等等)

Test Spec Generator 测试用例生成(支持chai、should、jasmine)

TODO Parser Todo管理

Version Lens package.json文件显示模块当前版本和最新版本

vetur 目前比较好的Vue语法高亮

View Node Package 快速打开选中模块的主页和代码仓库

vscode-icons 文件图标,方便定位文件

VSCode Great Icons 文件图标拓展

VueHelper Vue2代码段(包括Vue2 api、vue-router2、vuex2)

VS Code 常用/实用快捷键大全 代码编辑器(IDE)

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

打开一个新窗口: 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


Notepad++快捷键及使用技巧 >>


没有账号? 忘记密码?

社交账号快速登录