Vscode前端开发插件大全

 阅读约 63 分钟

快捷键

通用快捷键

快捷键 作用
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

Vue

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

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 : 写原生微信小程序必备的插件,智能补全,函数跳转等等

代码测试

代码质量把控

  • 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: 这个就厉害了.可以完美的展示你写的正则,图形化给你看你写正则的形成

文章撰写

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,作用类似同上

语法校验

代码片段插件

阅读 956更新于 9月11日
推荐阅读
移动端技术
用户专栏

移动端技术汇总

1463 人关注
52 篇文章
专栏主页
目录