快捷键
通用快捷键
快捷键 | 作用 |
---|---|
Ctrl+Shift+P,F1 | 展示全局命令面板 |
Ctrl+P | 快速打开最近打开的文件 |
Ctrl+Shift+N | 打开新的编辑器窗口 |
Ctrl+Shift+W | 关闭编辑器 |
基础编辑
快捷键 | 作用 |
---|---|
Ctrl + X | 剪切 |
Ctrl + C | 复制 |
Alt + up/down | 移动行上下 |
Shift + Alt up/down | 在当前行上下复制当前行 |
Ctrl + Shift + K | 删除行 |
Ctrl + Enter | 在当前行下插入新的一行 |
Ctrl + Shift + Enter | 在当前行上插入新的一行 |
Ctrl + Shift + | 匹配花括号的闭合处,跳转 | |
Ctrl + ] / [ | 行缩进 |
Home | 光标跳转到行头 |
End | 光标跳转到行尾 |
Ctrl + Home | 跳转到页头 |
Ctrl + End | 跳转到页尾 |
Ctrl + up/down | 行视图上下偏移 |
Alt + PgUp/PgDown | 屏视图上下偏移 |
Ctrl + Shift + [ | 折叠区域代码 |
Ctrl + Shift + ] | 展开区域代码 |
Ctrl + K Ctrl + [ | 折叠所有子区域代码 |
Ctrl + k Ctrl + ] | 展开所有折叠的子区域代码 |
Ctrl + K Ctrl + 0 | 折叠所有区域代码 |
Ctrl + K Ctrl + J | 展开所有折叠区域代码 |
Ctrl + K Ctrl + C | 添加行注释 |
Ctrl + K Ctrl + U | 删除行注释 |
Ctrl + / | 添加关闭行注释 |
Shift + Alt +A | 块区域注释 |
Alt + Z | 添加关闭词汇包含 |
导航
快捷键 | 作用 |
---|---|
Ctrl + T | 列出所有符号 |
Ctrl + G | 跳转行 |
Ctrl + P | 跳转文件 |
Ctrl + Shift + O | 跳转到符号处 |
Ctrl + Shift + M | 打开问题展示面板 |
F8 | 跳转到下一个错误或者警告 |
Shift + F8 | 跳转到上一个错误或者警告 |
Ctrl + Shift + Tab | 切换到最近打开的文件 |
Alt + left / right | 向后、向前 |
Ctrl + M | 进入用Tab来移动焦点 |
查询与替换
快捷键 | 作用 |
---|---|
Ctrl + F | 查询 |
Ctrl + H | 替换 |
F3 / Shift + F3 | 查询下一个/上一个 |
Alt + Enter | 选中所有出现在查询中的 |
Ctrl + D | 匹配当前选中的词汇或者行,再次选中-可操作 |
Ctrl + K Ctrl + D | 移动当前选择到下个匹配选择的位置(光标选定) |
Alt + C / R / W |
多行光标操作于选择
快捷键 | 作用 |
---|---|
Alt + Click | 插入光标-支持多个 |
Ctrl + Alt + up/down | 上下插入光标-支持多个 |
Ctrl + U | 撤销最后一次光标操作 |
Shift + Alt + I | 插入光标到选中范围内所有行结束符 |
Ctrl + I | 选中当前行 |
Ctrl + Shift + L | 选择所有出现在当前选中的行-操作 |
Ctrl + F2 | 选择所有出现在当前选中的词汇-操作 |
Shift + Alt + right | 从光标处扩展选中全行 |
Shift + Alt + left | 收缩选择区域 |
Shift + Alt + (drag mouse) | 鼠标拖动区域,同时在多个行结束符插入光标 |
Ctrl + Shift + Alt + (Arrow Key) | 也是插入多行光标的[方向键控制] |
Ctrl + Shift + Alt + PgUp/PgDown | 也是插入多行光标的[整屏生效] |
丰富的语言操作
快捷键 | 作用 |
---|---|
Ctrl + Space | 输入建议[智能提示] |
Ctrl + Shift + Space | 参数提示 |
Tab | Emmet指令触发/缩进 |
Shift + Alt + F | 格式化代码 |
Ctrl + K Ctrl + F | 格式化选中部分的代码 |
F12 | 跳转到定义处 |
Alt + F12 | 代码片段显示定义 |
Ctrl + K F12 | 在其他窗口打开定义处 |
Ctrl + . | 快速修复部分可以修复的语法错误 |
Shift + F12 | 显示所有引用 |
F2 | 重命名符号 |
Ctrl + Shift + . / , | 替换下个值 |
Ctrl + K Ctrl + X | 移除空白字符 |
Ctrl + K M | 更改页面文档格式 |
编辑器管理
快捷键 | 作用 |
---|---|
Ctrl + F4, Ctrl + W | 关闭编辑器 |
Ctrl + k F | 关闭当前打开的文件夹 |
Ctrl + |切割编辑窗口 | |
Ctrl + 1/2/3 | 切换焦点在不同的切割窗口 |
Ctrl + K Ctrl <-/-> | 切换焦点在不同的切割窗口 |
Ctrl + Shift + PgUp/PgDown | 切换标签页的位置 |
Ctrl + K <-/-> | 切割窗口位置调换 |
文件管理
快捷键 | 作用 |
---|---|
Ctrl + N | 新建文件 |
Ctrl + O | 打开文件 |
Ctrl + S | 保存文件 |
Ctrl + Shift + S | 另存为 |
Ctrl + K S | 保存所有当前已经打开的文件 |
Ctrl + F4 | 关闭当前编辑窗口 |
Ctrl + K Ctrl + W | 关闭所有编辑窗口 |
Ctrl + Shift + T | 撤销最近关闭的一个文件编辑窗口 |
Ctrl + K Enter | 保持开启 |
Ctrl + Shift + Tab | 调出最近打开的文件列表,重复按会切换 |
Ctrl + Tab | 与上面一致,顺序不一致 |
Ctrl + K P | 复制当前打开文件的存放路径 |
Ctrl + K R | 打开当前编辑文件存放位置【文件管理器】 |
Ctrl + K O | 在新的编辑器中打开当前编辑的文件 |
显示
快捷键 | 作用 |
---|---|
F11 | 切换全屏模式 |
Shift + Alt + 1 | 切换编辑布局【目前无效】 |
Ctrl + =/- | 放大 / 缩小 |
Ctrl + B | 侧边栏显示隐藏 |
Ctrl + Shift + E | 资源视图和编辑视图的焦点切换 |
Ctrl + Shift + F | 打开全局搜索 |
Ctrl + Shift + G | 打开Git可视管理 |
Ctrl + Shift + D | 打开DeBug面板 |
Ctrl + Shift + X | 打开插件市场面板 |
Ctrl + Shift + H | 在当前文件替换查询替换 |
Ctrl + Shift + J | 开启详细查询 |
Ctrl + Shift + V | 预览Markdown文件【编译后】 |
Ctrl + K v | 在边栏打开渲染后的视图【新建】 |
调试
快捷键 | 作用 |
---|---|
F9 | 添加解除断点 |
F5 | 启动调试、继续 |
F11 / Shift + F11 | 单步进入 / 单步跳出 |
F10 | 单步跳过 |
Ctrl + K Ctrl + I | 显示悬浮 |
集成终端
快捷键 | 作用 |
---|---|
Ctrl + ` | 打开集成终端 |
Ctrl + Shift + ` | 创建一个新的终端 |
Ctrl + Shift + C | 复制所选 |
Ctrl + Shift + V | 复制到当前激活的终端 |
Shift + PgUp / PgDown | 页面上下翻屏 |
Ctrl + Home / End | 滚动到页面头部或尾部 |
前端适用插件
功能性
- Auto Close Tag : 匹配标签,关闭对应的标签。很实用【HTML/XML】
- Auto Rename Tag: sublime和webstorm也有这个内置功能,改变标签的时候同时改动开闭合标签;【HTML/XML】
- beautify: 良好的拓展性,可以格式化
JSON|JS|HTML|CSS|SCSS
,比内置格式化好用 - Code Runner : 代码编译运行看结果,支持众多语言
- colorize: 会给颜色代码增加一个当前匹配代码颜色的背景,非常好
- Document This : JSDOC注解调用,值得易用
- Git History : 不得不赞的插件,谁用谁知道,功能很赞
- HTML CSS Support : 这个也是必备插件之一
- Path Autocomplete : 路径智能补全
- Path Intellisense : 路径智能提示.
- SCSS IntelliSense Preview: SCSS智能提醒,配置强大
- Syncing: 这个同步插件要比官方市场那个最高下载量的要好,支持删除同步!!!
- Version Lens : 可以及时看到
package.json
内部版本的变动,很实用 - Output Colorizer : 可以终端日志输出着色,实用
React
- ES7 React/Redux/GraphQL/React-Native snippets:最好用的
snippet
汇总,非常全面,墙裂推荐!!! - react-explorer-addons: 增加鼠标右键直接生成react的组件模板,好不好用,用过的才知道
- React PropTypes Intellisense: React props的智能提示
- vscode-styled-components: 对
styled-componnents
的支持,高亮包括智能提示 - styled-components-snippets:
styled-components
的代码片段 - React PropTypes Generate: 一键生成
react
的proptypes
, 不用ts
的小伙伴必备 - React JavaScript to TypeScript Transformer for VSCode:
React
的js
版本转ts
版本,有些瑕疵,但可用 - React Native Tools: 让
vscode
可以写 RN 的插件,包括调试! - Auto Import - ES6, TS, JSX, TSX: 这个插件是作者在一个长期不更新的项目加以维护的,类似智能补全的,基本跟进主流
- Useful React Snippets: React的snippet
- React-Native/React/Redux snippets for es6/es7:这个是比较重量级的插件,而且作者更新很勤快
- Typescript React/Redux Snippets:
ts
语法的react
代码片段
Vue
- Vue TypeScript Snippets: 针对
vue
的ts
代码片段 - Axios Snippets:
axios
的默认api
智能提示,ts/html/js/vue
都支持..不支持react
(看它的发包json
) - vusion peek :
Vue
组件快速跳转(Peek
) - TSLint Vue: 让tslint 支持
vue
单组件内ts
的语法
Typescript
- Comments in Typescript: 针对
TS
的注释插件,基于JSDoc
定制 - Class IO: 可以显示引用类相关的关系(在代码编辑区域显示一个对应的标志位)
- ClassLens: 快速跳转到类的相关引用
- TSLens:
tslens
的gutter,可以让你更直观的看到不同类型的引用,支持五种类型 - TypeLens : 类型引用索引展示,用过
visual studio
的都看到过,相当强大的一个功能;换个名词可能更多人知道,peek file
- TypeScript Import : 专门处理TS内模块导入的,和第一个互补;
- Typings : 这个就是用来处理
d.ts
的 - Latest TypeScript and Javascript Grammar :完美的支持beta及稳定版本的TS语法;
- JSON to TS:有了这个来声明和后台协商的对接接口简直不能再方便了【
typescript interface
】 - Auto Import : 对于一堆组件的我们来说,这货简直贴心,支持JSX和typescript,还有一些细致化的配置参数
- exports autocomplete : 和上个功能类似但是不等同,相当实用
GraphQL
- GraphQL: 让VS Code支持
GraphQL
Node
npm-import-package-version: 在引入模块的时候直接展示该模块的版本,很实用!!
eggjs: 蛋框的相关帮助插件,代码片段,智能提示等
egg-jump-definition: 蛋框的函数跳转
npm Intellisense: 正如标题所说,在写引入模块的时候智能提示!!
NPM Smart Importer: 与上个的插件的差异是智能补全,比如你 copy 了一些代码,而木有引入部分模块!可以点击引入!
NPM Dependency Links: 这个就是方便你在初始化脚手架项目之后想了解某些模块,点击直接调到npm 模块发布页面…省去了打开浏览器,搜索….
ExpressJs 4 Snippets: 如标题所言,里面汇总了70个片段,基本是 ES6的语法的!!
Pug: 这是模板语言的代码片段,严格来说并不属于
node
,问题这货基本用于服务端渲染的模板语言,一般和 node 的服务端框架搭配…
微信小程序
- mpvue snippets:
mpvue
的一些代码片段,以及部分原生小程序的代码提示 - minapp: 用
VS Code
写小程序必备的插件,里面有众多实用的特性集成 - minapp : 写原生微信小程序必备的插件,智能补全,函数跳转等等
代码测试
- js-test-gen-vscode: 可以针对部分函数直接生成jest单元测试代码
- Jest: 让你写
Jest
代码有IDE的感觉 - Mocha Test Explorer: 针对
mocha
测试的GUI话,会给编辑器多一个独立的版块 - Coverage Gutters: 可以直观的看到你代码覆盖率的区域
代码质量把控
- CodeMetrics: 可以计算TS/JS内代码的复杂度(比如函数这些),这些与代码质量和性能是挂钩的
- Import Cost: 就是你import一个东西的时候,可以计算改引入模块的大小!!!厉害吧
- Prettier: 这个东西在github上挺火,可以支持很多种新框架的格式,高度自定义,所以有人封装成了插件..实用!(vue,ng,react,jsx,ts)这些格式化毫无压力
代码可视化改善
- Polacode: 生成精美的代码截图,很漂亮,根据你当前主题配色生成的
- vscode-pigments: 代码页面展示颜色代码并展示对应的颜色,非常实用
- Json Editor: 非常实用的可视化
JSON
编辑,不容错过 - Subtle Match Brackets:快速高亮你配置的闭合,对于聚焦我们的光标区块代码很有帮助
- vscode-live-server: 非常全面的HTML预览工具,支持众多实际开发需要的特性,比如
https
,代理
,cros
- Filter Line: 对于处理日志文件,可以快速筛选出我们需要聚焦的内容
- Better Comments: 最好用的注释区域高亮,对于TODO这些支持也很好
- :emojisense:: 可配置化(针对语言),智能提示emoji,非常实用..走过路过不要错过
- Markdown Header Coloring: 给
Markdown
的标题区域添加一个亮瞎眼的颜色… - BreadCrumb in StatusBar: 面包屑的支持,在底部状态栏展示
改善编码体验
Vim: 王牌插件,让
vscode
支持vim
的常用特性,还集成几种常用vim
插件的特性,喜欢的不容错过Class Helper: 对
class
快速编辑,支持ts,js,php
Bash IDE: 对
bash
提供类似IDE的体验,跳转,智能提示这些JSON Helper: 提供大纲功能,可以快速跳转编辑
Shortcut Menu Bar: 把几个很常用的行为做成图标内置在编辑区域内,对于非快捷键熟练的小伙伴有所用处
YAML Support by Red Hat Preview: 涵盖了对
YAML
的校验,智能提示,对于用这个写配置文件的很有用处indent-rainbow: 会给缩进添加一种颜色,让你更加直观的看到代码层次
Web Search: 选择代码内容,快速跳转到搜索引擎,支持
Google, DuckDuckGo, StackOverflow
三种引擎,打开的是默认本地浏览器vscode-pdfviewer: 让
VS Code
可以阅读PDF
文档,支持目录这些Projects+: 项目管理必备插件,可以快速录入本地项目的地址,打开..非常实用
VS DocBlockr:
Atom
插件Docblockr
移植版,非常好用的注释插件Visual Studio IntelliCode - Preview: 提供AI支持(强化你的代码智能提示),微软出品
File Utils: 非常实用的一个文件工具集,脱离鼠标,直接操作当前打开的页面.
npm-ui: 侧边栏添加npm图标,npm菜单内可以直接执行命令
NPM Scripts: 命令行执行npm命令 ,可以算是
npm ui
的非UI版本Surround: 快速包裹代码并且添加对应的条件语句,很实用
koroFileHeader: 快速添加注解到文件头部(预定义模板),比如创建时间,谁创建的
gi: 快速生成
.gitignore
tea-time: 番茄计时器!有助于改善你长期盯电脑的习惯,到点去喝杯水缓缓什么的
Visual Snake Code: 撸代码累了.来一把贪吃蛇?然后继续苦逼!
javascript console utils: 快速生成
console.log
(选中)Turbo Console Log: 与上面那个类似,功能弱化些
clear-console: 快速清除当前文件内的
console.log
信息,很实用Node JSON Autocomplete: 对于引入
json
文件提供智能提示
协作系列
- VS Live Share Whiteboard :
Live Share
画板支持,这下子不仅代码能协作,思路也能演示了 - VS Live Share : 代码协作,会使用上面这个插件的小伙伴,肯定也会用这个插件
文件支持系列
工具篇
Error Gutters: 会把错误显示为图标,类似
git gutter
,一目了然carbon-now-sh: 快速生成漂亮的代码图片
Bracket Pair Colorizer 2: 原作者的第二版,括号高亮匹配更快速
file-tree-generator:
tree
命令的鼠标操作版,还会输出icon符号TypeScript Import Sorter: 适合强迫症用户,给引入语句进行排序,可以单文件或者整个目录深度遍历
JSON Tree View: 可视化跳转
json
,适合懒人快速定位json
的某个key
Babelrc: 验证
babelrc
内的语法格式!!CodeMap: 可以理解为”大纲”,支持
ts
,md
,python
. 挺实用的Debugger for Chrome: 更新迭代了那么久,稳定性已经很不错了,非常棒的调试工具.用过都说好
Complete JSDoc Tags: 智能提示补全
JSDOC
的语法Git Project Manager: 适合有多个
git
项目的小伙伴,可以快速跳转,比如打开文件夹慢慢找快 N 倍Git Branch Warnings: 一个很温馨的提醒,可以高亮某个分支提醒你要慎重,这个小功能感觉以后会内置
Git Lens: 暂时没有发现比这个看git记录更为详细了,内置功能很多..很方便
jumpy: 羡慕
vim
党,但是不会耍,想快速跳转到指定位置!这个就可以…licenser: 可以快速生成开源协议的头部!!,配置自己的用户名和邮箱等,挺实用的
Bookmarks: 给文件某个位置打标签,用来快速跳转的..不知道这个功能到现在为何没内置!!
RegExp Preview and Editor: 这个就厉害了.可以完美的展示你写的正则,图形化给你看你写正则的形成
文章撰写
- PicGo : 很实用的图床上传工具,直接返回
url
,用了都说好. - MarkDown Link Suggestions :
md
内本地资源智能提示 - Markdown Command Assist:傻瓜化
md
使用,鼠标右键选择生成
Markdown(md 规范的文档)
为什么单独抽出来,有好几个实用的插件…打造好完全不输所谓的纯 MD 编辑器好么!!!
- Markdown Preview Enhanced: 国人出品的精品插件!!!涵盖的东西很多,上至公式下至导出(装了这个其他都是可以选装了),不过你要跟着它提供的文档把对应的功能点依赖给补齐了..适合愿意折腾的
- Markdown All in One: 添加了一些内置md 没有的,比如支持 github的
tasklist
,table formatter
,还有TOC
和快捷键这些 - Markdown+Math: 支持多种数学公式的展示!!
- Markdown PDF: 把 MD 转为 PDF,支持
emoji
,checkbox
和语法高亮 - Markdown Preview Mermaid Support:支持
Mermaid
规范的流程表生成 - Markdown Emoji: 支持 md 插入
emoji
..但是用起来支持的力度不怎么够,不知道作者会不会继续维护下去..但是常见的emoji
是有的
css or scss
- css-triggers:这个插件的亮点就是可以看到渲染的流程和理论…可以当做参考工具
- HTML SCSS Support: scss的智能补全,支持在
html
,ng
,vue
,.net
等使用(布局局限具体看文档). - Autoprefixer: 若是基于脚手架的项目基本配置下就好了(不用这个插件)..这个一般用于你想写点什么或者维护老项目,可以省点时间的
- CSS Grid Snippets:
CSS Grid
的代码片段,CSS Grid
是下一代的布局姿势,不过目前兼容性很渣..成为主流可能要等个三四年,移动端上好一些(但只限于比较新的系统) - SCSS IntelliSense: scss的智能提示
- CSS Blocks: 支持css模块化的智能提示,跳转
- perfect-css-modules:
css modules
,作用类似同上
语法校验
- stylelint: 比内置的要全,更智能
代码片段插件
- JavaScript (ES6) code snippets : ES6的代码片段,实用
- JavaScript Snippet Pack : ES5及以下的代码片段,实用