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

@

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.

2. Javascript (ES6) Code Snippets

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



我喜欢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

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

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

9. Project Manager

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

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

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

10. Editor Config

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



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

11. Sublime Text Keymap

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



你是Sublime的狂热用户,不愿意切换到VS Code吗? 通过更改所有快捷方式以匹配Sublime的快捷方式,此扩展程序将使你切换得没有任何感知。 现在,你有什么理由不进行切换?

12. Browser Preview

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



我喜欢 Live Server extension 扩展(上文提到的),但就便利性而言,这个扩展更进一步。它为您提供了VS Code内部的实时重新加载预览。 无需再查看浏览器即可看到很小的变化!

13. Git Lens

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



git插件一大堆,但是其中一个功能最强大,最多。 您会得到有关警告的信息,行和文件的历史记录,提交搜索等等。 如果你需要有关Git工作流程的帮助,请从这个插件开始!

14. Polacode

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



你知道你在博客和推特中看到的那些漂亮的代码截图吗? 好吧,很可能它们来自Polacode。 使用起来超级简单。 将一段代码复制到剪贴板,打开扩展名,粘贴代码,然后单击保存图像!

15. Prettier

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



不要花时间格式化代码...它做了。 前面,我提到了ESLint,它提供格式化和检查。 如果你不需要棉绒检查,那么选择Prettier。 它非常容易设置,可以配置为在保存时自动格式化代码。

16. Better Comments

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

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

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

17. Git Link

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

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

18. VS Code Icons

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



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

19. Material Icon Theme

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



你是Google Material 设计的粉丝吗? 那么,检出这个“ Material主题”图标包。 有数百种不同的图标,它们看起来很棒!

20. Settings Sync

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

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

21. Better Align

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



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

22. VIM

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

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

对于Web开发最棒的22个Visual Studio Code插件的更多相关文章

  1. 30个极大提高开发效率的Visual Studio Code插件

    译者按: 看完这篇文章,我打算从 Sublime Text 转到 Visual Studio Code 了! 原文: Immensely upgrade your development enviro ...

  2. 角落的开发工具集之Vs(Visual Studio)2017插件推荐

    因为最近录制视频的缘故,很多朋友都在QQ群留言,或者微信公众号私信我,问我一些工具和一些插件啊,怎么使用的啊?那么今天我忙里偷闲整理一下清单,然后在这里面公布出来. Visual Studio 201 ...

  3. 【转】角落的开发工具集之Vs(Visual Studio)2017插件推荐

    因为最近录制视频的缘故,很多朋友都在QQ群留言,或者微信公众号私信我,问我一些工具和一些插件啊,怎么使用的啊?那么今天我忙里偷闲整理一下清单,然后在这里面公布出来. Visual Studio 201 ...

  4. .Net Core 常用开发工具(IDE和运行时、Visual Studio插件、Visual Studio Code插件)

    IDE和运行时 组件名 描述 可选版本 推荐版本 Visual Studio Community 社区免费版 For Visual Studio 2017 For Visual Studio 2019 ...

  5. 新成员!Visual Studio Code --跨平台的开发工具(支持OSX, Linux 和 Windows)

    原文出处:新成员!Visual Studio Code --跨平台的开发工具(支持OSX, Linux 和 Windows) 这是我的文章备份  http://www.dotblogs.com.tw/ ...

  6. 教你用Visual Studio Code做PHP开发 - 微软官方工具,IDE中的黑马

    转载于:http://bbs.wfun.com/thread-902655-1-1.html,仅供自己备忘 本文为我在智机网的原创  ] 关于Visual Studio Code,可能有的开发者很陌生 ...

  7. [Tool] 使用Visual Studio Code开发TypeScript

    [Tool] 使用Visual Studio Code开发TypeScript 注意 依照本篇操作步骤实作,就可以在「Windows」.「OS X」操作系统上,使用Visual Studio Code ...

  8. Visual Studio Code开发TypeScript

    [Tool] 使用Visual Studio Code开发TypeScript   [Tool] 使用Visual Studio Code开发TypeScript 注意 依照本篇操作步骤实作,就可以在 ...

  9. 使用Visual Studio Code开发.NET Core看这篇就够了

    作者:依乐祝 原文地址:https://www.cnblogs.com/yilezhu/p/9926078.html 在本文中,我将带着大家一步一步的通过图文的形式来演示如何在Visual Studi ...

随机推荐

  1. 数据结构 - 二叉树的遍历(递归VS非递归)

    import java.util.LinkedList; public class BinaryTree { public static void main(String[] args) { int ...

  2. 揭秘仿比心app源码的开发背后,功能是如何实现的

    约单陪玩系统作为最近兴起的开发热点,引起了竞相开发,其中比心源码可以说是行业内运营级别的APP中功能比较齐全的,那么仿比心app源码的功能是如何实现的呢,接下来就带大家简单分析一下. 仿比心app源码 ...

  3. 为什么重写 equals() 方法,一定要重写 hashCode() 呢?| HashMap

    微信搜索「码农田小齐」,关注这个在纽约的程序媛,回复「01-05」可以获取计算机精选书籍.个人刷题笔记.大厂面经.面试资料等资源,么么哒- 首先我们有一个假设:任何两个 object 的 hashCo ...

  4. Python爬虫-换行的匹配

    之前在学习爬虫的时候遇到了匹配内容时发现存在换行,这时没法匹配了,后来在网上找到了一种方法,当时懒得记录,今天突然有遇到了这种情况,想想还是在这里记录一下吧. 当时爬取的时csdn首页博客,如下图 看 ...

  5. Java中float浮点型变量不加F报错情况

    1 public class Text { 2 3 public static void main(String args[] ){ 4 float x=123.45; 5 System.out.pr ...

  6. Docker - 解决 gitlab 容器上的项目进行 clone 时,IP 地址显示一串数字而不是正常 IP 地址的问题

    问题背景 通过 gitlab 容器创建了一个项目,想 clone 到本地,结果发现项目的 IP 地址是一串数字 问题排查 明明创建项目的时候,IP 地址还是正常的鸭! 再看看项目的 settings ...

  7. Spring源码解析之BeanFactoryPostProcessor(一)

    BeanFactoryPostProcessor 在前面几个章节,笔者有介绍过BeanFactoryPostProcessor,在spring在解析BeanDefinition之后,正式初始化bean ...

  8. jquery DataTable插件使用自定义搜索

    $(function () { $("#pk_status").change(function () { valid = $(this).val(); if(valid){ tab ...

  9. JS多物体运动案例:变宽、变高

    任务描述: 当鼠标移入"变宽"矩形时,该矩形宽度逐渐增加至400px,移出该矩形,宽度逐渐恢复至初始值;当鼠标移入"变高"矩形时,该矩形高度逐渐增加至400px ...

  10. GDB的原理

    gdb调试不管是本地调试还是远程调试,都是基于ptrace系统调用来实现. ptrace系统调用提供了一种方法,让父进程可以观察和控制其它进程的执行,检查和改变其核心映像及寄存器.主要用来实现断点调试 ...