常用插件

• StandandJS

开发语言相关

React

• ES7 React/Redux/GraphQL/React-Native snippets (opens new window):最好用的snippet汇总,非常全面,墙裂推荐!!!

• react-explorer-addons (opens new window): 增加鼠标右键直接生成react的组件模板,好不好用,用过的才知道

• CSS Blocks (opens new window): 支持css模块化的智能提示,跳转

• perfect-css-modules (opens new window): css modules ,作用类似同上

• React PropTypes Intellisense (opens new window): React props的智能提示

• vscode-styled-components (opens new window): 对styled-componnents的支持,高亮包括智能提示

• styled-components-snippets (opens new window) : styled-components的代码片段

• React PropTypes Generate (opens new window) : 一键生成react的proptypes , 不用ts的小伙伴必备【推荐】

• React JavaScript to TypeScript Transformer for VSCode (opens new window) : React的js版本转ts版本,有些瑕疵,但可用

Vue

• Vue TypeScript Snippets (opens new window) : 针对vue的ts代码片段
• Axios Snippets (opens new window) : axios的默认api智能提示,ts/html/js/vue都支持..不支持react(看它的发包json)
• vusion peek (opens new window) : Vue组件快速跳转(Peek)

Typescript

• Comments in Typescript (opens new window): 针对TS的注释插件,基于JSDoc定制
• Class IO (opens new window) : 可以显示引用类相关的关系(在代码编辑区域显示一小程序系列个对应的标志位)
• ClassLens (opens new window) : 快速跳转到类的相关引用
• TSLens (opens new window): tslens的gutter,可以让你更直观的看到不同类型的引用,支持五种类型

GraphQL

• GraphQL (opens new window): 让VS Code支持GraphQL

Node

• npm-import-package-version (opens new window) : 在引入模块的时候直接展示该模块的版本,很实用!!

• eggjs (opens new window): 蛋框的相关帮助插件,代码片段,智能提示等

• egg-jump-definition (opens new window): 蛋框的函数跳转

• npm Intellisense (opens new window) : 正如标题所说,在写引入模块的时候智能提示!!

• NPM Smart Importer (opens new window) : 与上个的插件的差异是智能补全,比如你 copy 了一些代码,而木有引入部分模块!可以点击引入!

• NPM Dependency Links (opens new window) : 这个就是方便你在初始化脚手架项目之后想了解某些模块,点击直接调到npm 模块发布页面...省去了打开浏览器,搜索....

• ExpressJs 4 Snippets (opens new window) : 如标题所言,里面汇总了70个片段,基本是 ES6的语法的!!

• Pug (opens new window) : 这是模板语言的代码片段,严格来说并不属于 node,问题这货基本用于服务端渲染的模板语言,一般和 node 的服务端框架搭配...

Vue/React/Angular

• Auto Import - ES6, TS, JSX, TSX (opens new window): 这个插件是作者在一个长期不更新的项目加以维护的,类似智能补全的,基本跟进主流
• React Native Tools (opens new window): 让 vscode可以写 RN 的插件,包括调试!
• TSLint Vue (opens new window) : 让tslint 支持vue单组件内 ts 的语法

css or scss

• css-triggers (opens new window):这个插件的亮点就是可以看到渲染的流程和理论...可以当做参考工具
• HTML SCSS Support (opens new window): scss的智能补全,支持在 html,ng,vue,.net等使用(布局局限具体看文档).
• Autoprefixer (opens new window): 若是基于脚手架的项目基本配置下就好了(不用这个插件)..这个一般用于你想写点什么或者维护老项目,可以省点时间的
• CSS Grid Snippets (opens new window): CSS Grid 的代码片段,CSS Grid是下一代的布局姿势,不过目前兼容性很渣..成为主流可能要等个三四年,移动端上好一些(但只限于比较新的系统)

小程序

• mpvue snippets (opens new window): mpvue的一些代码片段,以及部分原生小程序的代码提示
• minapp (opens new window) : 写原生微信小程序必备的插件,智能补全,函数跳转等等

Git

• Git Graph (opens new window) ：图形化 git log ，还支持代码对比这些
• Git File History (opens new window) ：动态的查看文件git的历史记录，比如代码区域的变动！很炫！

DATABASES(数据库)

对于喜欢命令行的,也有三个推荐的,针对 SQL SERVER,MYSQL,MongoDB

• MySQL (opens new window): 操作 MYSQL
• MongoDB (opens new window): 操作 MongoDB
• mssql (opens new window): 操作 SQLSERVER,还内置了智能提示(针对T-SQL类的)..微软自家出品,必属精品!!

Python

py大法好,但只是粗浅的了解过一段时间,忘的差不多了..有机会再入坑试试

• Python (opens new window): 微软自家出品,必输精通,装上这个后vscode写 python 体验还是挺不错的
• MagicPython (opens new window): 戴上Magic,有人喜欢有人讨厌,看人吧..针对python魔术方法还有新特性的插件.好不好你说了算

正则

• RegExp Preview and Editor (opens new window) ：正则可视化解析匹配过程
• any-rule (opens new window) :快速查看且引用常用的正则,很实用

代码测试

• js-test-gen-vscode (opens new window) : 可以针对部分函数直接生成jest单元测试代码
• Jest (opens new window): 让你写Jest代码有IDE的感觉
• Mocha Test Explorer (opens new window): 针对mocha测试的GUI话,会给编辑器多一个独立的版块
• Coverage Gutters (opens new window) : 可以直观的看到你代码覆盖率的区域

调试工具

• Live HTML Previewer (opens new window):编辑器内实时预览 html文件
• Debugger for Firefox (opens new window): 如标题所示,vscode 关联firefox进行调试,和Debugger for chrome一致

改善编码体验

• Vim (opens new window) : 王牌插件,让vscode支持vim的常用特性,还集成几种常用vim插件的特性,喜欢的不容错过
• Class Helper (opens new window) : 对class快速编辑,支持ts,js,php
• Bash IDE (opens new window): 对bash提供类似IDE的体验,跳转,智能提示这些
• JSON Helper (opens new window) : 提供大纲功能,可以快速跳转编辑
• Shortcut Menu Bar (opens new window): 把几个很常用的行为做成图标内置在编辑区域内,对于非快捷键熟练的小伙伴有所用处
• YAML Support by Red Hat Preview : 涵盖了对YAML的校验,智能提示,对于用这个写配置文件的很有用处
• indent-rainbow (opens new window): 会给缩进添加一种颜色,让你更加直观的看到代码层次
• Web Search (opens new window): 选择代码内容,快速跳转到搜索引擎,支持Google, DuckDuckGo, StackOverflow三种引擎,打开的是默认本地浏览器
• vscode-pdfviewer (opens new window): 让VS Code可以阅读PDF文档,支持目录这些
• Projects+ (opens new window): 项目管理必备插件,可以快速录入本地项目的地址,打开..非常实用

前端领域

• Dependency Analytics (opens new window) ：分析项目中npm模块依赖，给出了很直观的数据反馈（包是否有安全问题等）
• Gitmoji Commit (opens new window) ：预设emoji的模板输入,快速commit
• Xml Complete (opens new window) ：XML智能补全,遵循类似协议的也可以
• BEM Helper (opens new window) ：css BEM方式创建类名(辅助工具）
• JavaScript Code Snippet (opens new window) ：装了这个，可以不装另外通用 js snippet 了，支持语言很全面
• Umi Pro (opens new window) ：提供 umi js 框架的智能提示，包括补全，跳转，引用查看
• React Hooks Snippets (opens new window) ：React 内置 Hooks 几个 snippet
• perfect-css-modules (opens new window) ： css module 的体验加成，悬浮提示，智能提示，引用跳转
• CSS Navigation (opens new window) ：获取CSS的定义(跳转或者悬浮），支持 HTML/JSX/TSX ,及类名这些的智能提示，非常棒
• VSCode React Refactor (opens new window) ：可以很方便对React组件代码进行重构
• fabulous (opens new window) ：可视化编辑 css, scss, js, jsx ,tsx 文件的样式，很方便！
• Angular Inject Service (opens new window) ：服务注入智能提示补全
• Browser Preview (opens new window) ：真正强大的网页预览(走内置非外部浏览器),支持断点调试
• Copilot for VS Code (opens new window) ：非常直观的展示梳理状态容器数据树，前端小伙伴必装
• ReactION (opens new window) ：实时预览react组件
• Highlight Matching Tag (opens new window) ：标签匹配高亮，支持 jsx，html 及主流的 vue,ng
• changelog (opens new window) ：悬浮可以查看安装包在github发布changelog的相关信息
• Better package.json (opens new window) : 可以直观看到当前安装版本和期望看到的版本隔了多少版本
• Color Manager (opens new window) :一个很酷炫的颜色管理插件，很强大
• Intelli Refactor (opens new window) : 提供类似 JetBrain 的快速代码重构功能
• NestJs Snippets (opens new window) : NG 即视感的 NodeJS 框架，常用的都说好！！

编辑

• Dotfiles Syntax HighlightingPreview (opens new window) ：常见隐藏文件语法高亮，挺实用的。
• File Brace Expansion (opens new window) ：可以根据后缀名快速创建多个文件，很实用
• auto-header (opens new window) ：一个小巧可配置的文件头部注入，用着感觉挺好
• License Header Manager (opens new window) ：快速生成自定义格式的协议内容，特别适合用于开源项目的
• Syntax Highlighter (opens new window) ：加强语法高亮，用过才知道！
• Code Time (opens new window) ：记录你的编程时间,摸鱼！！！
• Task Explorer (opens new window) ：全局任务管理器，支持多种任务脚本的识别
• TabNine (opens new window) ：基于深度学习训练模型打造的智能提示，很实用，准确率挺高
• Pomodoro (opens new window) : 没有花里胡哨，最实用的番茄倒计时，在编辑内配合 zen 模式，完美

主题或高亮

• Dainty (opens new window) :很不错的一款主题,提供亮色和暗色调

• 2077 Theme (opens new window) ：对比度比较高的暗调主题，用着感觉挺好

• Universe (opens new window) ：一款比较柔和的暗色调主题，很喜欢。

• Umi (opens new window) ：很柔和的一款主题

• Min Theme (opens new window) ：很不错的双色调主题风格

• Snazzy Plus (opens new window) ：很不错的一款暗色调主题，内置几个风格

• Hypersubatomic (opens new window) ：高对比的主题风格，很漂亮

• VSCode Great Icons (opens new window) ： 一款很精美的文件图标主题

• Eva Theme (opens new window): 目前用的款式,很喜欢这个调调

• Outrun (opens new window)

• Night Owl (opens new window)

• Noctis (opens new window)

• Cobalt Next (opens new window)

• Beautiful UI (opens new window)

• Light+ Tweaked (opens new window) : 柔和的亮色主题

• Palenight Theme (opens new window) : 非常好看的一个暗色主题

• Horizon Theme (opens new window) : 柔和的暗色调主题

• Andromeda (opens new window): 风骚黄绿

• Happy Hipster (opens new window): 清新脱俗的z主题风

• Vue Theme (opens new window): 应该有部分人喜欢这种风格...

• Cobalt2 Theme Official (opens new window): 暗色调的,有一段时间感觉贼喜欢.

• Brackets Light Pro (opens new window) : 亮色调的,用来写 MD 看起来很舒服,还有阅读代码(不写的时候)

• Highlight Bad Chars (opens new window): 这个插件的唯一亮点,你可以指定你想要高亮的特殊字符!!万花丛中一点绿!

运维及持续集成相关

拓展名及连接	描述
Docker (opens new window)	有一个专门的版块可以管理当前存在的容器,编写dockfile还有智能提示,还能用来调试内部容器
Better DockerFile Syntax (opens new window)	更好的dockfile语法高亮,拓展了对shell,变量相关的高亮
Kubernetes (opens new window)	对k8s的管理,类似上面的docker一样,会多出来一个版块,微软维护的
Jenkins Status (opens new window)	配置好可以本地检测到jenkins构建的状态,减少干扰
Draw.io Integration (opens new window)	DrawIO用过的都说好(流程图,拓扑图绘制这些),这个拓展就是把网页版的直接嵌入到vscode
Java Extension Pack (opens new window)	Java开发插件的一个集合包,涵盖了适用于java开发的一些拓展,微软自家维护
FreeMarker (opens new window)	Java常用的一款模板语言的支持,提供语法高亮及代码片段提示
Log File Highlighter (opens new window)	高亮log文件的,用过的都说好!
SQL Server (mssql)	让vscode可以在本地常见操作数据库的相关(包括第三方服务商的),撰写sql提供智能提示
Remote Development (opens new window)	这个套件让我们可以少装一两个软件,直接vscode ssh链接到远程进行开发相关的操作
Python (opens new window)	支持python2.x及3.x,涵盖代码调试和智能提示相关的,包括代码校验
YAML (opens new window)	支持最新标准的yaml,包括格式化,校验,智能提示,红帽出品
shell-format (opens new window)	支持多种常见的脚本文件的格式化

工具

源码协助【推荐】

vscode-ast (opens new window) : 解析JS/TS文件生成AST树在侧边栏

Mac TouchBar(MBP 的触摸条)

• Nasc VSCode Touchbar (opens new window) :提供了挺多实用的功能点,用了感觉还行

提交规范

• Better Comments (opens new window): 最好用的注释区域高亮,对于TODO这些支持也很好
• :emojisense: (opens new window) : 可配置化(针对语言),智能提示emoji,非常实用..走过路过不要错过

文件支持系列

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

协作系列

• VS Live Share Whiteboard (opens new window) : Live Share 画板支持,这下子不仅代码能协作,思路也能演示了
• VS Live Share (opens new window) : 代码协作,会使用上面这个插件的小伙伴,肯定也会用这个插件【推荐】
• GitLab Workflow (opens new window): Gitlab 的快速管理工具
• VS Live Share Preview (opens new window): 牛逼哄哄的插件,实时协作..目前是预览版...等正式版了再专门抽时间写一篇这个的用法

文章撰写

• PicGo (opens new window) : 很实用的图床上传工具,直接返回url,用了都说好.
• MarkDown Link Suggestions (opens new window) : md内本地资源智能提示
• Markdown Command Assist (opens new window):傻瓜化md使用,鼠标右键选择生成

图形化操作

• NPM-Scripts (opens new window): 在侧边栏可视化执行 npm 命令(项目内的 package.json),小巧实用
• File Tree View (opens new window): 提供几个常见编程语言的函数或状态的树集合展示,可以快速点击跳转!!
• JavaScript Test Runner Preview (opens new window): 快速执行单元测试,支持 Mocha 和 Jest

智能提示及格式化

• Paste JSON as Code (opens new window): JSON概要快速转换为其他语言的类型格式!(quick-type)
• Copy With Imports (opens new window): 相当牛逼的插件,复制部分引用代码自动引入相关依赖...

tools(杂七杂八的小工具)

• Babelrc (opens new window): 验证babelrc内的语法格式!!
• CodeMap (opens new window): 可以理解为"大纲",支持ts,md,python . 挺实用的
• Debugger for Chrome (opens new window): 更新迭代了那么久,稳定性已经很不错了,非常棒的调试工具.用过都说好
• Complete JSDoc Tags (opens new window) : 智能提示补全JSDOC的语法
• Git Project Manager (opens new window): 适合有多个git项目的小伙伴,可以快速跳转,比如打开文件夹慢慢找快 N 倍
• Git Branch Warnings (opens new window): 一个很温馨的提醒,可以高亮某个分支提醒你要慎重,这个小功能感觉以后会内置
• jumpy (opens new window): 羡慕vim党,但是不会耍,想快速跳转到指定位置!这个就可以...
• licenser (opens new window): 可以快速生成开源协议的头部!!,配置自己的用户名和邮箱等,挺实用的
• Bookmarks (opens new window): 给文件某个位置打标签,用来快速跳转的..不知道这个功能到现在为何没内置!!

Markdown(md 规范的文档)

为什么单独抽出来,有好几个实用的插件...打造好完全不输所谓的纯 MD 编辑器好么!!!

• Markdown Preview Enhanced (opens new window): 国人出品的精品插件!!!涵盖的东西很多,上至公式下至导出(装了这个其他都是可以选装了),不过你要跟着它提供的文档把对应的功能点依赖给补齐了..适合愿意折腾的
• Markdown All in One (opens new window): 添加了一些内置md 没有的,比如支持 github的 tasklist,table formatter,还有 TOC 和快捷键这些
• Markdown+Math (opens new window): 支持多种数学公式的展示!!
• Markdown PDF (opens new window): 把 MD 转为 PDF,支持emoji,checkbox和语法高亮
• Markdown Preview Mermaid Support (opens new window):支持Mermaid规范的流程表生成
• Markdown Emoji (opens new window): 支持 md 插入emoji..但是用起来支持的力度不怎么够,不知道作者会不会继续维护下去..但是常见的emoji是有的

其他相关

Error Gutters (opens new window) : 会把错误显示为图标,类似git gutter ,一目了然

carbon-now-sh (opens new window) : 快速生成漂亮的代码图片

Bracket Pair Colorizer 2 (opens new window) : 原作者的第二版,括号高亮匹配更快速

file-tree-generator (opens new window) : tree命令的鼠标操作版,还会输出icon符号

TypeScript Import Sorter (opens new window) : 适合强迫症用户,给引入语句进行排序,可以单文件或者整个目录深度遍历

JSON Tree View (opens new window) : 可视化跳转json,适合懒人快速定位json的某个key

VS DocBlockr (opens new window): Atom插件Docblockr移植版,非常好用的注释插件

Visual Studio IntelliCode - Preview (opens new window) : 提供AI支持(强化你的代码智能提示),微软出品

File Utils (opens new window) : 非常实用的一个文件工具集,脱离鼠标,直接操作当前打开的页面.

npm-ui (opens new window) : 侧边栏添加npm图标,npm菜单内可以直接执行命令

NPM Scripts (opens new window) : 命令行执行npm命令 ,可以算是npm ui的非UI版本

Surround (opens new window) : 快速包裹代码并且添加对应的条件语句,很实用

koroFileHeader (opens new window) : 快速添加注解到文件头部(预定义模板),比如创建时间,谁创建的

gi (opens new window) : 快速生成.gitignore 【推荐】

tea-time (opens new window) : 番茄计时器!有助于改善你长期盯电脑的习惯,到点去喝杯水缓缓什么的

Visual Snake Code (opens new window) : 撸代码累了.来一把贪吃蛇?然后继续苦逼!

javascript console utils (opens new window) : 快速生成console.log(选中)【推荐】

Turbo Console Log (opens new window) : 与上面那个类似,功能弱化些

clear-console (opens new window) : 快速清除当前文件内的console.log信息,很实用【推荐】

Node JSON Autocomplete (opens new window) : 对于引入json文件提供智能提示