前端开发工具有哪些？17 款前端工程师必备工具推荐！

软件开发是一个高度专业化的职业分工，根据所使用的编程语言的不同，会细分出多种岗位：前端开发、后端开发、客户端开发、iOS 开发、Android 开发、数据库开发等等，具体到每一个岗位，工作中常用的工具软件也存在着差别。

就前端开发或前端工程师来说，前端技术的发展可以说是日新月异，新工具和框架层出不穷，以应对不断变化的市场需求。在这篇文章中，我们将介绍前端开发中常用的 8 大类工具软件，以及每个类别下面最具代表性的产品，总计 17 款工具软件，帮助各位在选择前端工具时减少纠结，提高工作效率和开发质量。

• 代码编辑工具：WebStorm、VS Code

• 代码版本控制工具：Git、SVN

• 代码包管理工具：npm、Yarn

• 笔记工具：boardmix、Evernote、Typora

• 前端构建工具：Webpack、Vite

• 调试工具：浏览器开发工具

• 响应式设计工具：Bootstrap、Material-UI

• 浏览器插件：easy auto refresh、FeHelper(前端助手)、Vue Devtools

前端开发常用的17款工具软件

01 代码编辑工具

选用哪个编辑器来写代码，与 IT 界由来已久的一个话题「XX 语言是最好的编程语言」有点像，每个人都有自己的想法。工具本身本身并不是最重要的，能否写出简洁、优雅的代码，主要是取决于自己的个人经验和逻辑能力，代码思路没梳理清楚，代码编辑器雕出花来也没用哇。

① WebStorm

WebStorm，最智能的 JavaScript IDE 工具，是一个用于 JavaScript 和相关技术的集成开发环境。与 JetBrains 推出的其他 IDE 一样，它使你的开发体验更加愉快，使日常工作自动化，并帮助你轻松处理复杂的任务。

② VS Code

VS Code，微软推出的开源代码编辑器，支持 Windows、macOS 和 Linux 系统。单凭免费 + 轻量 + 大厂背景（光环）这些点，想必就吸引了不少人。

VS Code 虽然不像 WebStorm 定位为 IDE 工具，但它可以内置的扩展功能、可以安装不同的插件，也让 VS Code 在保证灵活性的同时，也能变得足够强大——软件本身没有的功能，可以用插件来弥补。

除了这里介绍的两个工具，其他可选的代码编辑器有 Sublime Text、Atom、Vim、CodePen（在线代码编辑工具） 等，这里就不展开介绍了。

02 代码版本控制工具

① Git

Git 是目前最流行的分布式版本控制系统，它具有高效的分支管理和合并功能，可以支持大型项目的开发和维护。Git 使用简单，有强大的命令行工具和图形界面工具，例如 Git Bash 和 Sourcetree。程序员可以通过 Git 进行代码的提交、拉取、推送等操作，同时还可以方便地查看代码的历史记录和比较不同版本之间的差异。

② SVN

SVN 是一种集中式版本控制系统，与 Git 不同，它使用集中式的服务器来存储代码，并且需要通过网络连接才能进行代码的提交和更新。SVN 具有较为简单的操作和较好的稳定性，适合小型项目和对分支管理要求不高的团队使用。程序员可以通过 TortoiseSVN 等图形界面工具来进行 SVN 的操作，也可以通过命令行工具来进行更高级的操作。

03 代码包管理工具

当涉及前端开发时，npm（Node Package Manager）和 Yarn 都扮演着至关重要的角色，它们是包管理工具，用于管理 JavaScript 库和框架的依赖关系。

① npm

npm 是 JavaScript 世界中最常见的包管理工具之一，它是 Node.js 的官方包管理器，囊括了各种用于前端和后端开发的包。npm 提供了功能强大且灵活的命令行界面，用于执行各种操作，包括安装依赖项、更新包、运行脚本等。这使得前端开发者可以在命令行中快速而高效地完成各种任务。

② Yarn

Yarn 是 JavaScript 世界中的另一款重要的包管理工具，尤其受到前端开发者的欢迎。它在某些方面与 npm 相似，但也有自己的独特特点：

出色的性能：Yarn 被设计为更快的包管理工具。它支持并行下载和安装依赖项，从而提高了性能。这对于大型项目和具有多个依赖项的应用程序特别有帮助，能够显著加快构建和安装速度。

版本锁定：Yarn 使用 yarn.lock 文件来确保依赖关系的一致性。这意味着在不同开发环境中的版本冲突问题将被大大减少，确保您的项目在不同的计算机上以相同的方式运行。

易于使用：Yarn 的命令和操作更加直观，使新手可以更快地上手。它提供了更友好的命令行交互和更清晰的日志输出，帮助开发者更好地理解正在发生的事情。

自定义包源：Yarn 允许配置自定义包源，这对于需要使用特定镜像或私有存储库的项目非常有帮助。这为开发者提供了更大的灵活性，以适应不同的项目要求。

Yarn 提供了一种高性能、可靠且易于使用的包管理工具，适用于前端开发项目。它的版本锁定和离线模式等功能使其在复杂的项目环境中尤为有用。选择使用 npm 还是 Yarn 取决于您的项目需求和个人偏好，但无论您选择哪一个，都可以提高包管理的效率。

04 笔记工具

① boardmix

boardmix 是一款跨平台的笔记工具，有点接近微软推出的 OneNote，但功能比 OneNote 更强大。

boardmix 可以帮助程序员将各种信息和想法整理成文档、文档卡片、思维导图、便签等形式，支持文字、代码块、图片、表格、链接等多种内容的插入，还可以通过标签和容器来组织和分类笔记。此外，boardmix 还支持手写和音视频通话功能，方便程序员在会议或讨论中进行记录。

*跨平台笔记工具boardmix

跨平台笔记工具 boardmix 的特点：

1. 实时保存，跨平台自动同步

2. 融合了代码块、思维导图、流程图、文档、看板、表格、PPT 等功能，支持在笔记中添加多种形式的内容，满足多样化的记录或协作需求

3. AIGC 创作功能，可用 AI 快速生成生产级别的代码

4. 兼容多种第三方应用，如 Figma、Pixso、腾讯会议、腾讯文档、Notion、高德地图、亿图图示、金数据等，在一个无限画布上同时使用或浏览多个应用

5. 文档支持富文本编辑和简单的 Markdown 编辑两种模式

6. 支持导出多种文件，包含 Markdown、图片、PDF、CSV、JSON、TXT 等

② Evernote

Evernote 是一款功能强大的云端笔记应用，它可以帮助程序员随时随地记录和整理自己的想法、代码片段、技术文档等。Evernote 支持多种格式的笔记，包括文字、图片、音频和视频等，还可以通过标签和笔记本来组织和分类笔记。

③ Typora

Markdown 笔记软件是程序员常用的一种笔记工具，它使用简洁的标记语法来编写和格式化文本，可以帮助程序员记录和整理代码片段、技术文档、项目文档等信息。

市面上可选择的 Markdown 笔记软件非常多，其中最具代表性的是 Typora。Typora 是一款跨平台的 Markdown 编辑器，它提供了实时预览功能，可以让程序员在编写的同时实时查看渲染后的效果。Typora 支持多种导出格式，如 PDF、HTML 等，方便用户分享和发布笔记。

05 前端构建工具

① Webpack

说到前端构建工具，不得不提许多前端工程师都逃不过的 Webpack，我们先来看一下 Webpack 中文文档对 Webpack 的介绍：

Webpack，是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 Webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。

如果是第一接触 Webpack 的朋友，看完这段介绍应该还是一脸懵逼，不知道 Webpack 到底能用来干什么。

随着前端变得越来越复杂，我们在使用框架编写项目时，可能会有下面这些行为：

• 引入各种各样的模块来实现模块化开发

• 使用一些高级特性来加快开发效率或提升安全性，例如使用 Sass、Less 等方式来编写 CSS 样式代码

• 开发完成后需要对代码进行压缩、合并等，优化页面的打开速度

以其中的 Sass 样式文件为例，浏览器默认情况下只能渲染 CSS 文件，而不认识这里的 Sass 文件，要想将 Sass 文件转换为浏览器可读取的 CSS 文件，就需要用到 Webpack，实现 Sass 到 CSS 的自动转换。

除了 Sass 文件，Webpack 还可以将 ES6 语法的 JS 代码转换为 ES5，将 TypeScript 代码转换为 JavaScript，也可以对图片、字体等进行打包优化，减少文件占用的空间，可以这么说，有了 Webpack，原先我们要处理的一系列问题，都可以让它自动帮我们完成。

② Vite

Vite 是一个快速、现代的前端构建工具，专为 Vue.js 框架设计，但也支持其他现代 JavaScript 框架和库。

快速开发：Vite 是为了提高前端开发的速度而创建的。它利用 ES 模块的特性，将开发服务器保持在本地开发环境中，实现了快速的冷启动和热模块替换（HMR），这意味着您可以在几乎没有构建等待时间的情况下迅速查看更改。

Vue 3 支持：Vite 是 Vue 3 的官方开发工具，它紧密集成了 Vue 3 的特性和生态系统。这使得使用 Vite 来构建 Vue 3 应用程序变得非常高效。

支持其他框架和库：尽管最初是为 Vue.js 设计的，但 Vite 也支持 React、Preact、Svelte 等现代 JavaScript 框架和库。这意味着开发者可以在不同项目中使用 Vite，而不仅仅限于 Vue.js。

插件系统：Vite 具有灵活的插件系统，可以通过插件扩展其功能。这使得开发者可以根据项目需求轻松自定义构建过程。

构建优化：尽管 Vite 在开发环境下快速运行，但它也提供了用于生产构建的工具，以优化和压缩代码，减小文件大小。

开发者体验：Vite 注重开发者体验，提供清晰的错误消息和有用的调试工具，以帮助开发者更轻松地诊断和解决问题。

Vite 是一个面向现代前端开发的快速工具，它通过利用 ES 模块、本地开发服务器和 HMR 等特性，提供了出色的开发体验。它适用于 Vue.js 项目，同时也能够支持其他流行的 JavaScript 框架和库，使其成为前端开发者的强大工具。

06 调试工具

浏览器开发工具

对于前端 Web 开发，浏览器开发工具是非常有用的调试工具。浏览器开发工具可以帮助程序员查看网页的 HTML 结构、CSS 样式和 JavaScript 代码，同时还可以监控网络请求和调试 JavaScript 代码。常见的浏览器开发工具有 Chrome 开发者工具、Edge 开发者工具、Firefox 开发者工具等。

07 响应式设计工具

① Bootstrap

Bootstrap 是由 Twitter 开发的开源前端框架，它提供了一组 CSS 和 JavaScript 工具，用于创建现代、响应式的 Web 页面和 Web 应用程序。

② Material-UI

Material-UI 是一个基于 Google 的 Material Design 理念的 React 组件库。它旨在提供 Material Design 的外观和感觉，以及与 React 的深度集成。

08 浏览器插件

① easy auto refresh

easy auto refresh，一个自动刷新浏览器页面的插件，比较适合刚接触前端的新人。

在未使用前端框架或 Webpack 打包项目的情况下，每当我们想预览代码在浏览器中的运行效果，都需要手动刷新页面，操作起来比较繁琐。

对于这个问题，可以使用这里介绍的浏览器插件 ，提前设置一个刷新的频率，就能实现页面的自动刷新。

② FeHelper(前端助手)

FeHelper，一个可以格式化 json 数据的浏览器插件。

在浏览器中查看服务器返回的 json 数据时，由于它们被压缩过，去除了数据中原有的换行，会呈现为「乱成一团」的状态，不便于查看我们想要的数据。

而 FeHelper 插件，就可以让被压缩后的 json 数据还原为压缩前的状态，即对数据进行格式化，美化压缩后的数据文件，让我们可以更方便地查看服务器返回的数据。

③ Vue Devtools

Vue Devtools（Vue.js 开发者工具）是专门为 Vue.js 开发者设计的浏览器扩展，它提供了强大的调试和开发工具，有助于更好地理解、分析和调试 Vue.js 应用程序。