Vscode前端开发插件大全

快捷键

通用快捷键

快捷键	作用
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 : 代码协作,会使用上面这个插件的小伙伴,肯定也会用这个插件

文件支持系列

• docs-yaml : 提供yaml的智能补全和语法校验功能
• DotENV : env文件的支持

工具篇

• 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 规范的文档)

• 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及以下的代码片段，实用