使用这些工具提升您的前端开发能力
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
我们都知道，前端开发给了我们很大的探索空间，可以运用图片、插图、占位符、JSON、主题、VS Code插件等等。因此，我整理了一份前端开发者必备的工具合集。我已经使用这些工具好几年了，它们几乎涵盖了我们开发过程中所需的一切。
1. Visual Studio Code（文本编辑器）
Visual Studio Code 是微软为 Windows、Linux 和 macOS 开发的免费源代码编辑器。其功能包括调试支持、语法高亮、智能代码补全、代码片段、代码重构和内置 Git。
网址：https://code.visualstudio.com/download
2. Emmet（代码工具）
Visual Studio Code 内置了对 Emmet 的支持，无需任何扩展。Emmet 2.0 支持大多数 Emmet 操作，包括展开 Emmet 缩写和代码片段。
3. Live Server（适用于 VS Code）
一个支持实时浏览器刷新的快速开发型在线服务器。
只需在状态栏单击一下即可启动或停止服务器。
可通过资源管理器菜单打开 HTML 文件。[快速 GIF 演示]。
支持排除文件以进行变更检测。
URL：https://marketplace.visualstudio.com/items?itemName =ritwickdey.LiveServer
4. Material Theme（适用于 VS Code）
Visual Studio Code 目前最酷炫的主题。它可以将你的文件夹图标替换为 Material Design 风格。
URL：https://marketplace.visualstudio.com/items?itemName =Equinusocio.vsc-material-theme
5. Prettier（代码工具）
Prettier 是一款具有鲜明风格且支持
JavaScript（包括 ES2017）的代码格式化工具。
- JSX
- 角
- 维尤
- 流动
- TypeScript
- CSS、Less 和 SCSS
- HTML
- JSON
- GraphQL
- Markdown，包括 GFM 和 MDX
- YAML
URL：https://github.com/prettier/prettier
6. 自动重命名标签（适用于 VS Code）
自动重命名配对的 HTML/XML 标签
URL：https://marketplace.visualstudio.com/items?itemName=formulahendry.auto -rename-tag
7. JSON Viewer（浏览器扩展）
你见过的最美观、最可定制的 JSON/JSONP 高亮工具。它是一款用于打印 JSON 和 JSONP 的 Chrome 扩展程序。
网址：https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh
8. Affinity Photo（照片编辑）
如果你可以开发自己的照片编辑软件，它大概就是这样的。无论是快速校正、精细修饰，还是沉浸于拥有数百个图层的复杂艺术创作，Affinity Photo 都能满足你的需求。
网址：https://affinity.serif.com/en-us/
9. GIMP（照片编辑）
GIMP 是一款跨平台图像编辑器，支持 GNU/Linux、macOS、Windows 等多种操作系统。它是自由软件，您可以修改其源代码并发布您的修改版本。
无论您是平面设计师、摄影师、插画师还是科学家，GIMP 都能为您提供强大的工具，助您轻松完成工作。
10. Pexels（图片库）
免费图库照片，可用于任何用途。✓ 免费商用 ✓ 无需注明出处。
11. Unsplash.com（图片来源）
Unsplash 是一个致力于分享采用 Unsplash 许可协议的图片素材的网站。该网站声称拥有超过 11 万名投稿摄影师，其不断增长的图库（超过 150 万张）每月产生超过 110 亿次的图片浏览量。
12. Placeholder.com（用于占位图片）
Placeholder.com 是一款面向网页设计师的免费图片占位符服务，每年处理数十亿张图片。您可以指定图片尺寸和格式（.GIF、.JPG、.PNG、.WEBP）、背景颜色和文本颜色，以及文本内容。
13. tinypng.com（压缩图片）
TinyPNG 使用智能有损压缩技术来减小 PNG 文件的大小。通过选择性地减少图像中的颜色数量，可以减少存储数据所需的字节数。这种效果几乎不可见，但却能显著减小文件大小！
14. Figma（网站设计）
Figma 是一款免费的在线 UI 工具，可用于创建、协作、原型设计和交付。
15. UI渐变和颜色（调色板网站）
为设计师和开发者精心挑选的精美渐变色合集。
16. DaVinci Resolve（浏览器视频）
DaVinci Resolve 16 是全球唯一一款集专业 8K 剪辑、调色、视觉特效和音频后期制作于一体的软件！只需单击一下，即可在剪辑、调色、特效和音频之间即时切换。
网址：https://www.blackmagicdesign.com/in/products/davinciresolve/
17. Font Awesome（用于图标）
Font Awesome CDN 是将 Font Awesome 添加到您的网站或应用程序的最简单方法，只需一行代码即可完成。无需下载或安装！
18. Undraw（免费插图）
打造更精美的网站、产品和应用程序。浏览查找符合您信息传达的图片，自动自定义颜色以匹配您的品牌，并将其用作普通图片、嵌入代码或直接在您的设计工作流程中使用。
感谢阅读！如有任何疑问，欢迎随时联系我：rajrock38@gmail.com，或在LinkedIn上与我联系，或在Medium和Twitter上关注我。
如果您觉得这篇文章对您有所帮助，请点赞👏并分享给其他人，让更多人看到它！也欢迎在下方留言。