vscode 开发插件集合

一、基础通用插件

1. Chinese ***
   vscode编辑器汉化包，安装后，在 locale.json 中添加 “locale”: “zh-cn”，即可载入中文（简体）语言包。
   
2. Auto Rename Tag ***
   自动重命名成对的HTML标记，修改开始标签，结束标签会同步修改
   
3. HTML Snippets ***
   HTML代码片段，该插件可为你提供html标签的代码提示，不用键入尖括号了
   
4. Bracket Pair Colorizer ***
   该插件可以为你把成对的括号做颜色区分，并且提供一根连接线。方便我们审阅代码结构。
   
   通过修改配置文件，使得结构线高亮，食用更佳。（具体配置可以查看插件介绍）

"workbench.colorCustomizations": {"editorIndentGuide.activeBackground": "#00ffea"},

5. Peek ***
   css样式查看器，可快速查看我们的css样式，非常方便快捷
   
6. vscode-elm-jump
   常规的代码跳转定义
7. vue-helper
   变量函数跳转定义
8. Npm Intellisense
   可自动完成导入语句中的npm模块
   
9. open in browser ***
   快速打开html文件到浏览器预览
   
10. vscode-icons ***
    提供了非常漂亮的目录树图标主题
    
11. Auto Close Tag ***
    自动闭合HTML/XML标签
    
12. Path Intellisense ***
    自动提示文件路径，支持各种快速引入文件
    
13. Image preview ***
    鼠标悬浮在链接上可及时预览图片
    
14. Beautify ***
    在代码文件右键鼠标一键格式化 html,js,css
    
15. JavaScript (ES6) code snippets
    ES6语法智能提示，以及快速输入
    
16. css navigation
    Ctrl+ 点击跳转到 样式位置。
17. Vetur
    VScode官方钦定Vue插件，Vue开发者必备。内含语法高亮，智能提示，emmet，错误提示，格式化，自动补全，debugger等实用功能
    

二、 代码风格规范类插件

14. ESlint
    规范js代码书写规则，如果觉得太过严谨，可自定义规则
    

15. TSLint
    ts的书写规范，这个插件是一个系列，同时还提供了TSLint (deprecated)，TSLint Vue，TSLint Vue-TSX
    

16. Code Spell Checker
    是拼写检查程序，检查不常见的单词，如果单词拼写错误，会给出警告提示
    

17. koroFileHeader
    在vscode中用于生成文件头部注释和函数注释的插件，经过多版迭代后，插件：支持所有主流语言,功能强大，灵活方便，文档齐全，食用简单！
    
    不光如此，还能生成一些特别有意思的注释，比如这一条喷火龙…

18. Better Align
    代码书写的整洁，工整往往是衡量一个程序员素养的标准，这款插件可以让你的代码更排版优雅
    选中代码配合组合键[Ctrl+Shift+p]，输入Align即可
    

19. change-case
    通常我们对一个变量的命名可能是驼峰，可能是全大写，又或是下划线，这里可通过这个插件解决变量命名规范的问题
    
    选中变量配合组合键[Ctrl+Shift+p]，输入对应格式即可。
    extension.changeCase.commands：列出所有“更改案例”命令，如果仅选择一个单词，则带有预览extension.changeCase.camel：更改大小写’camel’：转换为字符串，并用下一个字母大写表示分隔符extension.changeCase.constant：更改大小写“常量”：转换为大写字母，下划线分隔字符串extension.changeCase.dot：更改大小写的“点”：转换为小写，句点分隔的字符串extension.changeCase.kebab：更改大小写“ kebab”：转换为小写字母，用破折号分隔的字符串（参数名的别名）extension.changeCase.lower：更改大小写为“小写”：转换为小写的字符串extension.changeCase.lowerFirst：更改大小写“ lowerFirst”：转换为首字母小写的字符串extension.changeCase.no：转换没有任何大小写的字符串（小写字母，空格分隔）extension.changeCase.param：更改大小写为’param’：转换为小写字母，用破折号分隔的字符串extension.changeCase.pascal：更改大小写“ pascal”：转换为以与camelCase相同的方式表示的字符串，但首字母也大写extension.changeCase.path：更改大小写的“路径”：转换为小写，用斜杠分隔的字符串extension.changeCase.sentence：更改大小写的“句子”：转换为小写的空格分隔的字符串extension.changeCase.snake：更改大小写“ snake”：转换为小写字母，下划线分隔字符串extension.changeCase.swap：更改大小写“交换”：转换为每个大小写相反的字符串extension.changeCase.title：更改大小写“标题”：转换为以空格分隔的字符串，每个单词的第一个字符均大写extension.changeCase.upper：更改大小写为大写：转换为大写字符串extension.changeCase.upperFirst：更改大小写为“ upperFirst”：转换为首字母大写的字符串复制代码

20. Better Comments
    这款插件可以丰富注释颜色，让注释也具有生命力，如需自定义样式，需要写入配置代码
    
    

    配置代码"better-comments.tags": [ {“tag”: “*”,“color”: “#98C379”,“strikethrough”: false,“backgroundColor”: “transparent” }]使用// * 绿色的高亮注释复制代码TODO Tree
    我们经常会在代码中使用TODO来标记我们的代码，提高可读性，TODO Tree这款插件提供了可视化窗口来查看和管理我们的TODO Tree

21. GitLens
    GitLens可以帮助您更好地理解代码。快速查看更改行或代码块的对象，功能强大，功能丰富且高度可定制，可以满足您的需求
    

22. GitHistory
    GitHistory可查看和搜索git日志以及图形和详细信息，同时还支持分支比较，分支管理等操作，非常方便
    

三、其他插件（神器）

23. Partial Diff
    文件比较是一个很常见的场景，如果光凭我们肉眼分别的话，累人不说还容易出错。Partial Diff的出现就正好解决了这个问题。（找重复代码）
    
    Markdown All in One
    这款神器可以让我们在vscode里面快乐的书写Markdown，功能强大。提供了丰富的快捷键，可边写边看，轻松转化为html或pdf文件，十分好用，强烈推荐
    

24. vscode-drawio
    这款神器可以让我们在vscode里面快乐的画流程图。新建 .drawio 后缀文件并拖入vscode中, 即可得到如下界面
    

25. Polacode-2020
    这款神器可以将我们的代码转化成一张逼格满满的图片，在写文章或者代码分享的时候。抛出一张这样的图片，可比随手截图体面多了
    

26. REST Client
    这款神器可以让我们在vscode里面进行接口调试，提供丰富的api配置方式，让我们不用离开编辑器也可以随时调用接口调试
    

    新建一个.http文件，写下基本的测试代码，点击 Send Request即可在右边窗口查看接口返回结果，非常nice，强烈推荐

    更多的使用配置，可查看官方文档

27. Browser Preview
    这款神器可以让我们在vscode里面打开浏览器，一边编码一边查看，偶尔也可以用来摸鱼，非常人性，强烈推荐
    

28. JavaScript Booster
    这款神器可以在我们代码写的不规范或者有待调整的地方，在光标聚焦后，会有一个小灯泡。会提示对应的不合理原因和改进方案。极大的提高了我们的代码优雅度，强烈推荐

    让您的生活更轻松，使用代码操作为您执行重复性任务！他们可以提供很多帮助，只需跟随灯泡！

    当在JavaScript（或TypeScript / Flow）中编辑代码时，此VS Code扩展提供了各种代码操作（快速修复）。只需注意左侧的灯泡，然后按一下它即可了解如何在光标下转换代码。
    

29. Settings Sync
    这款神器可以让我们的vscode配置同步到云端，当我们跟换电脑或者再次安装vscode的时候，只需要登录账号即可同步配置了，而不用再次从头开始。简直不要太香了，强烈推荐
    

30. Live Share
    这款神器可以使您能够与他人实时进行协作式编辑和调试，无论您使用的是哪种编程语言或正在构建的应用程序类型。什么意思呢？就是可以多人同时编辑一份代码，差不多有点代码共享的意思。不得不说，这款神器就太了不起了，强烈强烈强烈推荐，
    
    Visual Studio Live Share使您能够与他人实时进行协作式编辑和调试，无论您使用的是哪种编程语言或正在构建的应用程序类型。它使您可以立即（安全地）共享当前项目，然后根据需要共享调试会话，终端实例，localhost Web应用程序，语音呼叫等！加入您的会话的开发人员会从您的环境（例如语言服务，调试）中获得所有编辑器上下文，从而确保他们可以立即开始进行高效的协作，而无需克隆任何存储库或安装任何SDK。

    另外，与传统的成对编程不同，Visual Studio Live Share使开发人员可以一起工作，同时保留其个人编辑器的首选项（例如主题，键绑定）以及自己的光标。这样，您就可以在彼此之间无缝过渡，并能够自己探索想法/任务。在实践中，这种能力一起工作，并独立地提供了一个合作的经验，是可能有更多的自然常见的用例。

31. Remote - SSH
    开发神器，通过 vscode 以窗口的形式连接远程服务器，直接在 vscode 当中编写服务器代码！
    

32. Tabnine
    开发神器，超强大的代码自动补全。
    

33. Terminal Here
    
    开发神器，在当前窗口打开 terminal，再也不用每次开 terminal 都要不停地 cd 了。

34. background-cover
    添加一张你喜欢的图片铺满整个vscode…，详情请看插件简介。
    

35. nest
    一个非常好看的网页粒子背景插件，来自Canvas-nest.js
    

36. background 传送门
    
    自定义方式 海贼王版本配置

	"backgroundCover.autoStatus": true,
    "background.useDefault": false,
    "background.customImages": [
        "file:///C:/Users/ErekLee/Pictures/vscode_r_bg_img/hzw/qiaoba1.png",
        "file:///C:/Users/ErekLee/Pictures/vscode_r_bg_img/hzw/lufei1_r.png",
        "file:///C:/Users/ErekLee/Pictures/vscode_r_bg_img/hzw/nvdi_r.png",
        "file:///C:/Users/ErekLee/Pictures/vscode_r_bg_img/hzw/lufei2.png"
    ],
   "background.style":
    {
        "content": "''",
        "pointer-events": "none",
        "position": "absolute",
        "z-index": "99999",
        "width": "100%",
        "height": "100%",
        "background-size": "200px 200px",
        "background-position": "100% 100%",
        "background-repeat": "no-repeat",
        "opacity": 1,
    },
    "background.loop": true

	background插件 css 报错问题
	使用插件 Fix VSCode Checksums  处理
	Ctrl+Shift+P ， 输入Fix Checksums ： Apply， 点击，重启即可		

37. vscode-live2d 传送门
    

38. 彩虹屁（Rainbow Fart）传送门推荐给lsp宅男
    Rainbow Fart 是个鼓励师插件，在你敲代码的时候一直鼓励你，语音包可以选择声音甜美的小姐姐。瞬间提升撸代码激情！！！ 该插件会开一个浏览器标签，用于播放语音~~~
    
    安装与使用 传送门

39. 彩虹屁还不够，再送你一个鼓励师老婆（
    ）传送门
    Rainbow Fart Waifu插件除了在你敲代码的时候一直用甜美的话语鼓励你之外，还提供了一位虚拟老婆供以娱乐（可通过鼠标与 “老婆” 进行交互哟）。玩儿腻了怎么办？放心，后宫佳丽三千！任君挑选
    

40. 黑客声音（Hacker Sounds） 传送门
    Hacker Sounds 插件通过在编写代码时播放类似电影（黑客帝国敲击键盘音效）的声音，让你神秘的像一个黑客。
    

41. SQLTools
    数据库管理正确。连接浏览器、查询运行器、智能感知、书签、查询历史记录。
    

42. Error Lens 错误提示
    
    

43. 童年回忆小霸王（小霸王）传送门
    小霸王 是一款基于vscode的nes游戏插件，能让你在紧张的开发之余在vscode里发松身心。通过劳逸结合，提升开发效率。 太上头了，我玩儿的是不亦乐乎
    

44. vscode新皮肤 (Material Theme) 传送门
    Material Theme 当然了，有了这么多有趣的 “摸鱼插件” 我们可能还需要把vscode换个皮肤，Material Theme为我们提供了多套优质皮肤，让我们的编辑器变得更好看（谁用谁知道）~~
    Material Theme 需要额外下载 Material Theme Icons 与 Community Material Theme 食用效果更佳！