乐趣区

关于javascript:11个每个Web开发人员都应该拥有的VS-Code扩展

jiezi

微信搜寻【大迁世界】, 我会第一工夫和你分享前端行业趋势，学习路径等等。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

快来收费体验 ChatGpt plus 版本的，咱们出的钱 体验地址:https://chat.waixingyun.cn 能够退出网站底部技术群，一起找 bug，另外新版作图神器已上线 https://cube.waixingyun.cn/home

本文列出了 11 个举荐的插件，并为每个插件提供了简要的形容和其对 Web 开发的好处。

这些 VS Code 插件包含：

  1. Live Server：提供实时预览和主动刷新性能，不便调试和开发网页。
  2. Prettier：主动格式化代码，放弃代码格调的一致性和可读性。
  3. Auto Rename Tag：主动重命名 HTML 标签，进步代码保护效率。
  4. IntelliSense for CSS class names：提供 CSS 类名的智能提醒和主动补全性能。
  5. HTML CSS Support：加强 HTML 和 CSS 的语法高亮和代码提醒性能。
  6. Bracket Pair Colorizer：为代码中的括号增加色彩，进步代码可读性。
  7. GitLens：集成 Git 性能，显示代码行的作者和最近的批改记录。
  8. Better Comments：改善代码正文的可读性，辨别不同类型的正文。
  9. ES7 React/Redux/GraphQL/React-Native snippets：提供 React 和 GraphQL 的代码片段和疾速生成模板。
  10. Code Spell Checker：查看代码中的拼写错误和语法问题。
  11. Color Highlight：在编辑器中突出显示颜色代码，不便调试和设计。

1. Auto Rename Tag

厌倦了在解决 HTML/JSX 时手动更改开闭标签吗？主动重命名标签来帮忙了。只需装置它，让它主动解决替换开 / 闭标签，无论您何时调整它们中的任何一个；每当您重命名一个开标签或闭标签时，此扩大程序将更新另一个标签。

地址：https://marketplace.visualstudio.com/items?itemName=formulahe…

2. Color Highlight

简略而弱小的扩大，能够实时为所有文件以理论色彩边框或背景突出显示色彩，这样您就不用浪费时间在下次找出特定值的色彩。

地址：https://marketplace.visualstudio.com/items?itemName=naumovs.c…

3. Code Spell Checker

确保代码没有拼写错误对开发人员和审阅人员来说都是一种苦楚，因为咱们常常在代码中脱漏一些小的拼写错误，无论是在代码、内容还是正文中，然而这个扩大能够实时地突出显示这些拼写错误，并且还反对驼峰命名法和蛇形命名法。

它还反对增加一系列自定义词汇，你能够将其申明为误报

地址：https://marketplace.visualstudio.com/items?itemName=streetsid…

4. CodeSnap

间接从 VS Code 中拍摄一张可恶的代码快照，怎么样？只需装置此扩大程序，按下 Ctrl + Shift + P，搜寻 CodeSnap，抉择您想要捕获的代码，而后您的快照就能够分享了！

地址：https://marketplace.visualstudio.com/items?itemName=adpyke.co…

5. Error Lens

在列表中，这是我集体最喜爱的之一。我无奈表白这个扩大对于调试代码有多大帮忙，它能够在编辑器自身上显示谬误和正告（带有颜色代码），从而缩小了始终须要悬停在红线上的需要。

地址：https://marketplace.visualstudio.com/items?itemName=usernameh…

6. Git Lens

Git Lens 提供了疾速查看是谁批改了一行或代码块以及为什么批改的性能。它具备文件标记（指责和更改）和侧边栏视图等性能。

地址：https://marketplace.visualstudio.com/items?itemName=eamodio.g…

7. Live Server

这是我在 VS Code 中应用的第一个扩大，我特地喜爱它给本地工作带来的灵活性。它容许您启动一个本地开发服务器，反对动态和动静页面的热重载。

地址：https://marketplace.visualstudio.com/items?itemName=ritwickde…

8. SVG Preview

此扩大为 VS Code 增加了对 SVG 的实时预览和实时编辑的反对。

地址：https://marketplace.visualstudio.com/items?itemName=SimonSief…

9. Turbo Console Log

这对 JavaScript 和 TypeScript 开发人员来说是必备的，因为它容许通过抉择变量并应用键盘快捷键（Ctrl + Alt + L）来增加有用的日志音讯。

它还反对对以后文档中扩大增加的所有日志音讯进行正文 / 勾销正文。辞别手动输出日志信息。

地址：https://marketplace.visualstudio.com/items?itemName=ChakrounA…

10. TypeScript Error Translator

TypeScript 的谬误有时可能会令人困惑和丧气，然而这个扩大将谬误转化为可间接从 IDE 浏览的人类可读模式。

地址：https://marketplace.visualstudio.com/items?itemName=mattpococ…

11. Indent Rainbow

通过在每个步骤上扭转不同的色彩，这个扩大使得多步缩进更容易浏览。

这对于像 Python 和 Yaml 这样依赖缩进的语言特地有用，但对于不依赖缩进的语言也实用。

地址：https://marketplace.visualstudio.com/items?itemName=oderwat.i…

最初，感谢您抽出工夫浏览此内容。

交换

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

退出移动版