对于Web开发最棒的22个Visual Studio Code插件

妖狐艹你老母 2022-12-25 06:55 129阅读 0赞

> 翻译    原文作者：James Quick    原文地址：https://scotch.io/bar-talk/22-best-visual-studio-code-extensions-for-web-development

### 文章目录 ###

*  1. Debugger for chrome
 *  2. Javascript (ES6) Code Snippets
 *  3. ESLint
 *  4. Live server
 *  5. Bracket Pair Colorizor
 *  6. Auto Rename Tag
 *  7. Quokka
 *  8. Path Intellisense
 *  9. Project Manager
 *  10. Editor Config
 *  11. Sublime Text Keymap
 *  12. Browser Preview
 *  13. Git Lens
 *  14. Polacode
 *  15. Prettier
 *  16. Better Comments
 *  17. Git Link
 *  18. VS Code Icons
 *  19. Material Icon Theme
 *  20. Settings Sync
 *  21. Better Align
 *  22. VIM

# 1. Debugger for chrome #

> https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

![在这里插入图片描述][20201130223146128.png_pic_center]

相信我，调试JavaScript不仅仅是写 console.log() （虽然这种方式应用最多）。Chrome内置了一些功能，可以拥有更好的调试体验。这个插件能让你在vs code里使用所有（或者几乎所有）这些调试功能。

如果你想了解更多，你可以阅读：

[Debugging JavaScript in Chrome and Visual Studio Code.][]

# 2. Javascript (ES6) Code Snippets #

> https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets

![在这里插入图片描述][20201204210153632.png_pic_center]  
我喜欢Snippets插件。我觉得没有必要反复输入同一段代码。这个插件为你提供了流行的（ES6）JavaScript代码片段。

注…如果你没有用es6javascript特性——赶紧用起来吧！

# 3. ESLint #

> https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

![在这里插入图片描述][20201204210624829.png_pic_center]  
是否想编写更好的代码？ 是否需要整个团队使用一致的格式？ 安装ESLint。 这个插件可以配置为自动设置代码格式以及带有错误或警告的“yell（提示）”。 VS Code通过合适的配置，可以向你展示这些提示。

# 4. Live server #

> https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

![在这里插入图片描述][20201204210919210.png_pic_center]  
在代码编辑器中进行更改，切换到浏览器，然后刷新以查看更改。 那是开发人员无休止的循环，但是如果你在进行更改时浏览器会自动刷新会怎样呢？ 这就是Live Server的用武之地！

它还在本地服务器上运行你的应用程序。 有些事情只有在服务器里运行应用程序时才能测试，因此这也是个利好之处。

# 5. Bracket Pair Colorizor #

> https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer

![在这里插入图片描述][20201204211240698.png_pic_center]  
括号阻止开发人员活着的祸害。 使用大量嵌套代码，几乎不可能确定哪些括号彼此匹配。 Bracket Pair Colorizor（如你所料）为括号匹配颜色，以使代码更具可读性。 相信我，你想要！

# 6. Auto Rename Tag #

> https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

![在这里插入图片描述][20201204211509369.png_pic_center]

是否需要重命名HTML中的元素？ 好了，使用“Auto Rename Tag”，你只需要重命名开始或结束标签，其他标签将自动重命名。 简单但有效！

# 7. Quokka #

> https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode

![在这里插入图片描述][20201204211637701.png_pic_center]  
需要一个快速的地方来测试一些JavaScript吗？ 我曾经习惯在Chrome中打开控制台，然后在其中输入一些代码，但缺点很多。 Quokka在VS Code中为你提供了一个JavaScript（和TypeScript）暂存器。 这意味着你可以在自己喜欢的编辑器中测试一段代码！

# 8. Path Intellisense #

> https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

![在这里插入图片描述][20201204211823153.png_pic_center]

在大型项目中，记住特定的文件名和文件所在的目录可能会很麻烦。 此插件将为你提供智能提示。 当你开始在引号中输入路径时，你将看到目录和文件名的智能提示。 这样可以避免你在文件浏览中花费大量时间：)

# 9. Project Manager #

> https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager

![在这里插入图片描述][20201204212104922.png_pic_center]

我讨厌的一件事是在VS Code中的项目之间切换。 每次我必须打开文件资源管理器并在计算机上找到项目时。 但这随Project Manager 的应用而改变。 使用此插件，你可以在项目的侧边菜单中打开一个额外的菜单。 你可以在项目之间快速切换，保存收藏夹或从文件系统自动检测Git项目。

如果你开发多个不同的项目，那么这是保持组织状态和提高效率的好方法。

# 10. Editor Config #

> https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig

![在这里插入图片描述][20201204212515842.png_pic_center]  
Editor Config是少数几种编码样式的标准，在主要文本编辑器/ IDE中都得到支持。 运行方式如下如下。 你将配置文件保存在你的编辑器支持的存储库中。 在这种情况下，你必须为VS Code添加扩展名，以使其遵守这些配置文件。 设置起来超级容易，非常适合团队项目。

# 11. Sublime Text Keymap #

> https://marketplace.visualstudio.com/items?itemName=ms-vscode.sublime-keybindings

![在这里插入图片描述][20201204212804781.png_pic_center]  
你是Sublime的狂热用户，不愿意切换到VS Code吗？ 通过更改所有快捷方式以匹配Sublime的快捷方式，此扩展程序将使你切换得没有任何感知。 现在，你有什么理由不进行切换？

# 12. Browser Preview #

> https://marketplace.visualstudio.com/items?itemName=auchenberg.vscode-browser-preview

![在这里插入图片描述][20201204213030784.png_pic_center]  
我喜欢 Live Server extension 扩展（上文提到的），但就便利性而言，这个扩展更进一步。它为您提供了VS Code内部的实时重新加载预览。 无需再查看浏览器即可看到很小的变化！

# 13. Git Lens #

> https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

![在这里插入图片描述][20201204213303590.png_pic_center]  
git插件一大堆，但是其中一个功能最强大，最多。 您会得到有关警告的信息，行和文件的历史记录，提交搜索等等。 如果你需要有关Git工作流程的帮助，请从这个插件开始！

# 14. Polacode #

> https://marketplace.visualstudio.com/items?itemName=pnp.polacode

![在这里插入图片描述][20201204213523165.png_pic_center]  
你知道你在博客和推特中看到的那些漂亮的代码截图吗？ 好吧，很可能它们来自Polacode。 使用起来超级简单。 将一段代码复制到剪贴板，打开扩展名，粘贴代码，然后单击保存图像！

# 15. Prettier #

> https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

![在这里插入图片描述][20201204213734658.png_pic_center]  
不要花时间格式化代码…它做了。 前面，我提到了ESLint，它提供格式化和检查。 如果你不需要棉绒检查，那么选择Prettier。 它非常容易设置，可以配置为在保存时自动格式化代码。

# 16. Better Comments #

> https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments

![在这里插入图片描述][20201204214017750.png_pic_center]

此插件对各种类型的注释进行不同颜色标记，以赋予它们不同的含义，并在其余代码中突出。 我一直在用这个来做提示。 很难忽略一个橙色的大提示，告诉我我有一些未完成的工作要做。

还有用于问题，警报和强调的颜色代码。 你也可以添加自己定义的！

# 17. Git Link #

> https://marketplace.visualstudio.com/items?itemName=qezhu.gitlink

![在这里插入图片描述][20201204214242271.png_pic_center]

如果你想在Github中查看正在处理的文件，则这个插件适合你。 安装后，只需右键单击文件，你将看到在Github中打开文件的选项。 如果你不使用Git Lens插件的话，这个插件对于检查历史记录，分支版本等非常好用。

# 18. VS Code Icons #

> https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons

![在这里插入图片描述][20201204214448438.png_pic_center]  
你知道可以自定义VS Code中的图标吗？ 如果你查看设置，将会看到“文件图标主题”的选项。 从那里，你可以从预安装的图标中选择或安装图标包。 这个插件为你提供了一个非常可爱的图标包，已有1100万人使用！

# 19. Material Icon Theme #

> https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme

![在这里插入图片描述][20201204214642285.png_pic_center]  
你是Google Material 设计的粉丝吗？ 那么，检出这个“ Material主题”图标包。 有数百种不同的图标，它们看起来很棒！

# 20. Settings Sync #

> https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync

![在这里插入图片描述][20201204214906916.png_pic_center]

开发人员（包括我自己）花费大量时间自定义开发环境，尤其是文本编辑器。 使用“Settings Sync”插件，你可以在Github中保存设置。 然后，可以使用一个命令将它们加载到任何新版本的VS Code。

# 21. Better Align #

> https://marketplace.visualstudio.com/items?itemName=wwm.better-align

![在这里插入图片描述][20201204215059325.png_pic_center]  
如果你是那种喜欢代码中完美对齐的人，那么你需要Better Align。 你可以对齐多个变量声明，尾随注释，代码段等。没有比安装并尝试一下更好的办法来了解这个插件的过人之处了！

# 22. VIM #

> https://marketplace.visualstudio.com/items?itemName=vscodevim.vim

![在这里插入图片描述][20201204215254745.png_pic_center]

你是VIM深度用户吗？ 如果是的话，恭喜，你所掌握所有VIM骚操作，可以直接在VS Code中使用它。 我个人并不善于此道，但是我知道使用VIM发挥其潜力时会产生多么疯狂的生产力，从而为你提供更多的功能。

[20201130223146128.png_pic_center]: /images/20221120/3895864aa54045c5b9e38d70922a62f6.png
[Debugging JavaScript in Chrome and Visual Studio Code.]: https://scotch.io/tutorials/debugging-javascript-in-google-chrome-and-visual-studio-code
[20201204210153632.png_pic_center]: /images/20221120/b81137c38dbc49a5991e61f08faa365d.png
[20201204210624829.png_pic_center]: /images/20221120/50c3e03ff851421abe383b560eaa8aa5.png
[20201204210919210.png_pic_center]: /images/20221120/cbdd34947220492bbd8a02ada0b35a3a.png
[20201204211240698.png_pic_center]: /images/20221120/bf248dc87b71458d856bb4db47a208d4.png
[20201204211509369.png_pic_center]: /images/20221120/bb45c03242cf4a79b3a4ba2502b4e382.png
[20201204211637701.png_pic_center]: /images/20221120/37ad798f97d84122a913f9718c9e2790.png
[20201204211823153.png_pic_center]: /images/20221120/ff069014a9794efdab8cca883a32fbc7.png
[20201204212104922.png_pic_center]: /images/20221120/7154b7598d1c445b9d4851915a7f4224.png
[20201204212515842.png_pic_center]: /images/20221120/b64b917fe9ee45da9c3d7ebc9f5c5561.png
[20201204212804781.png_pic_center]: /images/20221120/0b1abf6153dc4458b6b4afffee577ce0.png
[20201204213030784.png_pic_center]: /images/20221120/9dd97ec140454fc2818f18d85b4e514d.png
[20201204213303590.png_pic_center]: /images/20221120/32406221659d433d84584538d6a861de.png
[20201204213523165.png_pic_center]: /images/20221120/c982d6dcb1634c659900d636cd50d183.png
[20201204213734658.png_pic_center]: /images/20221120/1284e6e063ff4011a6a4306762fa35b1.png
[20201204214017750.png_pic_center]: /images/20221120/91d05583e8254e12a8d7d2b9f930fa80.png
[20201204214242271.png_pic_center]: /images/20221120/6c22a5f3190a41ba876bc605a15789d7.png
[20201204214448438.png_pic_center]: /images/20221120/d484cb56b0ce4f679318eaa3237d17cf.png
[20201204214642285.png_pic_center]: /images/20221120/7cdbd881f8de4a66b59680497b603bb4.png
[20201204214906916.png_pic_center]: /images/20221120/478df593248140109724abecb4bb13cc.png
[20201204215059325.png_pic_center]: /images/20221120/68a5310aabc649dd998a1d276745482a.png
[20201204215254745.png_pic_center]: /images/20221120/48b082b70e32435da82575dbde8a62dd.png