前端开发工具有哪些？

一、前端开发工具有哪些？

前端开发工具包括代码编辑器、集成开发环境、调试工具、构建工具等等。常用的代码编辑器有Sublime Text、Visual Studio Code、Atom等，它们提供了丰富的插件和代码提示功能。

集成开发环境如WebStorm、Eclipse等能够快速搭建开发环境及调试工具。

调试工具如Chrome DevTools、Firebug等能够帮助开发者调试代码并查看页面元素。

构建工具如Webpack、Gulp等能够自动化构建和打包项目。这些工具能够提高开发效率，提供更好的开发体验。

二、有哪些好用的前端开发工具？

作为一个身在前端开发岗位的女生，入行四年，零零散散星星点点的尝试过无数的小工具。

虽然技术上我没有什么惊天动地的造诣，但差生文具多，开发工具这块我可是全方位的搜罗集合起来了。

代码写的不够溜没关系，咱们工具使的顺滑也是一种本事。

砍柴技巧不够灵活没关系，咱能有法子把刀磨好也是不会拖后腿的。

今天给大家分享一下我磨过的砍柴刀吧～

一.开发工具

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大模型进阶之旅】公开课的学习内容进行学习，万变不离其宗。

五.搜索工具

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 的快速查找窗口，特别是当你正在工作，需要搜索某个文件，但又不愿意退出当前工作界面时。

三、怎样安装web前端开发工具？

要安装Web前端开发工具，首先需要选择一个适合的编辑器，如Visual Studio Code或Sublime Text。

然后，下载并安装所选编辑器。

接下来，安装Node.js，这是一个运行JavaScript的平台，用于构建和管理前端项目。

安装完成后，使用npm（Node包管理器）安装常用的前端开发工具，如Webpack、Gulp或Grunt。

最后，根据需要安装其他辅助工具和插件，如浏览器开发者工具和代码格式化插件。完成这些步骤后，你就可以开始使用Web前端开发工具进行开发了。

四、Web前端一般用什么开发工具？

Web前端开发是目前非常有“钱”途的行业，不仅从业人员众多，相应的开发工具也不断涌现。有人想知道前端常用的工具有哪些？有人好奇杭州Web前端学习班会教哪些工具库的用法。

前端常用的工具有哪些？

1、jQuery

jQuery由于其无限的教程，没有跨平台/浏览器问题，优秀的用户界面，大量的插件以及它的轻量，快速和快速学习等特点而脱颖而出。超过70％的受访者选择jQuery作为他们的前端库，它是一个快速，轻量级和简洁的JavaScript库，主要用于HTML文档遍历、事件处理、动画和用于快速Web开发的Ajax交互。从本质上讲，jQuery最适合需要快速开发的应用程序。

2、Bootstrap

超过65％的开发者选择Bootstrap作为他们最喜欢的框架来使用，它是一个用HTML、CSS和JS开发的开源工具包。Bootstrap的广泛流行主要是因为它的简单使用、优秀的社区以及大量的文章和教程、第三方插件和扩展、主题构建器等。

3、Angular

如果你打算构建一个动态且强大的单页应用程序，Angular就是你需要的框架。Angular是高度模块化的，因此非常适合与团队分开大型工作，并且使测试和调试变得轻松。功能优先的方法使Angular更加专注于功能，使开发人员的工作更轻松。此外，它还有来自Google社区的出色工具和支持。

4、NPM

NPM是Node的包管理器。借助NPM，开发人员可以安装各种模块进行Web开发，共享和借用软件包，并管理私有开发。它由网站、命令行界面（CLI）和注册表三个不同的组件组成。

5、Webpack

Webpack是现代JavaScript应用程序的模块打包程序，它将前端开发所需的所有资源（如JavaScript、字体和图像）集中到一个地方。如果你正在开发复杂的前端，这特别有用。你可以去通过部署具有的WebPack Web应用程序，以获取有关的WebPack起来和运行。

除了以上工具，还有Sass、React等，根据企业所用工具的不同，你需要掌握的工具也不一样。但熟练应用这些工具的前提是你具备扎实的理论基础，至于杭州Web前端学习班会教哪些工具的使用，我们需要关注其课程设置，还需要注重学习机构的教学模式，毕竟掌握工具的用法比只掌握工具更重要。

五、现在比较好用的前端开发工具有哪些？

1. cropper.js

Cropper.js 2.0 是一系列用于图像裁剪的 Web 组件。

官网地址：https://fengyuanchen.github.io/cropperjs/v2/zh/

2. Vditor

Vditor是一款浏览器端的 Markdown 编辑器，支持所见即所得、即时渲染（类似 Typora）和分屏预览模式。它使用 TypeScript 实现，支持原生 JavaScript、Vue、React、Angular，提供桌面版。

官网地址：https://b3log.org/vditor/
Github地址:https://github.com/Vanessa219/vditor

3. PPTist

PPTist是一个基于 Vue3.x + TypeScript 的在线演示文稿（幻灯片）应用，还原了大部分 Office PowerPoint 常用功能，支持 文字、图片、形状、线条、图表、表格、视频、音频、公式 几种最常用的元素类型，每一种元素都拥有高度可编辑能力，同时支持丰富的快捷键和右键菜单，支持导出本地 PPTX 文件，支持移动端基础编辑和预览，支持 PWA。您可以在此基础上搭建自己的在线幻灯片应用。

在线体验地址：https://pipipi-pikachu.github.io/PPTist/
github地址：https://github.com/pipipi-pikachu/PPTist

4. Element Tiptap Editor

Element Tiptap Editor 是一个在 web 开发领域“所见即所得”的富文本编辑器，基于 tiptap 编辑器和 element-ui 开发，相比很多富文本编辑器，Element Tiptap Editor 使用易上手，对开发者友好，而且可扩展性强，设计简洁。

操作按钮等组件使用 element-ui 组件，整体样式协调美观 有许多开箱即用的 extension（编辑器扩展） 支持 markdown 语法 支持TypeScript 支持 支持 i18n(en, zh, pl, ru, de, ko, es, zh_tw, fr, pt_br, nl, he) 可用的 events: init, transaction, focus, blur, paste, drop, update 高度自定义, 你可以自定义 extension 和它对应的菜单按钮视图 操作灵活，可以通过直接控制编辑器的行为来定制编辑器。 提供中文文档

地址 https://github.com/Leecason/element-tiptap

5. TypeIt

TypeIt是一个通用的JavaScript打字机效果实现程序。凭借其简单而灵活的配置，您可以键入单个或多个字符串，这些字符串可以中断行，删除/替换彼此，轻松处理包含HTML的字符串，循环等等。而且为了获得更高级、更可控的打字效果，TypeIt附带了一些配套功能，这些功能可以链接起来将您的打字控制在单个字符或毫秒，使您能够键入动态叙述，完全控制速度变化、换行、删除和暂停。

github链接：https://github.com/alexmacarthur/typeit
官网地址：https://www.typeitjs.com/

6. qrcode 二维码

qrcode 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。

文档地址：https://www.npmjs.com/package/qrcode

7. jsbarcode

jsbarcode是一个用于生成条形码的js库

文档地址：https://www.npmjs.com/package/jsbarcode

8. Clipboard.js

Clipboard.js是一个用于将文本复制到剪贴板的 JS 库。

官网地址：https://clipboardjs.com/

9. Driver.js

Driver.js是一个可以轻松实现新手指引交互的JavaScript 工具库，主要的作用是为刚接触应用的新手用户快速了解产品，帮助用户把注意力聚焦到某项功能，从而快速熟悉我们的开发的产品。

官网地址：https://kamranahmed.info/driver.js/

10. Pinia.js

Pinia.js由Vue.js团队成员所开发的，是新一代的Vuex，即Vuex5.x，在Vue3.0 项目的使用中备受推崇。

Pinia.js 定位和特点：

• 完整的 typescript 的支持；
• 极其轻量，压缩后的体积只有1.6kb;
• 去除 mutations，只有 state，getters，actions（这是我最喜欢的一个特点）；
• actions 支持同步和异步；
• 没有模块嵌套，只有 store 的概念，能够构建多个 store，store 之间可以自由使用，更好的代码分割；
• 关联 Vue Devtools 钩子，提供更好地开发体验；

官网地址：https://pinia.vuejs.org/

11. Vue-CoreVideoPlayer

Vue-CoreVideoPlayer是一款基于 vue.js 的轻量级的视频播放器插件插件。

文档地址：https://core-player.github.io/vue-core-video-player/zh/

六、vue前端工程师优势？

优势首先便是更具有竞争力，在同等面试条件下，拥有vue框架技术的比不具有vue框架技术的竞争力更强。

其次是阔宽了自己的知识面，Vue 的生态非常繁荣，有特别多配套的周边工具 vuex、vuex-router、element、elenent-admin 等等，掌握了vue框架的同时你也就掌握了其他的配套工具的使用。

然后是培养自己的自学意愿和能力，因为vue框架不是谁教就会，必须得自己去实践和学习。

七、前端开发工程师待遇？

比较好。

前端开发工程师是一种非常热门的职业，随着互联网的快速发展，前端开发工程师的需求量也越来越大。根据不同公司、地区、经验和技能水平的不同，前端开发工程师的待遇也会有所不同。以下是一些一般性的参考：

1. 薪资水平：前端开发工程师的薪资水平一般比较高，初级前端开发工程师的月薪一般在8000元-15000元之间，有一定经验的中级前端开发工程师的月薪一般在15000元-25000元之间，高级前端开发工程师的月薪一般在25000元-40000元之间。当然，这只是一般的参考，具体薪资水平还要根据实际情况而定。

2. 福利待遇：前端开发工程师的福利待遇一般也比较好，包括五险一金、带薪年假、节假日福利、绩效奖金、培训等。有些公司还会提供额外的福利，如员工旅游、生日福利、股票期权等。

3. 发展空间：前端开发工程师的发展空间也比较广阔，可以向UI设计、前端架构师、全栈开发等方向发展。在不同的公司中，前端开发工程师的职责也会有所不同，一个前端开发工程师可以承担不同的职责，如页面开发、交互设计、前端框架开发等。

需要注意的是，随着前端开发技术的不断更新和变化，前端开发工程师需要不断学习和更新知识，以保持自己的竞争力和市场价值。

八、前端工程师如何成为后端工程师？

理解好接口文档：

接口文档后台定义的，和后台伙伴沟通好。

阶段性进行整合：

一段时间就一起把一部分功能尝试合在一起，定期沟通接口的改变，保证不会出问题。

也可以试着践行前后端分离：

降低前后端耦合，让开发更顺畅

感情沟通：

平常没事 一起吃个饭，前后端开发工作 在于磨合，一对搭档磨合一个月 以后做点什么事 都特别顺的，这也是未来的财富富。

九、前端工程师如何接私活？

接私活不是你想接就能接的,对方并不清楚你的实力,万一把小项目拿给你你又完成不了,那对方是会损失的,所以要想接项目首先要有一定的名气和实力(最好是有证书),还是要有自己开发的软件,别人看了才知道你是什么水平,如果是高级软件工程师以上就比较容易接私活了,另外还有条比较好的路,每年的5至6月份去有计算机专业大学帮那些毕业生做毕业项目,难度通常不是很大,收费很灵活,而且来找的人会特别多,我今年去做了一个星期,收入大概一万.但是因为接得太多每天只休息了几个小时,实在太累人.建议可以没事的时候去做做.

十、前端工程师能移民吗？

能。前端工程师是互联网时代软件产品研发中不可缺少的一种专业研发角色。前端工程师使用 HTML、CSS、JavaScript 等专业技能和工具将产品UI设计稿实现成网站产品，涵盖用户PC端、移动端网页，处理视觉和交互问题。所有用户终端产品与视觉和交互有关的部分，都是前端工程师的专业领域。

所以说可以移民。