前端开发工具整理

title: 前端开发工具整理 date: 2018-8-19 17:01:36

前端开发工具简单整理，包括Chrome Extension和VS Code Extensions

工欲善其事，必先利其器

Chrome Extensions

下面是一些能让我们少花点时间在那里的工具。

WhatFont[1] 名字就说明了一切。这是找到你最喜欢的网站使用的字体的简单方法。
Pesticide 用于查看div标签的轮廓以及修改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 Extensions

Visual Studio Code是我的编辑器。

Auto Rename Tag 自动重命名成对的HTML标记。您创建了一个
标记。现在，您想要更改它，以及它的闭合
标记。只要改变一个，另一个就会跟随着变化。理论上可以提高你的工作效率2倍。
HTML CSS Support CSS对HTML文档的支持。这对于获得一些简洁的语法高亮显示和代码建议非常有用，这样CSS只会让你每天都想放弃几次代码。
HTML Snippets 它是有用的代码片段，另外也是一个很好的节省时间的工具。与Emmet配对，你几乎不用再键入真正的HTML。
Babel ES6/ES7 添加JavaScript Babel语法颜色。如果您使用的是Babel，这将使您更容易区分代码中正在发生的事情。如果您喜欢使用JavaScript的现代特性，这是很优雅的。
Bracket Pair Colorizer 将颜色添加到方括号中，以方便块可视化。这对于那些非常常见的错误非常方便，比如您没有准确地关闭括号或圆括号。
ESLint 将ESLint集成到Visual Studio代码中。当您编写代码时，这可以方便地获得有关bug的提示，而且根据您的配置，它可以帮助强制执行良好的编码风格。
Guides 为代码添加额外的引导行。这是另一个视觉提示，以确保您正确地关闭了括号。
JavaScript Console Utils 使得查看控制台日志更加容易。如果您像大多数开发人员一样，您将发现自己在调试流程中打印到控制台(我知道我们应该使用调试器)。这个实用程序使得创建有用的console.log()语句变得很容易。
Code Spell Checker 描述驼峰拼写法的检查程序。另一个常见的错误来源是按错键书写的变量或函数名。这个拼写检查器将查找不常见的单词，并且很好地解释了我们用JavaScript编写东西的方式。
Git Lens 让人更容易看清何时，以及由谁做出的改变。当代码被破坏时，这很好地归咎到正确的人，因为这绝对不是你的错。
Path Intellisense 文件路径自动完成。这对于从其他文件导入东西非常方便。它使你的文件树导航变得轻而易举。
Prettier 自动代码格式化。忘掉那些你不得不手动缩进代码的日子，让一切变得清晰可认吧。
VSCode-Icons 向文件树添加图标。如果看你的文件结构伤害了你的眼睛，这可能会有帮助。对于你正在制作的任何文件，都有一个有用的图标，这将使你更容易区分你所看到的内容。

总结

您可能有自己的一套工具，这些工具在您的开发周期中是必不可少的。希望我上面提到的一些工具能够提高您的工作效率。但是，不要落入陷阱。因为，在学习使用已经拥有的工具之前，要安装所有的工具，这可能是一个巨大的时间消耗。

参考链接：

Chrome Extensions

VS Code Extensions