加速 Web 开发的 23 款前端开发工具

译者 | Mahipal Nehra翻译者 | 王磊市售有很多后端应用领域软件能快速 Web 合作开发组织工作。责任编辑是对 2019 年世界顶级 Web 应用领域软件的一场优选汇整，依次如是说了每一款辅助工具的关键性优点，并已附有浏览镜像。1. Novi Builder

Novi Builder 是两个分页式构筑器，它对训练有素的 Web 合作开发者而言是两个极好的优先选择。它为合作开发者提供更多了出访源码的职权，并容许合作开发者在 Web 结构设计中展开数项更动。你能用它全然掌控你的 Web 工程项目，因此能充分运用它的每项机能。虽然这款辅助工具对新手而言可能将极难进阶，但在它的为数众多竞争优势眼前而此严重不足也就不算什么了。

高阶标识符GUI

附带应用软件系统

多种不同玻璃钢主轴

分页介面

B2C机能全力支持

自动更新辅助工具

浏览镜像：

https://novibuilder.com/

ONE Subscription 是一款很有用的 Web 应用领域软件包，包含了为数众多高质量的数字产品。它提供更多了大批高品质的部件，能打造出机能完善的博客、在线商店、登录页面等各种网站。总的而言，它能为你提供更多数以千计的主轴和模板、多种不同插件和图形元素、附带服务以及其他很多好处。

对所有部件提供更多专业全力支持

定期更新

安全性（如果你订阅后尚未从数据库中浏览任何内容，则能在订阅开始后的 14 天内轻松取消订阅）

无使用限制的年度许可证

很多有用的服务（例如模板定制或安装）

浏览镜像：

https://one.templatemonster.com/

Creative Tim 提供更多了基于 Bootstrap 的结构设计元素，可帮助合作开发者加快合作开发组织工作。这款辅助工具能用来创建 Web 和移动应用领域。

提供更多了最简单的合作开发上手途径，也就是玻璃钢的示例页面；

这款辅助工具能帮助你节省时间，因此让你专注于业务模型；

提供更多易于使用的管理模板

管理面板可帮助你节省大量时间

提供更多玻璃钢的结构设计块和元素

订阅镜像：

https://bit.ly/2JMju8g

Npm 是 JavaScript 的 Node 包管理器。合作开发者能用它寻找可重用的软件包，然后用各种方式将这些包组合出强大的产品。这款 Web 应用领域软件是两个命令行实用程序，用来与软件包的存储库交互。

在存储库中发现并重用超过 470,000 个免费标识符包

在团队内鼓励标识符发现和重用

发布和掌控名称空间的访问职权

使用相同的组织工作流程管理公共和私人标识符

浏览镜像：

https://www.npmjs.com/

TypeScript 是一种开源后端脚本语言。它是 JavaScript 的严格语法超集，添加了可选的静态类型。它是专门为合作开发大型应用领域程序而结构设计的，并能编译为 JavaScript。

TypeScript 全力支持其他 JS 库

能在任何运行 JavaScript 的环境中使用 Typescript

它全力支持包含现有 JavaScript 库的类型信息的定义文件，例如 C/C++ 头文件；

可跨浏览器、设备和操作系统移植；

它能在任何运行 JavaScript 的环境中运行

浏览镜像：

https://www.typescriptlang.org/index.html#download-links

Codekit 是一款后端 Web 应用领域软件。它能全力支持合作开发人员更快地构筑网站，它能合并 JS 标识符、对 JS 标识符展开瘦身，还能检查 JavaScript 标识符的语法，它还能优化图像。

注入 CSS 更动而无需重新加载整个页面

合并脚本以减少 HTTP 请求。

瘦身标识符以减小文件大小

自动正确处理大多数语言

浏览镜像：

https://codekitapp.com/

WebStorm 为 JavaScript 提供更多了智能编码辅助。它为 Angular、React.js、Vue.js 和 Meteo 提供更多了高阶编码辅助，它还能帮助合作开发者在处理大型工程项目时提升编程效率。

WebStorm 帮助合作开发者在处理大型工程项目时提升效率

它提供更多了一些内置辅助工具，用于调试、测试和跟踪客户端和 Node.js 应用领域程序；

它与流行的 Web 合作开发命令行辅助工具软件系统

Spy-js 内置辅助工具可用来跟踪 JavaScript 标识符

它提供更多了两个统一的 UI，能够与很多流行的版本掌控系统协作；

能高度定制，以完美适应各种编码风格；

它为客户端标识符和 Node.js 应用领域提供更多了内置的调试器

浏览镜像：

https://www.jetbrains.com/webstorm/download/#section=windows

HTML5 Boilerplate 帮助合作开发者构筑响应快、健壮和适应性强的 Web 应用领域或网站。它是一组可浏览的文件，它提供更多了两个十分完善的 HTML 模版，完善到所有的页面似乎都应该遵守这个规则。

它让合作开发者能使用 HTML5 元素

它的结构设计遵从渐进增强原则

它的 Normalize.css 可用于 CSS 规范化，还提供更多了常见的错误修复；

它提供更多了 Apache 服务器配置以提高性能和安全性

它提供更多了 Google Universal Analytics 标识符段的优化版本

它能防止掌控台语句在较旧的浏览器中导致 JavaScript 错误

提供更多大量内联和随附文档

浏览镜像：

https://html5boilerplate.com/

AngularJS 是后端合作开发者的另一款必备辅助工具。它是两个开放源码的 Web 应用领域程序框架，它能帮助合作开发者扩展 Web 应用领域程序的 HTML 语法，它还提供更多了可出访、可读和表达性强的合作开发环境，从而简化了后端合作开发流程。

它是两个开源工程项目，全然免费，并被全球成千上万的合作开发者使用；

它提供更多了创建 RICH 互联网应用领域的能力

它提供更多了基于 MVC 使用 JavaScript 编写客户端应用领域程序的选项

它会自动处理 JavaScript 标识符，使其兼容各种浏览器。

浏览镜像：

https://angularjs.org/

Sass 是最可靠、最成熟也是最强大的 CSS 扩展语言。这款辅助工具可用来轻松扩展站点现有 CSS 的机能，例如变量、继承和嵌套等。

使用它的后端辅助工具编写任何标识符都非常简单明了

全力支持语言扩展，例如变量、嵌套和混合（mixins）；

提供更多了用于处理颜色和其他值的很多有用函数

高阶机能，例如库的掌控指令；

它提供更多了具有良好格式、可自定义的输出。

浏览镜像：

http://sass-lang.com/

Backbone.js 提供更多了具有键值绑定和自定义事件的模型，来为 Web 应用领域程序提供更多结构。

Backbone.js 容许合作开发者合作开发单页应用领域程序

Backbone.js 有两个简单的库，用于分隔业务和用户介面逻辑；

这款辅助工具使标识符变得简单、系统和组织化。它能充当任何工程项目的骨干；

它负责管理数据模型和用户数据，并在服务端显示这些数据；

它容许合作开发者创建客户端 Web 应用领域程序或移动应用领域程序。

浏览镜像：

http://backbonejs.org/

Grunt 是 NodeJS 上流行的任务运行器。它很灵活，用户很多，当涉及到任务自动化用途时，它是合作开发者的首选辅助工具，它提供更多了很多打包的插件来执行常见任务。

它的组织工作流程非常简单，只需编写两个设置文件即可；

它让合作开发者只需最少的步骤就能自动执行重复性任务；

它有两个简单直接的方法，并提供更多了 JS 版本的任务，JSON 版本的配置；

Grunt 内置很多用于扩展插件和脚本机能的任务

它能加快合作开发流程并提高工程项目效率

Grunt 的生态系统非常庞大，因此用户能轻松为任何事情设置自动化流程；

这款 Web 应用领域软件减少了执行重复任务时出错的概率。

浏览镜像：

https://gruntjs.com/

Jasmine 是一款行为驱动的 JavaScript 框架，用于测试 JavaScript 标识符。它不依赖于其他任何 JavaScript 组件，这款开源辅助工具不需要 DOM。

低开销，无外部依赖；

开箱即用，测试标识符所需的一切都打包好了；

使用相同的框架运行浏览器测试和 Node.js 测试。

浏览镜像：

https://jasmine.github.io/index.html

CodePen 是两个面向后端结构设计人员和合作开发者的 Web 合作开发环境。它的宗旨是提供更多更快、更顺畅的合作开发环境。合作开发者能用它构筑和部署网站，并构筑测试用例。

能用它来构筑组件，以备今后使用；

它包含一些很棒的机能，能提高 CSS 合作开发者的合作开发效率；

容许实时查看和实时同步

预填充 API 机能容许添加镜像和演示页面，而无需编写任何标识符。

浏览镜像：

https://codepen.io/

Foundation 是全力支持任何设备、介质和可出访性的后端框架。这个响应式后端框架使合作开发者能很容易地结构设计响应式网站、应用领域和电子邮件。

它提供更多了最干净的标记，而不会牺牲效用和性能；

能自定义构建以包含或删除某些元素，它定义了列的大小、颜色和字体大小；

更快的合作开发和页面加载速度

Foundation 针对移动设备展开了真正的优化

适用于所有级别合作开发者的可定制性

它将响应式结构设计提升到了新的水平，并为平板电脑提供更多了合作开发者迫切需要的中等网格。

浏览镜像：

http://foundation.zurb.com/sites/download.html/

Sublime Text 是非开源的跨平台源码GUI。这款应用领域应用领域软件原生全力支持很多编程语言和标记语言。

命令面板机能容许匹配的按键调用任意命令

同时编辑机能容许对多个区域应用领域相同的交互更动

提供更多基于 Python 的插件 API

容许合作开发者针对工程项目定制首选项

与 TextMate 的很多语言语法兼容

浏览镜像：

https://www.sublimetext.com/

Grid Guide 是另一款重要的后端应用领域软件。它容许在结构设计中创建像素级精确的网格，这是两个简单的辅助工具，能提供更多非常有价值的组织工作流程。

添加基于画布、画板和选定图层的参考线；

快速向边缘和中点添加辅助线

容许为其他画板和文档创建重复的指南

帮助用户创建自定义网格

浏览镜像：

https://guideguide.me/

Chrome 应用领域软件是 Chrome 内置的一组调试辅助工具。这些辅助工具使合作开发者能展开各种测试，从而轻松节省大量时间。

它容许添加自定义 CSS 规则

用户能查看边距、边框和填充；

它能帮助合作开发者模拟移动设备

能将应用领域软件用作GUI

打开应用领域软件后，用户能轻松禁用浏览器的缓存。

浏览镜像：

https://developer.chrome.com/devtools

Modaal 是后端合作开发插件，可提供更多高质量、灵活和可出访的 modal。

针对辅助技术和屏幕阅读器展开了优化

全然响应，随浏览器宽度缩放；

具有 SASS 选项的可定制 CSS

提供更多全屏和视口模式

为画廊打开和关闭 modal 提供更多键盘掌控

灵活的关闭选项和方法

浏览镜像：

https://github.com/humaan/Modaal

Less 是用来扩展对 CSS 语言全力支持的预处理器。它容许合作开发者使用一些让 CSS 更易维护和扩展的技术。

它能免费浏览和使用

它提供更多了高阶样式语法，可让 Web 结构设计人员 / 合作开发者创建高阶 CSS；

它能在浏览器开始渲染网页之前轻松地编译为标准 CSS

编译的 CSS 文件能上传到生产 Web 服务器

浏览镜像：

http://lesscss.org/

Meteor 是两个全栈 JavaScript 框架，它由一系列库和软件包组成。它在结构设计理念上对比了参考的框架和库的优点，以简化应用领域程序的原型制作流程。

它提升了应用领域程序的合作开发效率

它带有一些内置机能，包含一些后端库和基于 NODE.js 的服务器；

它能大大加快工程项目的合作开发速度

它提供更多 MongoDB 数据库和 Minimongo，它们全然用 JavaScript 编写；

实时重新加载机能容许合作开发时只刷新所需的 DOM 元素

浏览镜像：

https://www.meteor.com/install

jQuery 是一种广泛使用的 JavaScript 库。它使后端合作开发者能够专注于各种层面的机能上，它能简化诸如 HTML 文档遍历、操作和 Ajax 之类的事情。

QueryUI 有助于制作高度交互的 Web 应用领域程序

它是开源的，能免费使用；

它提供更多了强大的主轴机制

它非常稳定且易于维护

它提供更多了广泛的浏览器全力支持

能帮助合作开发者创建出色的文档

浏览镜像：

http://jquery.com/download/

GitHub 是一个受合作开发者组织工作方式启发的 Web 合作开发平台。这款辅助工具使合作开发者能查看标识符、管理工程项目和构筑软件。

轻松协调，保持一致并使用 GitHub 的工程项目管理辅助工具完成组织工作；

它为合作开发组织工作提供更多了正确的辅助工具

简单的文档和高质量的编码

让所有标识符集中在一处

合作开发者能直接从存储库托管其文档

浏览镜像：

https://github.com/

原文镜像：

https://www.guru99.com/front-end-web-development-tools.html

点个在看少个 bug👇