前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互 ，它从网页制作演变而来，在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。WEB学校人教育的老师会当堂解决学员在学习中遇到的问题，不让学员留有任何学习上的疑难困惑;课后老师会对学员的作业、学习情况进行跟踪辅导，让学员能更好的完成老师布置的作业。

科技行业里，可供人们使用的工具成百上千，你要怎么知道用哪一种上手最合适呢?

拿最近刚进入编程这行的人来说吧，大量的工具信息堆砌过来其实毫无益处，反而会无从下手。我发现在自己的开发过程中，很多安装的扩展工具不仅没有真正起到助益作用，反而常常妨碍了正常的开发工作。

我不是专家，不过随着时间的推移，我还是编制了一份工具清单，这些工具已经证明对我非常有用。如果你刚刚开始学习怎么编程的话，这个清单能给你提供一些指导。如果你是个经验丰富的开发人员，也希望你能从中学到一些新的东西。

我将把这篇文章分为 Chrome 扩展程序和 VS 代码扩展扩展程序两部分。我知道还有其他的浏览器和文本编辑器，但是我想你当然只能在你能找到的工具里选择，所以还是别因为个人喜好而引起一场宗教般的争论。

请随便选。

Chrome 扩展程序

现在设我是一位 web 开发人员，以 Chrome 为阵地。下面是一些能让我少花点时间的工具：

WhatFont?——?名字就说明了一切。这是找出你最喜欢网站使用的字体的简单方法，这样你就可以为己所用了。

Pesticide——?修改 CSS 的绝佳程序。当我试着学习匣子模型的时候，它简直就是救命稻草般的存在。

Colorzilla?——用于复制确切颜色的一个网站，用它可以将颜色直接复制到剪贴板上，这样你就没必要花太多时间获得正确的 RGBA 组合了。

CSS Peeper——查看网站使用的颜色时非常方便。在你一开始山寨你认为酷的网站的时候很管用。这个程序能让你查看它们的幕后的色彩方案。

Wappalyzer?——想要获悉你在网站上看到的是什么技术，这个程序很有用。想知道某网站使用什么样的框架或者它承载了什么服务?这个照样管用。

React Dev Tools——一款用于调试应用程序的工具。有一点要提一下，它只有在你编写 React 程序时才有用。

Redux Dev Tools——一款用于调试应用程序的工具。有一点要提一下，它只有在你编写 Redux 程序时才有用。

JSON Formatter?——让 JSON 在浏览器中看起来更一目了然的不二之选。也许麻烦的 JSON 让你苦不堪言，不过只要用了这个软件，找到你要找的东西，所花费的时间会大幅缩短。

Vimeo Repeat and Speed?——加速 Vimeo 视频的绝佳工具。如果你像大多数的 web 开发人员一样观看视频教程，你就会知道用 1.25 倍的常规回放速度观看它们是多么的方便。本程序同时也有适用于 YouTube 的版本。

VS Code 扩展程序

Visual Studio Code 是我写代码时的不二之选。

每个人都有他自己喜欢的文本编辑器，我也不例外。不过，我还是想把这些扩展程序介绍给你，而它们对你所使用的大多数编辑器都适用。看看我最喜欢的扩展程序有哪些：

Auto Rename Tag?——自动重命名成对的 HTML 标记。假如你创建了一个

标记。现在你想更改它。有了这个软件，你只需要更改一个就行，另一个会自动修改。从理论上来说，使用这个软件可以把你的工作效率提升一倍。

HTML CSS Support?——HTML 文档的 CSS 支持工具。该工具在获得一些简洁的语法高亮显示和代码建议方面非常有用。

HTML Snippets?——这一工具在代码分段方面非常有用，可以为你节省大量的时间。它能跟 Emmet 配对，这样一来你甚至都不用再真正键入 HTML 了。

Babel ES6/ES7?——JavaScript Babel 的辅助工具。如果你用的是 Babel，这个工具可以让你更容易区分代码。如果你喜欢 JavaScript，那务必也不要错过这款软件。

Bracket Pair Colorizer?——色彩可视化工具。如果你没有准确地括号，那这个工具对于发现因此导致的许多常见漏洞十分方便。

ESLint?——你在编写代码的时候，利用这个软件可以轻易获取有关漏洞的提示，而且在编码过程中，它还可以帮助你养成良好的编码习惯。

Guides?——这一工具可以被用来添加额外的指导行代码。这是另一个视觉提示，以确保你正确地括号了。

JavaScript Console Utils?——使控制台日志记录变得更为简单可行。如果你像大多数开发人员一样，你会发现自己需要在调试流中登录到控制台(我知道我们应该使用调试器)。这个实用的程序使得创建有用的 console.log ()语句变得易如反掌。

Code Spell Checker?——这一工具正如其名，是拼写检查程序。漏洞的的另一个常见来源是变量或函数名。这一拼写检查工具可以查找不常见的单词，而且还可以把我们用 JavaScript 编写的东西进行有效的审核。

Git Lens?——可以让我们对某文件何时、以及由何人进行更改变得一目了然。当代码被破坏时，我们就能找到该负责任的人，而不是让你当替罪羊了。

Path Intellisense?——文件路径自动完成程序。这样一来从其他文件中导入重要的东西就非常方便了。这一工具使文件导航变得轻而易举。

Prettier?——自动代码格式化程序。忘掉那些你不得不手动缩进代码的日子吧，有了这个工具，事情就变得简单多啦。这个程序会比你自己做得更快更好。对这个程序我是鼎力推荐的。

VSCode-Icons?——将图标添加到文件谱中。如果文件结构非常不科学，你的眼睛想罢工的话，这个程序可能会有所帮助。它对于你正在制作的任何文件都能提供有用的图标辅助，能使你更为轻易地区分看到的内容。

总结

你肯定也有自己中意的工具，这些工具对你的开发工作来说是必不可少的。也希望我上面提到的一些工具能够提高你的工作效率。

但是千万不要落入贪多不烂的陷阱，因为它可能耗费很多时间。

希望你能在评论区留下你最喜欢的工具，这样我们就可以共同进步了。

* 免责声明：转载文章和图片均来自公开网络，版权归作者本人所有，推送文章除非无法确认，我们都会注明作者和来源。如果出处有误或侵犯到原作者权益，请与我们联系删除或授权事宜。