❶ Web前端工程师工作中都会用到哪些前端工具
今天小编要跟大家分享的文章是关于web前端工程师工作中都会用到哪些前端工具？网站制作开发过程中，善用辅助开发工具，会让我们的开发进程事半功倍。今天小编就为大家介绍一些在web前端工作中应该会遇到的一些前端工具，让我们一起来看一看吧！
1、WebStorm
这款JavaScript开发工具，相信作为JS开发者的你一定知道，它可是被称作“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScriptIDE”，功能主要包括：JavaScript,编辑语言,创造便捷的环境等，相信你一定烂熟于心了，在这里就不一一赘述了。
2、Dreamweaver
对于前端开发的人员我是不推荐使用的，但对UI设计还是用的比较多。
梦想编织者——AdobeDreamweaver，简称“DW”、这是一款集网页制作和管理网站于一身的所见即所得网页编辑器，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。
3、Editplus
editPlus软件是我这几年来用过的最好用的一款文档编辑软件，没有之一。强大的正则表达式让它在同类型的软件中脱颖而出。它的各项功能真的是特别强大，这次就简单的说下它的编程功能吧。
这款软件是国外软件，不过有中文版的绿色安装软件，分为电脑32位和64位。这款软件其实是搭配编程最合适，各种编码替换、检查十分醒目。在新建文本里面可以选择普通TXT格式和HTML网页编辑格式。假如你选择了HTML格式，打开就是编程页面了。
我们编完程序还可以直接在浏览器中显示页面。编程成果一目了然。
4、SublimeText3
SublimeText作为一个尽为人知的代码编辑器，其优点不用赘述。同时支持Windows、Linux、MacOSX等操作系统。具界面整洁美观、文本功能强大，且运行速度极快，非常适合编写代码，写文章做笔记。它还支持众多插件扩展，实现强强联手，比如说：
§_ackageControl：它是用来管理插件的插件
§_mmet插件：前端开发不可缺少，让编写HTML和CSS代码变得简单，节省大量时间。Emmet可使开发者用缩写形式书写代码，再用“扩展”功能自动将代码扩展至完整样式
§_sFormat：这是一款将JS格式化的插件
§_ideBarEnhancements：右键菜单增强插件
§_railingSpaces：高亮显示多余的空格和Tab
§_ag：这是HTML/XML标签缩进、补全、排版和校验工具
§_erminal：允许在SublimeText3中打开cmd命令窗口
§_ublimeCodeIntel：代码提示插件，支持多种编程语言，可以提示用户自定义代码
§_ssComb：为CSS属性进行排序和格式化
§_utoprefixer：CSS3私有前缀自动补全插件，该插件使用CanIUse资料库，能精准判断哪些属性需要什么前缀
§_olorPicker：编辑CSS样式的时候，ColorPicker调色盘不仅可以查看颜色值，更可以轻松调好颜色，还有个双向选择颜色的功能
§_lignment：让开发者自动对齐代码，包括PHP、CSS、JavaScript语言
5、Vim
Vim是从vi发展出来的一个文本编辑器。代码补全、编译及错误跳转等方便编程的功能特别丰富，在程序员中被广泛使用，和Emacs并列成为类Unix系统用户最喜欢的文本编辑器。
6、Diffchecker
Diffchecker是用于检测/比较两个文件文本有什么不同的差异的在线代码工具，它的有点是不需要人工查看，尤其是大文件，且使用方便。
7、BrowserShots
BrowserShots是一款免费的跨浏览器测试工具，捕捉网站在不同浏览器中的截图。这是最有名，也是最古老的浏览器兼容性测试工具。
8、CleanCSS
免费的CSS精简压缩工具，通过这个在线工具，可以将你的CSS文件压缩、优化成更精简，这将大大提高你的网站的载入速度。进入CleanCSS后，你可以输入要压缩的CSS代码或是该CSS文件的所在URL地址，然后选择代码布局和相应的精简压缩选项，最后点击生成即可。
9、Firebug
Firebug是firefox下的一个插件,能够调试所有网站语言，如Html,Css等，但最重要的是有javascript调试功能，在各种浏览器下都能使用（IE,Firefox,Opera,Safari）。除此之外，其他功能还很强大，比如html,css,dom的察看与调试，网站整体分析等等。总之就是一整套完整而强大的WEB开发工具，再有就是其为开源的软件。
10、ZendStudio
专业开发人员在使用PHP整个开发周期中唯一的集成开发环境(IDE)，它包括了PHP所有必须的开发部件。通过一整套编辑、调试、分析、优化和数据库工具，ZendStudio加速开发周期，并简化复杂的应用方案。
11、Grunt
Grunt是一个基于任务的JavaScript工程命令行构建工具，被称为JavaScript世界的构建工具。当你在Gruntfile文件正确配置好了任务，任务运行器就会自动帮你或你的小组完成大部分无聊的工作。
当然，web开发类工具还有很多，本篇主要涉及的是前台程序开发比较常用的工具，相信你在平常的网站开发过程中一定会熟练掌握更多更适合你开发环境的工具。
以上就是小编今天为大家分享的关于web前端工程师工作中都会用到哪些前端工具？的文章希望本篇文章能够对正在从事web前端工作的小伙伴们有所帮助，想要了解更多web前端方面知识记得关注北大青鸟web前端培训官网哦~
*声明：内容与图片均来源于网络（部分内容有修改），版权归原作者所有，如来源信息有误或侵犯权益，请联系我们删除或授权事宜。
❷ 用javascript编写正则来匹配字符串里面的正则字面量。
用js的事件监听输入框的内容，再用正则去匹配里面的内容，发现有关键词，就设置样式让其高亮，网上应该有不少这种js插件才对，可以去搜来参考下。
在我回复你问题的这个输入框，也有这个插件，你可以右键查看源代码去找找。
❸ 作为一个前端开发，vscode有哪些值得安装的插件
WijmoJS 前端开发工具包由多款高效、灵活的纯前端控件组成，全面支持 Angular、React、Vue、TypeScript、Knockout 和 Ionic框架，用于快速搭建企业级桌面/移动 Web 应用程序。WijmoJS 可灵活应对客户需求变化，缩短新项目研发周期，高效处理海量用户数据，提升产品核心竞争力。
借助葡萄城深厚的技术底蕴，WijmoJS 为各领域用户提供更稳定、更高效的前端开发工具，帮助中国招商银行、微软、思科、特斯拉、富士通等知名企业快速搭建其 Web 应用程序。WijmoJS 凭借先进的触控设计、全面的框架支持、顶级的控件性能、零依赖的产品特性和易用、轻松的操作体验，全面满足前端开发所需，已成为构建企业 Web 应用程序最高效的纯前端开发工具包。
与此同时，WijmoJS 的可视化设计器已正式推出，包含 VSCode 设计器和在线设计器。通过使用设计器，您可以在想要配置的控件中选择并浏览所有可用的内置选项，然后导出要在 WijmoJS 应用程序中使用的代码，或者通过设计器自动更新 HTML 源文件。
❹ 需要在插件里的设置里需要用到正则表达式修改，怎么改
正则式：(\d) 加圆括号表示分组并作为“反向索引”，\d表示一位数字
替换为：\1a \1表示引用第1个组，对每个数字，替换为它本身跟上字母a
我用的EmEditor，不同环境正则式语法也有差别。
\d可用[0-9]{1}替代
\1在有些环境中是$1
❺ jQuery插件form-validation-engine正则表达式操作示例
本文实例讲述了jQuery插件form-validation-engine正则表达式操作。分享给大家供大家参考，具体如下：
form-validation-engine是一个不错的表单验证插件，示例如下：
(function($)
{
$.fn.validationEngineLanguage
=
function()
{};
$.validationEngineLanguage
=
{
newLang:
function()
{
$.validationEngineLanguage.allRules
=
{"required":{
//
Add
your
regex
rules
here,
you
can
take
telephone
as
an
example
"regex":"none",
"alertText":"*
必选字段",
"alertTextCheckboxMultiple":"*
请选择选项",
"alertTextCheckboxe":"*
需要这个复选框"},
"length":{
"regex":"none",
"alertText":"*在
",
"alertText2":"
和
",
"alertText3":
"
之间"},
"maxCheckbox":{
"regex":"none",
"alertText":"*
检查允许超过"},
"minCheckbox":{
"regex":"none",
"alertText":"*
请选择
",
"alertText2":"
选项"},
"confirm":{
"regex":"none",
"alertText":"*
你的字段不匹配"},
"telephone":{
"regex":"/^[0-9\-\(\)\
]+$/",
"alertText":"*
无效的号码"},
"email":{
"regex":"/^[a-zA-Z0-9_\.\-]+\@([a-zA-Z0-9\-]+\.)+[a-zA-Z0-9]{2,4}$/",
"alertText":"*
无效的邮箱"},
"date":{
"regex":"/^[0-9]{4}\-\[0-9]{1,2}\-\[0-9]{1,2}$/",
"alertText":"*
无效的日期，必须是YYYY-MM-DD的格式"},
"onlyNumber":{
"regex":"/^[0-9\
]+$/",
"alertText":"*
只允许输入数字"},
"noSpecialCaracters":{
"regex":"/^[0-9a-zA-Z]+$/",
"alertText":"*
有非法字符"},
"ajaxUser":{
"file":"validateUser.php",
"extraData":"name=eric",
"alertTextOk":"*
这个用户是合法的",
"alertTextLoad":"*
加载中，请等待",
"alertText":"*
这个用户已经存在"},
"ajaxName":{
"file":"validateUser.php",
"alertText":"*
这个名字已经被使用",
"alertTextOk":"*
这个名字是可以的",
"alertTextLoad":"*
加载中，请等待"},
"onlyLetter":{
"regex":"/^[a-zA-Z\
\']+$/",
"alertText":"*
只允许输入字母"},
"validate2fields":{
"nname":"validate2fields",
"alertText":"*
你必须有姓和名"}
}
}
}
})(jQuery);
$(document).ready(function()
{
$.validationEngineLanguage.newLang()
});
这里面有不少正则表达式，很有意思。
很有意思的form表单验证。
PS：这里再为大家提供2款非常方便的正则表达式工具供大家参考使用：
JavaScript正则表达式在线测试工具：
http://tools.jb51.net/regex/javascript
正则表达式在线生成工具：
http://tools.jb51.net/regex/create_reg
更多关于jQuery相关内容可查看本站专题：《jQuery正则表达式用法总结》、《jQuery字符串操作技巧总结》、《jQuery操作xml技巧总结》、《jQuery扩展技巧总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
❻ 求推荐一个jQuery的插件。 已经学会了正则表达式验证表单。 现在要使用插件验证，刚随便下了个，
jQuery校验
官网地址：http://bassistance.de/jquery-plugins/jquery-plugin-validation
一导入js库
<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></script>
二、默认校验规则
(1)required:true 必输字段
(2)remote:"check.php" 使用ajax方法调用check.php验证输入值
(3)email:true 必须输入正确格式的电子邮件
(4)url:true 必须输入正确格式的网址
(5)date:true 必须输入正确格式的日期 日期校验ie6出错，慎用
(6)dateISO:true 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性
(7)number:true 必须输入合法的数字(负数，小数)
(8)digits:true 必须输入整数
(9)creditcard: 必须输入合法的信用卡号
(10)equalTo:"#field" 输入值必须和#field相同
(11)accept: 输入拥有合法后缀名的字符串（上传文件的后缀）
(12)maxlength:5 输入长度最多是5的字符串(汉字算一个字符)
(13)minlength:10 输入长度最小是10的字符串(汉字算一个字符)
(14)rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
(15)range:[5,10] 输入值必须介于 5 和 10 之间
(16)max:5 输入值不能大于5
(17)min:10 输入值不能小于10
三、默认的提示
messages: {
required: "This field is required.",
remote: "Please fix this field.",
email: "Please enter a valid email address.",
url: "Please enter a valid URL.",
date: "Please enter a valid date.",
dateISO: "Please enter a valid date (ISO).",
dateDE: "Bitte geben Sie ein g眉ltiges Datum ein.",
number: "Please enter a valid number.",
numberDE: "Bitte geben Sie eine Nummer ein.",
digits: "Please enter only digits",
creditcard: "Please enter a valid credit card number.",
equalTo: "Please enter the same value again.",
accept: "Please enter a value with a valid extension.",
maxlength: $.validator.format("Please enter no more than {0} characters."),
minlength: $.validator.format("Please enter at least {0} characters."),
rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
range: $.validator.format("Please enter a value between {0} and {1}."),
max: $.validator.format("Please enter a value less than or equal to {0}."),
min: $.validator.format("Please enter a value greater than or equal to {0}.")
},
如需要修改，可在js代码中加入：
jQuery.extend(jQuery.validator.messages, {
required: "必选字段",
remote: "请修正该字段",
email: "请输入正确格式的电子邮件",
url: "请输入合法的网址",
date: "请输入合法的日期",
dateISO: "请输入合法的日期 (ISO).",
number: "请输入合法的数字",
digits: "只能输入整数",
creditcard: "请输入合法的信用卡号",
equalTo: "请再次输入相同的值",
accept: "请输入拥有合法后缀名的字符串",
maxlength: jQuery.validator.format("请输入一个 长度最多是 {0} 的字符串"),
minlength: jQuery.validator.format("请输入一个 长度最少是 {0} 的字符串"),
rangelength: jQuery.validator.format("请输入 一个长度介于 {0} 和 {1} 之间的字符串"),
range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),
max: jQuery.validator.format("请输入一个最大为{0} 的值"),
min: jQuery.validator.format("请输入一个最小为{0} 的值")
});
推荐做法，将此文件放入messages_cn.js中，在页面中引入
<script src="../js/messages_cn.js" type="text/javascript"></script>
四、使用方式
1.将校验规则写到控件中
<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></script>
<script src="./js/jquery.metadata.js" type="text/javascript"></script>
$().ready(function() {
$("#signupForm").validate();
});
<form id="signupForm" method="get" action="">
<p>
<label for="firstname">Firstname</label>
<input id="firstname" name="firstname" class="required" />
</p>
<p>
<label for="email">E-Mail</label>
<input id="email" name="email" class="required email" />
</p>
<p>
<label for="password">Password</label>
<input id="password" name="password" type="password" class="{required:true,minlength:5}" />
</p>
<p>
<label for="confirm_password">确认密码</label>
<input id="confirm_password" name="confirm_password" type="password" class="{required:true,minlength:5,equalTo:'#password'}" />
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</form>
使用class="{}"的方式，必须引入包：jquery.metadata.js
可以使用如下的方法，修改提示内容：
class="{required:true,minlength:5,messages:{required:'请输入内容'}}"
在使用equalTo关键字时，后面的内容必须加上引号，如下代码：
class="{required:true,minlength:5,equalTo:'#password'}"
❼ eclipse 正则表达式的插件 有吗
正则表达式是要自己写的，工具是测试用的，使用工具的人要么是懂的写的，要么是模棱两可的，一点都不会的，根本就没有。
❽ 有哪些it程序员的必备神器
URL Decoder/Encoder：https://meyerweb.com/eric/tools/dencoder/ 特别实用的一个用来处理URL编码和解码的小工具，你甚至可以直接将这个页面的源代码保存下来，这样不需要连接上网也可以离线使用。附送的一个隐藏功能就是当你从任何地方拷贝信息过来的时候，它会自动去除拷贝过来的格式化信息，小编自己基本上每天都会使用这个小工具复制粘贴各种信息。
iTerm2是一款完全免费的开源软件，可以完全替代MacOS的终端。iTerms功能强大，使用方便，可以让你轻松且高效地管理和定制化你的工作流程。iTerm2的一些特色功能包括：标签变色，智能选中，自动补齐，全屏展示所有的 tab并支持搜索（Exposé Tabs），丰富的快捷操作等。
Textpad这款工具具有无限制的撤销/重做功能，并且能够编辑超大文件，文件上限是系统虚拟内存大小。
Octotree：https://www.octotree.io/Github是目前使用最广泛的版本控制工具，然而通过浏览器访问Github的体验并不是那么友好，特别是当我们需要不断地访问不同文件夹里面的文件的时候。Octotree正是这样一款浏览器插件，它提供了类似IDE的便于访问的代码目录树，能够提高我们在Github上工作效率。
Wireshark：这个工具可以用来监控机器上的TCP、HTTP等各层级的网络通信。作为后端开发，如果想看前端发来的请求到底都包含了哪些信息，又没有前端的调试环境的话，使用Wireshark监控HTTP请求是很好的解决方案。自己在程序中发HTTP请求时，也可以使用它来检查发出的HTTP请求是否符合自己的预期。
Mermaid：这个工具可以使用脚本语言直接渲染出流程图、时序图、甘特图，写文档简单快捷。免拖拽，免排版，格式控制统一。脚本也便于存放修改，样式可以复用。还可以使用插件集成如Markdown编辑器，进行实时预览。
spectacle：Mac free source 窗口控制工具，拖拽窗口到屏幕边缘resize，也可以自定义快捷键。用起来跟Windows上面一样。相比较于Moom，SizeUp，Divvy，spectacle支持鼠标拖拽到边缘resize，非常便利。
Tmux：一个虚拟终端可以管理多个会话，窗口和面板。执行 tmux 命令时就开启了一个服务并创建了一个会话，窗口和面板。支持分屏，同时处理多个操作。不受断网影响，避免丢失重要工作进度。方便演示与协作，支持结对编程。
Caniuse：https://caniuse.com/#home 通过这个网站，用户能够查询主流浏览器特定版本对HTML,CSS和JS的支持情况。并且最重要的是它“免费”！
Visual Studio Code：这是微软出品的IDE工具，跨平台（Linux，Mac，Windows）。轻量级内存占用，品质稳定且免费。同时内置Git版本控制功能。值得一提的是插件生态丰富，安装插件简单，通过插件可以增加更丰富的语言支持、主题定制、文本自动格式化等能力。
❾ Notepad++ 有哪些适用于前端开发的插件
常用的前端开发插件如下：
Emmet
Emmet的前身是Zen Coding，一款使用仿CSS选择器的语法来快速开发HTML和CSS的插件，是前端开发神器。它无视了编辑器的自动提示和自动完成，秒杀了你自定义的各种快捷键或者 AHK 的热字符串，以智能简洁高效的缩短输入，带给你超快速地书写各种复杂而枯燥的 HTML 和 CSS 代码的体验。现在可以在Notepad++的插件管理器里直接安装了。
Finger Text
标签代码替换和文本自动完成插件，编辑器配合这个功能可以有效地提升代码的书写速度，提高自己的工作效率，例如我输入if然后按Tab键将会把if替换成一个完整的if结构，可以极大的提高效率，当然具体怎么替换是可以配置的。
TextFx
这个号称是Notepad++上面最好用的plugin，具有超强的文本处理能力，比如文本编码处理等。编程某种程度上就是文本工作，所以这个插件对开发人员应该是非常有帮助的。以前是默认安装的，现在需要自己手动安装。
Task List
自动扫描当前文档，将所有"TODO:"开头的注释都找出来，列在右边的面板中，双击可以跳转该行。这和Eclipse里的TODO功能很相似，便于标记查找没有完成的工作。
HTML Tag
编辑HTML代码时比较有用，它主要的功能是匹配选择的标签，对HTML标签编码及解码，对JS编码及解码，我认为对HTML标签编码及解码是最有用的功能了。
TagsView
可以列出当前文档的全局变量，函数列表等，方便查找定位函数，变量等。
JSON Viewer
可以以树的形式查看JSON，同时可以格式化JSON，增加缩进。
JSLint
JSLint一个JavaScript语法检查工具，可以检查你的代码是否优秀，规则请参考<<JavaScript语言精粹>>。
RegEx Helper
在文档的中匹配正则表达式，可以用来测试正则表达式。
Compare Plugin
一个非常实用的工具，可以用来比较两个文件不同之处，主要用来对比相邻的两个文件。
Explorer
一个文件浏览窗口，可以在里面创建文件，文件夹等。还可以快速定位当前打开的文件的文件夹。
File Switcher
一个快速切换窗口的工具，支持通过输入文件名，路径或者tab index来查找切换，可以用来替换默认的Ctrl + Tab。