22个Web开发中不错的VSCode插件(分享)

本篇文章给大家分享22个Web开发中不错的VSCode插件,帮助开发者提示开发效率,我们一起来看看吧!

【推荐学习:《vscode教程》】

1. Debugger for chrome

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

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

如果你想了解更多,你可以阅读:

Debugging JavaScript in Chrome and Visual Studio Code.

https://scotch.io/tutorials/debugging-javascript-in-google-chrome-and-visual-studio-code

2. Javascript (ES6) Code Snippets

https://scotch.io/tutorials/debugging-javascript-in-google-chrome-and-visual-studio-code

我喜欢Snippets插件。我觉得没有必要反复输入同一段代码。这个插件为你提供了流行的(ES6)JavaScript代码片段。

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

3. ESLint

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

是否想编写更好的代码? 是否需要整个团队使用一致的格式? 安装ESLint。 这个插件可以配置为自动设置代码格式以及带有错误或警告的“yell(提示)”。 VS Code通过合适的配置,可以向你展示这些提示。

4. Live server

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

在代码编辑器中进行更改,切换到浏览器,然后刷新以查看更改。 那是开发人员无休止的循环,但是如果你在进行更改时浏览器会自动刷新会怎样呢? 这就是Live Server的用武之地!

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

5. Bracket Pair Colorizor

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

括号阻止开发人员活着的祸害。 使用大量嵌套代码,几乎不可能确定哪些括号彼此匹配。 Bracket Pair Colorizor(如你所料)为括号匹配颜色,以使代码更具可读性。 相信我,你想要!

6. Auto Rename Tag

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

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

7. Quokka

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

需要一个快速的地方来测试一些JavaScript吗? 我曾经习惯在Chrome中打开控制台,然后在其中输入一些代码,但缺点很多。 Quokka在VS Code中为你提供了一个JavaScript(和TypeScript)暂存器。 这意味着你可以在自己喜欢的编辑器中测试一段代码!

8. Path Intellisense

郑重声明:本文版权包含图片归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们(delete@yzlfxy.com)修改或删除,多谢。

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

留言与评论(共有 0 条评论)
昵称:
匿名发表
   
验证码: