前端开发常用哪些工具软件？
每一位程序员，都希望能在编程世界中实现自己的梦想。程序员是一个要不断向上攀爬的职业，需要学习新的知识，掌握新的工具，才能跟上时代的步伐。
工欲善其事，必先利其器。
今天就给大家分享一些口碑良好的工具，包括开发工具、在线工具、辅助工具、插件工具、搜索工具等。使用它们，可以大幅提高生产力哦。
一.开发工具
工作四年，已经有了稳定且顺手的开发工具。一般情况下不会随意更换。
每天来到工位打开电脑，登录好企业微信后就会依次打开VScode,Google浏览器，Snipaste。之后便是跑起来代码然后打开网页调试。
操作流程开始聚焦在了浏览器上，CSDN，百度，掘金之类的页面也会随之打开。
不知道会不会用上，但就是这么一个仪式感。就算今天做不出什么惊天地泣鬼神的花哨页面，也要雨露均沾。
其实VScode并不是我从一开始就用的编程工具。
要说编程工具类，那就要从上学那会刚接触代码说起了。
网页设计课老师带我们装的第一个编程工具是Adobe Dreamweaver。
学习时候学会点啥都会惊叹一下。第一次为Adobe Dreamweaver惊叹是因为用工具里的表格拖出来，设置好行高和数量之后，HTML代码就出来了。当时觉得这工具好牛啊 。
但由于学校机房电脑还挺老的，用Dreamweaver总是会有很多同学卡死，非常浪费时间，等到第二个学期，我们就统一换成了Hbuilder。我要承认我当时真是没见过世面，这个主题好清爽，还可以在代码编辑框内直接选择要运行的浏览器，秒呀，又快又方便。直到毕业前老师带我们进行综合实训，又给我们安利了WebStorm,还手把手教我们绿色激活。学生时候真的好喜欢这种歪门邪道，觉得自己老厉害了。
但是到了工作时候，才真正学会衡量开发工具的开发速度，电脑承载能力，实用和正版盗版的一些问题。最终被同事安利了Visual Studio Code。从此开始独宠VSCODE。
vscode是一个运行于MacOS X、Windows和Linux之上的，针对于编写现代Web和云应用的跨平台源代码编辑器；vscode免费而且功能强大，对JavaScript和NodeJS的支持非常好，自带很多功能，例如代码格式化，代码智能提示补全、Emmet插件等，并且拥有丰富的插件生态系统，可以通过安装插件来支C++,C#,PYTHON,PHP等其他语言。
除去这几个非常强大且常用的开发工具外，还有HbuilderX和微信开发者工具，这两个是用来开发移动端小程序和App的，通常会搭配使用。
汇总一下：
l Adobe Dreamweaver（传统老牌）
l Hbuilder（新手学习推荐）
l WebStorm（电脑强大推荐）
l Visual Studio Code（免费超好用）
l HbuilderX（移动端开发超好用）
l 微信开发者工具（小程序开发好用）
二.在线工具
有点小激动，去翻了翻我的收藏夹，太多了，实在是太多了。
我就翻到哪里写到哪里吧~
1，图片压缩工具:squoosh
squoosh对比 tinypng 有着更好的压缩效果，压缩出来的照片也是非常清晰。
2，API工具:overapi
对于开发者来说，overAPI绝对是最漂亮和实用的网站。它聚合了大多数开发语言和工具的API，并以一页备忘录的形式展现
3，弹性盒子布局:flexboxfroggy
弹性盒子布局可视化检验，这个网站非常好用布局起来非常的快，属性非常多，一共有24道题针对不同的属性都有小测验，很适合初学者练手
4，响应式开发:responsively
这是一个基于开源项目的网站，它能够将各个设备屏幕展现在同一个页面上，能够让你非常方便的开发响应式网站，可以大幅提高前端开发的效率。
5，正则表达式:ihateregex
如果你讨厌正则，那么一定不要错过这个网站这个网站是基于HTML/JS 开发的在线工具，用来创建、测试和学习正则表达式。
6，SVG插图:undraw
如果你的网站需要免费的SVG插图，Undraw这个网站一定适合你，海量的图片还可以自定义插图的配色，真的很实用。
7，在线沙盒环境:codesandbox
在线沙盒环境，里面可选项目非常多，支持reactis vue以及vue3等，快速帮你生成在线直接预览的项目
8，变量命名:CODELF
变量命名神器，需要什么变量名，可以直接搜索，并且还可以在自己用的编辑器里安装插件支持 VS Code、Atom、Sublime Text 和 Chrome
组合推荐几个关于CSS学习和研究的在线工具：
l CSS Battle （在线比拼 CSS，一个挺有趣的竞争性游戏，一共有12个级别，需要你用HTML和CSS 100%还原它给出的页面，然后再尽量减少代码，你也可以查看全球的排行榜，看解决方案。）
l Learn CSS layout （在线CSS布局学习，它会一步一步引导初学者学习 CSS 基础知识，在实践中帮助初学者掌握好CSS的布局知识，改善初学者对CSS的编写习惯和正确方法。）
l EnjoyCSS （在线版的CSS3代码生成工具，基于可视化操作，能快速无编码的环境下调整网页效果和图形样式。就像是在本地使用PS或AI软件一样。）
l CSS-Tricks （同样也是一个在线比拼 CSS的游戏性学习网站）
l Neumorphism （可以轻松实现新拟态效果，不仅可以修改颜色或填写色值，也可以修改尺寸半径、距离、强度、模糊效果以及形状等参数，同时提供了CSS代码可以直接Copy。）
三.辅助工具
能帮助到前端开发工作的工作我都称之为辅助工具，我来说说几个我所需要的。
l 接口测试工具：POSTMAN.
l 处理设计图工具：PXcook,PS.
l 页面截图工具：Snipaste.
截图工具真的是给大家强烈推荐，截图方便，且截出来的图片自动悬浮在桌面其他页面之上，按下F1，鼠标控制截图范围，且鼠标移动到的地方可以去色，Shift切换RGB/HEX，C复制色值。还可以给截图做标注，这几个功能简直不要太方便！！！
l 原型设计工具：蓝湖，figma.
l 代码管理工具：GITEE,CODING.(其他的太不稳定啦，网页都打不开)
既然罗列到了辅助，那就不得不提到万能的助手CHATGPT。
有啥不懂都来问问。
最近在研究使用AI中需要学习的Prompt和LangChain。
虽然是互联网行业的人，但是chatGPT横空出世之后还没有真正去研究过，直到chatGPT3.5那会儿，各行各业都充斥着被AI替代的恐惧中，我心里也不由得紧张了一下，生怕被落下。4.0之后更是人人都想露两手。
之后我也尝试了自己编译器上自带的AI插件，对我的代码进行一些简化修改和注释，这个推荐前端们用起来。不过用过之后还是要自己检查一遍的哦，机器是没有心的哦，还是需要人的细心作为搭配。
说到辅助写代码，咱就不得不提到时下流行的大语言模型。尝试过chatGPT的小伙伴可能都经历过这样的问题，别人想要的答案都能精准的呈现出来，而我们自己得到的结果却很容易偏离主旨。
其实，使用AI是需要技巧的，不是我们问一句普普通通的大白话，它就能反馈给我们精准又完整的答复。
GPT生成的回答质量是参差不齐的，原因就在于你问他的方式技巧。
最初感兴趣的是风靡全球的AI绘画，自己也找了几个被推荐的多的网站试了试，emmmm,咱就是说，都是用一个工具生成的图，可是出图审美和质量真的是天壤之别，别人的是飞龙在天，我的是小鸡啄米。
仔细学习后才知道，提问的方式技巧都在Prompt上。专业的人会用各种提示语，精准的做出自己想要的效果，而我。。。都是没用的废话。
走到这一步我大概知道点什么了。想要AI懂我们的心思，就要有技巧的使用Prompt，虽然利用的是人们日常使用的自然语言，而非需要专门学习的程序语言，但其实想让生成式AI得到更精准、更理想的结果并非易事。这需要深度理解AI的运作逻辑，掌握和聊天机器人“对话”的能力。因此，普通人使用AI时总是掌握不了提问的精髓。
针对提问的的技巧，「知乎知学堂」联合「AGI课堂」推出的【程序员的AI大模型进阶之旅】公开课，一共2天的课程，特邀圈内技术大佬全面解读前沿技术，帮大家提升认知和技术能力，带你了解大模型的发展历程与训练方法，手把手教会你Prompt Engineering的必备技能。添加老师的企业微信，可以免费获取AI 大模型资料包哦~
2023超的AI大模型公开课大模型资料包免费领！
￥0.00立即体验
虽然大家都讲大白话，但是AI毕竟不是情感人类，想要与AI高效沟通就要学会提示词的技巧，也要学会引导它。加入【程序员的AI大模型进阶之旅】公开课，学习如何调教AI!
四.插件工具
因为主要用vscode，所以想来推荐几款vscode内部直接安装的好用插件。
l 汉化插件（不用看着各种英文详情发呆啦～）
l 浏览器查看文件（用右键在浏览器浏览网页）
l 标签修改同步/自动闭合/完成提示（解决你的粗心问题哦～）
l 代码格式工具（自动化格式代码，让代码整整齐齐～）
l 代码提示工具（让人工智能辅助你完成代码吧～）
l css定位工具（再也不用逐个的找类名去对了！）
l 代码语法检测（有一种规范叫痛并快乐着。。。）
l 代码运行工具（右键一下，代码跑起来！）
五.搜索工具
这里就一个独苗，叫Everything 文件搜索工具。
这款工具主打让文件搜索，变得简单、高效。
Everything是我目前用过的速度最快的全盘文件搜索工具，体积小巧，界面简单，占用系统资源极低，绿色安全无广告;除了这些基础功能，它可以实时跟踪文件变化、瞬间定位文件;在输入搜索词时那一刻，即显示出匹配结果，速度极快。
好啦，我常用的前端工具就是这些啦，以后尝试了新的实用工具会第一时间给大家分享的！