收藏了！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
六、Polymer

文章图片
创建这组JavaScript工具是为了帮助你构建更好的web，包括web组件、库、工具和标准，你可以在这里找到大量的资源，如material web组件或用于JavaScript的HTML模板库。
官网地址：https://www.polymer-project.org/
Github地址：https://github.com/Polymer/polymer
七、Shave

文章图片
【收藏了！10个最好的前端开发工具和插件合集】这个JavaScript插件将帮助你截断HTML元素中的文本。使用set max-height，将剩余文本截断，使其适合元素。然而，最好的部分是它将额外的文本存储在一个隐藏的< span> 元素中，这意味着你不会丢失原始文本。这将改变游戏规则
官网地址：https://stenciljs.com/
Github地址：https://github.com/ionic-team/stencil
八、StencilJS

文章图片
Stencil结合了一些最流行的前端框架的最佳概念来生成在任何现代浏览器中运行的web组件。它简单、快速，而且不受未来的影响你。
官网地址：https://stenciljs.com/
Github地址：https://github.com/ionic-team/stencil
九、TypeScript前端开发语言

文章图片
TypeScript是一个类型化的JavaScript超集，它编译成纯JavaScript，允许你使用流行的库，同时使用你熟悉和喜欢的语法。它可以支持大型应用程序，与各种其他工具协同工作，并确保简化你的工作流程。
官网地址：https://www.typescriptlang.org/
Github地址：https://github.com/microsoft/TypeScript
十、Webpack打包工具

文章图片
如果你正在寻找一种超级灵活的方式来捆绑你的应用程序的依赖项，只需看看Webpack。这个用于现代JavaScript应用程序的模块bundler将以一种简化的方式将你的资源打包起来，使你的代码保持干净，并使你的浏览器负载最小化。
官网地址：https://webpack.github.io/
Github地址：https://github.com/webpack/webpack