vs code 插件收集

时间  2020-10-18 标签 javascript css html 前端 vue java node python mysql react
名称 简述
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 HTML五、CSS三、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-router二、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：在底部状态栏显示当前文件大小，点击后还能够看到详细建立、修改时间javascript

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

 

Path Intellisense

 

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

fileheader

 

Git Lens：查看详细的git记录,内置功能不少前端

Git Lens

 

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

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

 

 

**npm**

 

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

 

Npm Intellisense

 

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

**Debugger for Chrome**

 

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

ESLint：代码语法检查mysql

Beautify：格式化代码的工具react

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 HTML五、CSS三、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-router二、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: 牛逼哄哄的插件,实时协做..目前是预览版...等正式版了再专门抽时间写一篇这个的用法
    •  
      
 
      
 
       
      
主题
 
       
     
 
    
 
   
 
  
  
 
 


                




                

            

        

    










    

        联系我们
        沪ICP备13005482号-10