vs code 插件收集

名称	简述
Auto Close Tag	自动闭合HTML标签
Auto Import	Typescript自动import提示
Auto Rename Tag	修改HTML标签时，自动修改匹配的标签
Beautify css/sass/scss/less	css/sass/less格式化
Better Align	对齐赋值符号和注释
Better Comments	编写更加人性化的注释
Bookmarks	添加行书签
Bracket Pair Colorizer	用不同颜色高亮显示匹配的括号
Can I Use	HTML5、CSS3、SVG的浏览器兼容性检查
Code Runner	运行选中代码段（支持大量语言，包括Node）
Code Spellchecker	单词拼写检查
CodeBing	在VSCode中弹出浏览器并搜索，可编辑搜索引擎
Color Highlight	颜色值在代码中高亮显示
Color Info	小窗口显示颜色值，rgb,hsl,cmyk,hex等等
Color Picker	拾色器
Dash	集成Dash
Debugger for Chrome	调试Chrome
Document This	注释文档生成
ESLint	ESLint插件，高亮提示
EditorConfig for VS Code	EditorConfig插件
Emoji	在代码中输入emoji
File Peek	根据路径字符串，快速定位到文件
Font-awesome codes for html	FontAwesome提示代码段
Git Blame	在状态栏显示当前行的Git信息
Git History(git log)	查看git log
GitLens	显示文件最近的commit和作者，显示当前行commit信息
Guides	高亮缩进基准线
Gulp Snippets	Gulp代码段
HTML CSS Class Completion	CSS class提示
HTML CSS Support	css提示（支持vue）
HTMLHint	HTML格式提示
htmltagwrap	包裹HTML
Import Cost	行内显示导入（import/require）的包的大小
Indenticator	缩进高亮
IntelliSense for css class names	css class输入提示
JavaScript (ES6) code snippets	ES6语法代码段
JavaScript Standard Style	Standard风格
JSON to TS	JSON结构转化为typescript的interface
JSON Tools	格式化和压缩JSON
Less IntelliSense	less变量与混合提示
Lodash	Lodash代码段
Log Wrapper	生产打印选中变量的代码
MochaSnippets	Mocha代码段
Node modules resolve	快速导航到Node模块
Code Outline	展示代码结构树
Output Colorizer	彩色输出信息
Partial Diff	对比两段代码或文件
Path Autocomplete	路径完成提示
Path Intellisense	另一个路径完成提示
PostCss Sorting	css排序
Prettify JSON	格式化JSON
Project Manager	快速切换项目
Quokka.js	不需要手动运行，行内显示变量结果
REST Client	发送REST风格的HTTP请求
React Native Storybooks	storybook预览插件，支持react
React Playground	为编辑器提供一个react组件运行环境，方便调试
React Standard Style code snippets	react standar风格代码块
Sass	sass插件
Settings Sync	VSCode设置同步到Gist
Sort Typescript Imports	typescript的import排序
Sort lines	排序选中行
String Manipulation	字符串转换处理（驼峰、大写开头、下划线等等）
SVG Viewer	SVG查看器
Syncing	vscode设置同步到gist
TODO Parser	Todo管理
TS/JS postfix completion	ts/js后缀提示
TSLint	TypeScript语法检查
Test Spec Generator	测试用例生成（支持chai、should、jasmine）
TypeScript Import	TS自动import
TypeSearch	TS声明文件搜索
Types auto installer	自动安装@types声明依赖
VSCode Great Icons	文件图标拓展
Version Lens	package.json文件显示模块当前版本和最新版本
View Node Package	快速打开选中模块的主页和代码仓库
VueHelper	Vue2代码段（包括Vue2 api、vue-router2、vuex2）
filesize	状态栏显示当前文件大小
ftp-sync	同步文件到ftp
gitignore	.gitignore文件语法
htmltagwrap	快捷包裹html标签
language-stylus	Stylus语法高亮和提示
markdownlint	Markdown格式提示
npm Intellisense	导入模块时，提示已安装模块名称
npm	运行npm命令
stylelint	css/sass/less代码风格
vetur	目前比较好的Vue语法高亮
vscode-database	操作数据库，支持mysql和postgres
vscode-icons	文件图标，方便定位文件
vscode-random	随机字符串生成器
vscode-spotify	集成spotify，播放音乐
vscode-styled-components	styled-components高亮支持
vscode-styled-jsx	styled-jsx高亮支持

附录：个人的VSCode首选项配置（仅供参考）

{
  "editor.tabSize": 2,
  "files.associations": {
      "*.vue": "vue"
  },
  "eslint.autoFixOnSave": true,
  "eslint.options": {
      "extensions": [
          ".js",
          ".vue"
      ]
  },
  "eslint.validate": [
      "javascript",
      "javascriptreact",
      "vue",
      "vue-html"
  ],
  "search.exclude": {
      "**/node_modules": true,
      "**/bower_components": true,
      "**/dist": true
  },
  "emmet.syntaxProfiles": {
      "javascript": "jsx",
      "vue": "html",
      "vue-html": "html"
  },
  "git.confirmSync": false,
  "window.zoomLevel": 0,
  "vsicons.projectDetection.autoReload": true,
  "typescript.check.tscVersion": false,
  "editor.renderWhitespace": "boundary",
  "editor.cursorBlinking": "smooth",
  "workbench.colorTheme": "Solarized Light",
  "workbench.iconTheme": "vscode-great-icons",
  "editor.minimap.enabled": true,
  "editor.minimap.renderCharacters": false,
  "tslint.autoFixOnSave": true,
  "editor.fontFamily": "'Droid Sans Mono', 'Courier New', monospace, 'Droid Sans Fallback'",
  "beautify.tabSize": 2,
  "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}",
  "typescript.extension.sortImports.maxNamedImportsInSingleLine": 5,
  "typescript.extension.sortImports.omitSemicolon": true,
  "editor.codeLens": true,
  "editor.snippetSuggestions": "top",
  "react-native-storybooks.port": 6006
}
————————————————————————————————————————————————————————————————————————————————————————————————

filesize：在底部状态栏显示当前文件大小，点击后还可以看到详细创建、修改时间

Path Intellisense：文件路径补全，在你用任何方式引入文件系统中的路径时提供智能提示和自动完成

vscode-fileheader：顶部注释模板，可定义作者、时间等信息，并会自动更新最后修改时间

Git Lens：查看详细的git记录,内置功能很多

Git History (git log)：一个好用的Git 历史查看工具

npm: 可以直接在vscode执行npm的一些命令

Npm Intellisense：NPM 依赖补全，在你引入任何 node_modules 里面的依赖包时提供智能提示和自动完成

Debugger for Chrome：让 vscode 映射 chrome 的 debug功能，静态页面都可以用 vscode 来打断点调试

JavaScript (ES6) code snippets：常用的类声明、ES 模块声明、CMD 模块导入等

ESLint：代码语法检查

Beautify：格式化代码的工具

open-in-browser： 在浏览器中预览HTM文件

HTML Snippets：各种 HTML 标签片段

IntelliSense for CSS class names：CSS 类名补全，会自动扫描整个项目里面的 CSS 类名并在你输入类名时做智能提示

Document This： js 的注释模板

Settings Sync：同步你得设置和插件

————————————————————————————————————————————————

 

Code Outline

Code Outline 能在单独窗口中列出当源代码中的各种符号，比如变量名、类名、方法名等，并支持快速跳转，有点类似于 Vim 里面的 ctags，翻看老代码、开源项目代码时非常有用。

编码效率

效率的极致就是把能自动化的都自动化了，下面 4 个小工具能够极大的消除常见编辑需求里面的重复工作：

Document This

Document This 能够一键给代码中的类、函数加上注释，支持函数声明、函数表达式、箭头函数等；

Embrace

Embrace 快速的在选中代码两边添加各种引号、括号，不用来回移动光标，不过还是没有 Vim 中的 Surrounding 插件强大；

ECMAScript Quoets Transformer

ECMAScript Quotes Transformer 方便在字符串和变量混搭模式（String Concat）的代码和字符串模板（Template Literals）模式间来回转换，省去手动的移动光标、修改引号等操作；

Code Spell Checker

Code Spell Checker 强烈推荐，对大部分非英语母语又不想写出四不像变量名的程序员来说，正确识记拼写各种单词还是有不小的挑战，比模棱两可时需要去查在线词典不同的是，这款插件能实时的识别单词拼写是否有误，并给出提示，不少 bug 都是因为拼写错误导致的。

Code Runner

Code Runner，名副其实的代码运行插件，支持数十种语言，在不离开代码编辑器的前提下通过命令面板可直接执行代码，并查看输出。下面是盗图：

其他的配置：关于行末的空格、文件末尾的空行，以前需要使用插件来实现，现在直接修改 VSCode 内置配置即可实现：

{
    "files.trimTrailingWhitespace": true,
    "files.insertFinalNewline": true,
    "files.trimFinalNewlines": true
}

---------------------------------------------------

Auto Close Tag 自动闭合HTML标签
Auto Rename Tag 修改HTML标签时，自动修改匹配的标签
Bookmarks 添加行书签
Can I Use HTML5、CSS3、SVG的浏览器兼容性检查
Code Runner 运行选中代码段（支持大量语言，包括Node）
CodeBing 在VSCode中弹出浏览器并搜索，可编辑搜索引擎
Color Highlight 颜色值在代码中高亮显示
Color Picker 拾色器
Document This 注释文档生成
EditorConfig for VS Code EditorConfig插件
Emoji 在代码中输入emoji
ESLint ESLint插件，高亮提示
File Peek 根据路径字符串，快速定位到文件
Font-awesome codes for html FontAwesome提示代码段
ftp-sync 同步文件到ftp
Git Blame 在状态栏显示当前行的Git信息
Git History(git log) 查看git log
GitLens 显示文件最近的commit和作者，显示当前行commit信息
Guides 高亮缩进基准线
Gulp Snippets Gulp代码段
HTML CSS Class Completion CSS class提示
HTML CSS Support css提示（支持vue）
HTMLHint HTML格式提示
Indenticator 缩进高亮
JavaScript (ES6) code snippets ES6语法代码段
language-stylus Stylus语法高亮和提示
Lodash Lodash代码段
markdownlint Markdown格式提示
MochaSnippets Mocha代码段
Node modules resolve 快速导航到Node模块
npm 运行npm命令
npm Intellisense 导入模块时，提示已安装模块名称
Output Colorizer 彩色输出信息
Partial Diff 对比两段代码或文件
Path Autocomplete 路径完成提示
Path Intellisense 另一个路径完成提示
Prettify JSON 格式化JSON
Project Manager 快速切换项目
REST Client 发送REST风格的HTTP请求
Settings Sync VSCode设置同步到Gist
String Manipulation 字符串转换处理（驼峰、大写开头、下划线等等）
Test Spec Generator 测试用例生成（支持chai、should、jasmine）
TODO Parser Todo管理
Version Lens package.json文件显示模块当前版本和最新版本
vetur 目前比较好的Vue语法高亮
View Node Package 快速打开选中模块的主页和代码仓库
vscode-icons 文件图标，方便定位文件
VSCode Great Icons 文件图标拓展
VueHelper Vue2代码段（包括Vue2 api、vue-router2、vuex2）

附录：VSCode首选项配置

{
    "editor.tabSize": 2,
    "files.associations": {
        "*.vue": "vue"
    },
    "eslint.autoFixOnSave": true,
    "eslint.options": {
        "extensions": [
            ".js",
            ".vue"
        ]
    },
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "vue",
        "vue-html"
    ],
    "search.exclude": {
        "**/node_modules": true,
        "**/bower_components": true,
        "**/dist": true
    },
    "emmet.syntaxProfiles": {
        "javascript": "jsx",
        "vue": "html",
        "vue-html": "html"
    },
    "extensions.autoUpdate": true,
    "editor.renderWhitespace": "boundary",
    "editor.cursorBlinking": "smooth",
    "workbench.welcome.enabled": true
}

——————————————————————————————————————————————————————————————

• 版本及文件管理
  • Better Merge : 用来解决文件冲突的不二利器，经过多个版本的更新，稳定很多。。推荐
  • Folder Indexing: 提高文件的索引速度[常驻于内存中]，这对于项目比较大的小伙伴必须安装啊
  • Git Indicators: 类似github上的统计提交代码增减条目，在状态栏显示，很小巧实用
  • gitk:有了这个，版本实时比对，这个真心好

• Angular 2+ && Typescript 2+

  • Angular Language Service: 对于用ng2+开发的小伙伴，这又是一个必备插件，定义跳转，补全，信息提示等。。。
  • JSON to TS:有了这个来声明和后台协商的对接接口简直不能再方便了【typescript interface】。。。
  • move-imports: 虽然不能说完美无BUG，但是至少常规的迁移[ js, jsx, ts, tsx]是可以同步改动的，值得安装

• Node
  • Node.js Modules Intellisense:对于node_module的智能提示太友好了。。。必装
  • npm: 可以直接在vscode执行npm的一些命令，相当实用。试试就知道了
  • ExpressSnippet: express的代码片段,实用推荐
  • ES6 Mocha Snippets：单元测试Mocha的代码片段

• snippet

  • TurboJavaScript:相当齐全的js的代码片段简写，熟练了效率高的不是一点两点
  • Angular 2+ Snippets - TypeScript, Html, ngRx, Angular Flex Layout & Testing: 这货的代码片断涵盖范围太广了，真佩服作者去汇总

• Vue

  • Vue TypeScript Snippets:我发现我偏爱ts，vue的ts代码片段。。作者在最近的vueconf也提出了v2.4将会引入ts来规范开发
  • VueHelper:国人写的一个针对vue2,router,vuex的代码提示，涵盖了大部分的API，投入了很多精力啊，赞一个
  • vetur:语法高亮及智能提示

• React

  • React-Native/React/Redux snippets for es6/es7:这个是比较重量级的插件，而且作者更新很勤快
  • Typescript React/Redux Snippets：ts语法的react代码片段

• nginx

  nginx非常适合做前端的服务层，好处太多，反向代理避免跨域,负载均衡

  • nginx.conf:高亮nginx的配置文件，可能以后的版本会引入.conf的语法高亮而不需要安装此插件
  • nginx.conf hint:nginx配置文件的智能提示和补全，好不好用你说了算

• Theme

  有两个推荐的主题，我个人觉得很耐看的

  • bluloco-dark: 颜色很对我眼
  • One Dark Pro: Atom主题的vscode版本,作者做了一些调整

——————————————————————————————————————————————————————

 

• 代码质量的把控

  • CodeMetrics : 可以计算TS/JS内代码的复杂度(比如函数这些),这些与代码质量和性能是挂钩的
  • Import Cost: 就是你import一个东西的时候,可以计算改引入模块的大小!!!厉害吧
  • Prettier: 这个东西在github上挺火,可以支持很多种新框架的格式,高度自定义,所以有人封装成了插件..实用!(vue,ng,react,jsx,ts)这些格式化毫无压力

• 正则

  • RegExp Preview and Editor: 这个就厉害了.可以完美的展示你写的正则,图形化给你看你写正则的形成

• 版本控制

  • Git Lens: 暂时没有发现比这个看git记录更为详细了,内置功能很多..很方便

• CSS相关
  • SCSS IntelliSense: scss的智能提示

• Vue
  • Vue Peek:转到定义,这个插件就是让vue也支持这个功能,实用!
  • Vue VSCode Snippets: 很全面的vue代码片段

• React

  • Useful React Snippets: React的snippet

• Angular 4+

  • ng-zorro snippets: ANTD的ng4+版本,阿里发布的..很精致的UI框架
  • Ionic 3 snippets: ionic3的代码片段

• Theme

  • rocket-ui: 颜色很对我眼

——————————————————————————————————————————————

Node(em....自行理会)

• npm Intellisense : 正如标题所说,在写引入模块的时候智能提示!!
• NPM Smart Importer : 与上个的插件的差异是智能补全,比如你 copy 了一些代码,而木有引入部分模块!可以点击引入!
• NPM Dependency Links : 这个就是方便你在初始化脚手架项目之后想了解某些模块,点击直接调到npm 模块发布页面...省去了打开浏览器,搜索....
• ExpressJs 4 Snippets : 如标题所言,里面汇总了70个片段,基本是 ES6的语法的!!
• Pug : 这是模板语言的代码片段,严格来说并不属于 node,问题这货基本用于服务端渲染的模板语言,一般和 node 的服务端框架搭配...

---

Vue/React/Angular

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

---

css or scss

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

tools(杂七杂八的小工具)

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

---

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是有的

---

DATABASES(数据库)

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

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

---

Python

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

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

---

Mac TouchBar(MBP 的触摸条)

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

---

Theme or highlight(主题或高亮)

• Cobalt2 Theme Official: 暗色调的,有一段时间感觉贼喜欢.
• Brackets Light Pro : 亮色调的,用来写 MD 看起来很舒服,还有阅读代码(不写的时候)
• Highlight Bad Chars: 这个插件的唯一亮点,你可以指定你想要高亮的特殊字符!!万花丛中一点绿!

————————————————————————————————————————————————————

调试工具

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

智能提示及格式化

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

代码片段

• React Native Snippet: RN 代码片段
• ES7 React/Redux/GraphQL/React-Native snippets: 如标题所示,涵盖的代码片段贼丰富

高亮

• Marko Syntax Highlighting: ebay 旗下Marko的语法高亮..挺有意思的一个类模板语言的 UI 库
• YAML: yaml的高亮,校验及格式化

图形化操作

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

语言或框架

• OCaml and Reason IDE: 两种语言的支持,后者 facebook 出的(有兴趣的可以去了解,挺超前)

---

协作

• GitLab Workflow: Gitlab 的快速管理工具
• VS Live Share Preview: 牛逼哄哄的插件,实时协作..目前是预览版...等正式版了再专门抽时间写一篇这个的用法

---

主题

• Andromeda: 风骚黄绿
• Happy Hipster: 清新脱俗的z主题风
• Vue Theme: 应该有部分人喜欢这种风格...