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：文件路径补全，在你用任何方式引入文件系统中的路径时提供智能提示和自动完成

 

Path Intellisense

 

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

fileheader

 

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

Git Lens

 

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

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

 

 

**npm**

 

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

 

Npm Intellisense

 

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

**Debugger for Chrome**

 

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 的注释模板

Document This

 

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]是可以同步改动的，值得安装
      • 

    

    • 






    

  • 

    nginx
    

    

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

    

      

    • nginx.conf:高亮nginx的配置文件，可能以后的版本会引入.conf的语法高亮而不需要安装此插件
      • 

    • nginx.conf hint:nginx配置文件的智能提示和补全，好不好用你说了算
      • 

    

    • 



    

  • 

    Theme
    

    

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

    


    • 





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


 












    

  • 

    代码质量的把控
    

      

    • CodeMetrics : 可以计算TS/JS内代码的复杂度(比如函数这些),这些与代码质量和性能是挂钩的
      • 

    • Import Cost: 就是你import一个东西的时候,可以计算改引入模块的大小!!!厉害吧
      • 

    • Prettier: 这个东西在github上挺火,可以支持很多种新框架的格式,高度自定义,所以有人封装成了插件..实用!(vue,ng,react,jsx,ts)这些格式化毫无压力
      • 

    

    • 

  • 

    正则
    


    • 



    

  • 

    版本控制
    

      

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

    

    • 










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








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


    

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

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

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

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

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





Vue/React/Angular





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 的触摸条)





Theme or highlight(主题或高亮)





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






调试工具



智能提示及格式化


    

  • Paste JSON as Code: JSON概要快速转换为其他语言的类型格式!(quick-type)
    • 

  • Copy With Imports: 相当牛逼的插件,复制部分引用代码自动引入相关依赖...
    • 



代码片段



高亮


    

  • 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: 牛逼哄哄的插件,实时协作..目前是预览版...等正式版了再专门抽时间写一篇这个的用法
    • 





主题























            

            
posted @ 
2018-05-04 10:17 
创业男生 
阅读(7089) 
评论(0) 
编辑 
收藏 
举报