快捷键
通用快捷键
| 快捷键 | 作用 |
|---|---|
| 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,phpBash 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: 快速生成
.gitignoretea-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的某个keyBabelrc: 验证
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及以下的代码片段，实用
