vsCode好用的插件

进击的小喵
1,443 阅读4分钟

GitLens
GitLens可以显示每一行代码的作者，提交时间，以及commit信息，在想要知道哪行代码是谁改动的时候非常的实用。

ESlint

ESlint可以在我们在coding的时候，分析我们的代码，对有错误或不符合规范的地方，给出提示，让我们第一时间发现代码的问题。同时，还能在保存时，帮助我们自动修复一些问题。

Path Intellisense

Path Intellisense可以智能提示路径，并帮我们自动补全路径

Document This

可以帮我们快速生成代码注释，比如一些函数的注释，能够自动抽取出参数的定义。比如下面的函数，只需在上面输入/**， 就会自动触发 Document This插件，生成如下的注释。

Project Manager

工作中，我们经常会来回切换多个项目，每次都要找到对应项目的目录再打开，比较麻烦。Project Manager插件可以解决这样的烦恼，它提供了专门的视图来展示你的项目，我们可以把常用的项目保存在这里，需要时一键切换，十分方便，妈妈再也不用担心我忘记把项目放在哪个目录下了。

Import Cost
在项目开发过程中，我们会引入很多npm包，有时候可能只用到了某个包里的一个方法，却引入了整个包，导致代码体积增大很多。Import Cost 可以在代码中友好的提示我们，当前引入的包会增加多少体积，这很有助于帮我们优化代码的体积。

Auto Rename Tag

对于成对的html标签，改动标签头的时候，闭合标签也会随之改动，反之亦然。

settings中添加下面设置，在这些语言里都可以用：

"auto-rename-tag.activationOnLanguage": [
    "html",
    "xml",
    "php",
    "javascript",
    "javascriptreact"
  ]

Debugger for Chrome（必备调试工具）

插件地址：marketplace.visualstudio.com/items?itemN…

以往的前端调试，主要是 JavaScript 调试，你需要在 Chrome 的控制台中找到对应代码的部分，添加上断点，然后在 Chrome 的控制台中单步调试并在其中查看值的变化。

而在使用了 Debugger for Chrome 后，当代码在 Chrome 中运行后，你可以直接在 VSCode 中加上断点，点击运行后，Chrome 中的页面继续运行，执行到你在 VSCode 中添加的断点后，你可以直接在 VSCode 中进行单步调试。

关于 Chrome 调试工具的使用，你可以参考我在我们的知识星球中分享的原创视频教程「50 个 Chrome Developer Tools 必备技巧」，课程分享了前端开发中必备的浏览器调试工具 Chrome Developer Tools 使用过程中必备的 50 个使用与调试技巧，这些知识是你成为合格的前端开发人员必备技能。

Code Runner（万能语言运行环境）

插件地址：marketplace.visualstudio.com/items?itemN…

如果你需要学习或者接触各种各样的开发语言，那么 Code Runner 插件可以让你不用搭建各种语言的开发环境，直接通过此插件就可以直接运行对应语言的代码，非常适合学习或测试各种开发语言。

支持的语言有：C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, F# (.NET Core), C# Script, C# (.NET Core), VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script, R, AppleScript, Elixir, Visual Basic .NET, Clojure, Haxe, Objective-C, Rust, Racket, AutoHotkey, AutoIt, Kotlin, Dart, Free Pascal, Haskell, Nim, D, 以及一些自定义的命令。

Code Spell Checker（代码拼写检查）

插件地址：marketplace.visualstudio.com/items?itemN…

此插件安装后就不用管就好了，在你代码中有单词拼写错误时，你就会发现它的好处，因为我们写代码毕竟都是大量的英文单词变量定义，插件还可以给出错误拼写单词的建议。

Live Server

开启本地开发时服务器，为静态和动态页面提供实时刷新功能。

源码：vscode-chrome-debugvscode-live-server。

Paste as JSON

快速地将JSON数据转为JavaScript代码。源码：quick-type。

如何分享插件给小伙伴

如果上述说的没有记住，可以在项目的 .vscode 目录下创建文件 extensions.json。然后给recommendations 提供一个想要分享给同伴的插件的 ID 数组，这样当他们打开项目，并且没有安装某些插件时，VS Code就会提示安装了，并且可以一键全部安装。

.vscode/extensions.json 文件内是这样的。

 1 {
 2     "recommendations": [
 3       '2gua.rainbow-brackets',
 4       'oderwat.indent-rainbow',       
 5       'alefragnani.project-manager',       
 6       'wix.vscode-import-cost',       
 7       'jaspernorth.vscode-pigments',       
 8       'eamodio.gitlens',       
 9       'shan.code-settings-sync',       
10       'shd101wyy.markdown-preview-enhanced',       
11       'dbaeumer.vscode-eslint',       
12       'christian-kohler.path-intellisense',       
13       'joelday.docthis'    
14    ]
15 }

可以直接复制上面的代码到自己项目的.vscode/extensions.json 文件中，一键安装本文介绍的所有插件。


引用文章：

https://www.cnblogs.com/mxyr/p/11586151.html

https://www.cnblogs.com/zhaoshujie/p/9834654.html

https://www.jianshu.com/p/34fa629358f7

avatar
文章
阅读
粉丝