❶ 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。