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

鹰俊

Hello 各位好，我是小豪 @彭宏豪 。
结合自己之前学习小程序开发和 Vue3 框架的经历，整理了前端开发中常用的 10 个工具软件，希望能帮到有需要的朋友！
如果这篇文章对你有帮助，别忘了点赞或是关注我哦~
01 代码编辑器

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

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


VS Code

VS Code，微软推出的开源代码编辑器，支持 Windows、macOS 和 Linux 系统。单凭免费 + 轻量 + 大厂背景（光环）这些点，想必就吸引了不少人。
VS Code 虽然不像 WebStorm 定位为 IDE 工具，但它可以内置的扩展功能、可以安装不同的插件，也让 VS Code 在保证灵活性的同时，也能变得足够强大——软件本身没有的功能，可以用插件来弥补。


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

Vue

Vue，一个渐进式的 JS 框架，易学易用，性能出色，适用场景丰富的 Web 前端框架。
这也是我正在学习的前端框架（还没学到写项目的阶段），学到现在脑子记得最多的东西是：组件化开发、响应式、页面数据相分离，对于没学过框架的人来说，要学和要记的东西还是挺多的，不连续学习、不写项目的话，前面学过的东西就逐渐忘记了。。。
关于 Vue3 的学习，可以查看我之前发布的一篇文章：  


React

React，由 Facebook 团队开源的前端框架，据说是进大厂必学的前端框架，自己没接触过，没啥好说的。
03 设计工具

在线设计工具 Pixso

Pixso，一款一站式的在线设计工具，可用于完成 UI、原型、交互、标注、切图和交付等工作，这里与前端开发关系比较密切的环节有标注和切图。


以前在专门的标注切图工具出来之前，UI 设计师做好的图片，在进入开发之前，会经历手动标注和切图的流程，尤其是标注，UI 设计师或者前端工程师在设计稿中标注页面元素的大小、位置等样式，费时又费力。
而现在有了专业的标注切图工具 Pixso，就可以告别原先繁琐的操作流程啦！
在 Pixso 选择设计文件中的任意元素，元素下方会显示当前元素的大小。


将 Pixso 右侧的面板切换到「标注」选项卡，或是按住 Alt 键（苹果用户按住 Option 键），就会显示当前元素距离画板 4 个方向的相对位置。通过 Pixso 的这两个功能，就可以很方便地查看页面元素的标注信息。


而如果有切图的需求，可以点击顶部工具栏的加号 + ，在弹出的面板，选择「切片」工具。
在想导出切图的区域上方绘制切片，绘制后可以随意调整切片的大小和位置。


调整好切片大小和位置后，点击选中左侧面板的「切片」图层，再点击右侧「导出」选项的加号 + ，配置导出参数，默认会导出 PNG 格式的 1 倍图，点击下方的「导出已选项」，就能将切图导出并下载到本地。  


一站式在线设计工具 Pixso 承诺对个人用户永久免费，内置的所有功能都可以免费使用，而且可以享受到 Pixso 会员的诸多权益：无限文件数量、无协作者人数限制、无限云存储空间等等，有需要的朋友可以前往 Pixso 官网获取。
ui gradients

ui gradients，一个提供多种渐变配色方案的在线工具，在编写 CSS 时如果需要用到渐变就很有帮助。
选择一种自己喜欢的渐变方案，点击右上角的 < > 图标，就能直接拿到渐变色对应的 CSS 代码，复制后粘贴到代码编辑器，就能直接看到效果。


04 CSS 动画

Animate.css

Animate.css ，一个跨平台的 CSS 动画库，提供了多种现成的 CSS 动画，可用在强调、主页、滑动、注意力引导的场景。
这个动画库使用起来也非常简单，包含 3 步：

• 使用 npm 安装库
  
• 导入动画库
  
• 使用动画库定义好的类名 class
  

05 前端构建工具

说到前端构建工具，不得不提许多前端工程师都逃不过的 Webpack，虽然我没有系统学习过 Webpack，但因为 Vue 脚手架还是基于 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，原先我们要处理的一系列问题，都可以让它自动帮我们完成。  


06 浏览器插件

easy auto refresh

easy auto refresh，一个自动刷新浏览器页面的插件，比较适合刚接触前端的新人。
在未使用前端框架或 Webpack 打包项目的情况下，每当我们想预览代码在浏览器中的运行效果，都需要手动刷新页面，操作起来比较繁琐。
对于这个问题，可以使用这里介绍的浏览器插件 ，提前设置一个刷新的频率，就能实现页面的自动刷新。


FeHelper(前端助手)

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


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



以上，就是在前端开发中常用的 10 款高效工具，希望对你有帮助。
码字不易，如果对你有帮助的话，请别忘了赏个【三连】或是【关注】我哦，关注不迷路！
我是工具达人 @彭宏豪，那我们下次再见咯。

电竞少女心

讲的不错[赞][赞][赞]

那那

不错的话可以送个赞同吗[爱]