作为一个身在前端开发岗位的女生，入行四年，零零散散星星点点的尝试过无数的小工具。
虽然技术上我没有什么惊天动地的造诣，但差生文具多，开发工具这块我可是全方位的搜罗集合起来了。
代码写的不够溜没关系，咱们工具使的顺滑也是一种本事。
砍柴技巧不够灵活没关系，咱能有法子把刀磨好也是不会拖后腿的。
今天给大家分享一下我磨过的砍柴刀吧～
一.开发工具
l Adobe Dreamweaver（传统老牌）
简称DW，是Adobe公司的一款非常优秀的网页开发工具，并且深受广大用户(特别是初学者)的喜爱。
对于初学者来说，Dreamweower是最理想的开发工具，是广大前端入门者的首选。但是要强调一下，如果选择了Dreamweawer作为开发工具，我们一定不要使用Drearreawer那种传统的、使用操作界面的方式来开发网页。这种开发方式已经被摒弃很久了。
l Hbuilder（新手学习推荐）
HBuilder是由DClbud(数字天堂)公司推出的一款支持HTML.5的Web开发编辑器，在前端开发、移动开发方面提供了丰富的功能和贴心的用户体验，还为基于HTML5的移动端App开发提供了良好的支持。
l HbuilderX（Hbuilder一家，移动端开发超好用）
l Visual Studio Code（免费超好用）
简称VS Code，是目前最流行的Windows平台应用程序的集成开发环境(IDE)。是一个具有很多用途的开发工具，它可以用来开发功能很强大的网站。
不仅可以开发静态网页，还非常有利于开发动态网页。在开发动态网页方面，可以说Visual Studio比Dreamweaver更胜一筹。静态网页一般是没有交互性的，用户能做的也仅仅是浏览网页。而在动态网页中，作为用户，我们可以参与评论交流、上传文件，以及使用与服务器交互。
l Sublime Text（适合新手，相当于一款简化版的VScode）
凭借其漂亮的用户界面和极其强大的功能，被誉为“神级”代码开发工具。
支持多种编程语言的语法高亮，拥有优秀的代码自动完成功能。此处，它还拥有代码片段Snippet的功能，可以将常用的代码片段保存起来，在需要时随时调用。Sublime Text 支持 VIM模式，可以使用VIM模式下的多数命令。
l WebStorm（电脑强大推荐）
是jetbrains公司旗下一款Javacript 开发工具。已经被广大中国IS开发者誉为“Web前端开发神器””最强大的HTML5编辑器”、“智的JawaScriptIDE”等。WebStorm对hml特别是HTML5和JS的智能提示简直堪称大神，很值得去使用。不过WebStom不像Dreamweaver一样支持拖拽或者插入代码的方式来做HTMML，如果你是初级入门者，需要拉表格完成布局的话，WebSlorm完全不合适你的使用。WebStorm只适合手写代码的前端开发者使用。
l 微信开发者工具（小程序开发好用）
二.辅助工具
能帮助到前端开发工作的工作我都称之为辅助工具，我来说说几个我所需要的。
l 接口测试工具：POSTMAN.
l 处理设计图工具：PXcook,PS.
l 页面截图工具：Snipaste.
截图工具真的是给大家强烈推荐，截图方便，且截出来的图片自动悬浮在桌面其他页面之上，按下F1，鼠标控制截图范围，且鼠标移动到的地方可以去色，Shift切换RGB/HEX，C复制色值。还可以给截图做标注，这几个功能简直不要太方便！！！
l 原型设计工具：蓝湖，figma.
l 代码管理工具：GITEE,CODING.(其他的太不稳定啦，网页都打不开)
既然罗列到了辅助，就顺便聊聊一下最近正琢磨的chatGPT辅助写代码吧。
最近在尝试编译器中自带的插件chatMoss。
本人抠搜，没在这上面氪金，只是使用了GPT3.5-4K版本。
编译器内的插件支持的功能也不是很多，主要图插件的嵌入的便捷性。
选中自己想要处理的代码，右键就可以选择这几个功能进行处理。
不过想要更多的辅助性能，就需要去系统的了解一下AI模型的概念和使用方式。
我也浅浅的去搜索了一下，最近在研究使用AI中需要学习的Prompt和LangChain。
使用AI是需要技巧的，不是我们问一句普普通通的大白话，它就能反馈给我们精准又完整的答复。
GPT生成的回答质量是参差不齐的，原因就在于你问他的方式技巧。
这个提问的方式技巧都体现在Prompt上。专业的人会用各种提示语，精准的做出自己想要的效果，而我。。。都是没用的废话。
走到这一步我大概知道点什么了。想要AI懂我们的心思，就要有技巧的使用Prompt，虽然利用的是人们日常使用的自然语言，而非需要专门学习的程序语言，但其实想让生成式AI得到更精准、更理想的结果并非易事。这需要深度理解AI的运作逻辑，掌握和聊天机器人“对话”的能力。因此，普通人使用AI时总是掌握不了提问的精髓。
我在搜寻针对提问技巧的教程时，看了看知乎知学堂联合AGI课堂推出的【程序员的AI大模型进阶之旅】公开课，连着看了两天，第一天课程里老师给讲了讲关于这个大模型的发展和训练方法，训练方法是尤为重要的一环。第二天的课程就讲了一些训练自己模型的手段和工具的干货，收获很多，有种醍醐灌顶的感觉，推荐大家也看一下。建议添加老师的企业微信，还可以免费领一份AI 大模型资料包呢。
虽然大家都讲大白话，但是AI毕竟不是情感人类，想要与AI高效沟通就要学会提示词的技巧，也要学会引导它。
三.在线工具
给大家现翻收藏夹，翻到哪写到哪！
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。）
四.插件工具
因为主要用vscode，所以想来推荐几款vscode内部直接安装的好用插件。
l 汉化插件（不用看着各种英文详情发呆啦～）
l 浏览器查看文件（用右键在浏览器浏览网页）
l 标签修改同步/自动闭合/完成提示（解决你的粗心问题哦～）
l 代码格式工具（自动化格式代码，让代码整整齐齐～）
l 代码提示工具（让人工智能辅助你完成代码吧～）
l css定位工具（再也不用逐个的找类名去对了！）
l 代码语法检测（有一种规范叫痛并快乐着。。。）
l 代码运行工具（右键一下，代码跑起来！）
l chatGPT（编译器内AI插件）
和chatMOSS并列在左侧工具栏中，只是没有像moss那样可以直接选中代码进行处理，但同样支持全局使用。这款插件目前在编译器内使用是不需要配置的，各种免费，概念性的问题我比较喜欢从这款插件上进行提问。
对于插件中语言模型的训练和条件，同样可以根据我上面提到的【程序员的AI大模型进阶之旅】公开课的学习内容进行学习，万变不离其宗。
<a data-draft-node="block" data-draft-type="edu-card" data-edu-card-id="1696201735511744512">五.搜索工具
l Everything 文件搜索工具
这款工具主打让文件搜索，变得简单、高效。
Everything是我目前用过的速度最快的全盘文件搜索工具，体积小巧，界面简单，占用系统资源极低，绿色安全无广告;除了这些基础功能，它可以实时跟踪文件变化、瞬间定位文件;在输入搜索词时那一刻，即显示出匹配结果，速度极快。
l 闪电搜索
闪电搜索不仅有Everthing文件管理工具的功能，Everthing 没有的功能它也有，速度也杠杠的。
也是一款可以完全替代windows搜索的桌面快速搜索工具，是目前搜索和管理个人电脑文件最快的软件产品之一。小巧易用，右键定向查找提高效率，支持通配符模糊查找，即搜即有，尽享秒级的搜索体验。
和 Everthing 不同的是，闪电搜索可以对文件进行预览，查看文件详细信息，更加准确判断搜索的文件是否为我们所需。
l Wise JetSearch
Wise JetSearch 同样是完全免费的，并支持免费更新和技术支持。
它完美兼容几乎所有 Windows 系统，从 Windows XP 到 Windows 11，它都能够流畅运行。
与everthing类似，它可以更快地在几秒钟内搜索所有本地驱动器上的文件或文件夹。输入关键字，选择驱动器，然后开始搜索，搜索后，Wise JetSearch 会快速找并显示搜索想要查找的文件，这就是它简单、高效、易用的优势。
Wise JetSearch还有一个非常实用、贴心的功能，设置开机启动后，只需要将鼠标移动到桌面右上方就可以激活 Wise JetSearch 的快速查找窗口，特别是当你正在工作，需要搜索某个文件，但又不愿意退出当前工作界面时。 |
