收藏了！10个最好的前端开发工具和插件合集

现在的前端开发已经不像从前了，从前是HTML+CSS+JS，现在？现在还用这三件宝可能就有点落后了，而且如果你要到好的公司，现在的前端开发要求更多了。其中最明显的一块就是前端开发工具和插件的使用，从语言、编译、调试到打包、部署等，前端的工作可是比后端还多，要成为一个标准的前端开发者可不容易。本文为你推荐10个目前最流行最好的前端开发工具和插件，大抵上涉及整个前端的开发过程需要使用的东西。

一、Babel前端编译工具

Babel是一个JavaScript编译工具，Babel是一个工具链，主要用于将ECMAScript 2015+代码转换为当前和旧浏览器或环境中向后兼容的JavaScript版本。Babel的功能包括：

转换语法。
源代码转换。
使用@babel/polyfill补充你的目标环境却少的特性。

Babel通过语法转换器支持最新版本的JavaScript，这些插件允许你使用新的语法，而无需等待浏览器的支持。

Babel可以转换JSX语法！将它与babel-sublime包一起使用，将语法高亮显示提升到一个全新的水平。

Babel可以去掉类型注释！检查出我们的流预置或TypeScript预置开始。记住Babel不做类型检查，你仍然需要安装并使用Flow或TypeScript来检查类型。

Babel是由插件构建的，使用现有的插件组成你自己的转换管道，或者编写你自己的。通过使用或创建一个预置，轻松使用一组插件。

官网地址：https://babeljs.io/

Github地址：https://github.com/babel/babel

二、ESLint

使用这个专门为JavaScript和JSX构建的可插入的linting实用程序来捕捉代码中的bug。这是在命令行中捕获语法错误和样式问题的一个很好的资源，因此可以为你节省一些时间和麻烦。

总的来说，ESLint是一个语法规则和代码风格检查工具，ESLint的主要特性如下：

寻找问题，ESLint静态分析你的代码，以快速发现问题。ESLint内置在大多数文本编辑器中，你可以将ESLint作为持续集成管道的一部分运行。
自动修复，ESLint发现的许多问题可以自动修复，ESLint修复程序是语法敏感的，因此你不会遇到由传统查找和替换算法引入的错误。
支持自定义，预处理代码，使用自定义解析器，并编写自己的规则，这些规则与ESLint的内置规则一起工作，你可以自定义ESLint来精确地按照项目所需的方式工作。

官网地址：https://eslint.org/

Github地址：https://github.com/eslint/eslint

三、Gatsby

这个React站点和APP生成器将帮助你构建快速、安全、现代的应用程序或网站，它实际上是一个强大工具的完整生态系统，具有许多了不起的Gatsby插件，允许你挑选你需要的解决方案。

官网地址：https://www.gatsbyjs.org/

Github地址：https://github.com/gatsbyjs/gatsby

四、iziModal

当你需要通知你的用户某些事情或要求一些信息时，有时最佳解决方案是使用弹出式模式。多亏了iziModal，一个轻量级的jQuery插件，你可以在你的网站上简单用一个！有几种不同的模式类型和大量的定制，这个灵活的插件是一个强大的解决方案。

官网地址：http://ww7.marcelodolce.com/

五、Meteor

当你使用JavaScript时，Meteor最快方法。由于集成了JavaScript堆栈，你可以用更少的代码做更多的事情，从而节省了大量的时间和编写代码的精力。它可以很好地与其他JavaScript框架和工具集成，而且对于桌面和移动设备也很有效。

Meteor的主要特性如下：

用更少的代码交付更多的代码，由于集成了从数据库扩展到最终用户屏幕的JavaScript堆栈，因此只需10行代码就可以完成1000行代码。
为任何设备构建应用程序，无论你是为web、iOS、Android还是桌面开发，都使用相同的代码。在没有获得应用商店许可或强迫用户下载新的本地应用的情况下推出新功能。
集成你已经使用的技术，使用流行的框架和工具，开箱即用。专注于构建特性，而不是自己将不同的组件连接在一起。

官网地址：https://www.meteor.com/

Github地址：https://github.com/meteor/meteor