1. 程式人生 > >Notepad++前端開發常用外掛介紹

Notepad++前端開發常用外掛介紹

Notepad++除了自身的功能強大之外,更是有許多非常的優秀的外掛,下面就總結一下前端開發過程一些比較常用的外掛。

Emmet

Emmet的前身是Zen Coding,一款使用仿CSS選擇器的語法來快速開發HTML和CSS的外掛,是前端開發神器。它無視了編輯器的自動提示和自動完成,秒殺了你自定義的各種快捷鍵或者 AHK 的熱字串,以智慧簡潔高效的縮短輸入,帶給你超快速地書寫各種複雜而枯燥的 HTML 和 CSS 程式碼的體驗。現在可以在Notepad++的外掛管理器裡直接安裝了。

例如:輸入div#name後按Ctrl+E被轉換成<div id="name"></div>

Finger Text

標籤程式碼替換和文字自動完成外掛,編輯器配合這個功能可以有效地提升程式碼的書寫速度,提高自己的工作效率,例如我輸入if然後按Tab鍵將會把if替換成一個完整的if結構,可以極大的提高效率,當然具體怎麼替換是可以配置的。詳細用法參考: Finger Text

TextFx

這個號稱是Notepad++上面最好用的plugin,具有超強的文字處理能力,比如文字編碼處理等。程式設計某種程度上就是文字工作,所以這個外掛對開發人員應該是非常有幫助的。以前是預設安裝的,現在需要自己手動安裝。詳細用法可以參考:http://zhibin07.iteye.com/blog/1287234

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。

相關推薦

Notepad++前端開發常用外掛介紹

Notepad++除了自身的功能強大之外,更是有許多非常的優秀的外掛,下面就總結一下前端開發過程一些比較常用的外掛。 Emmet Emmet的前身是Zen Coding,一款使用仿CSS選擇器的語法來快速開發HTML和CSS的外掛,是前端開發神器。它無視了編輯器的自動提示和

Sublime Text 3前端開發常用優秀外掛介紹

Package Control使用方法/安裝Emmet外掛 下面將以安裝Emmet外掛為例,同時介紹如何使用Package Control外掛 在Sublime Text 3中按下快捷鍵Ctrl+Shift+P 在出現的文字框中輸入Install Package(或直接輸入“ip”)選中Instal

VS CODE 微軟旗下最好用的前端開發IDE編輯器+常用外掛介紹

安裝完成後自動會顯示中文,如果需要設定字型主題樣式等,請點選左下角的齒輪按鈕,裡面有一個設定,自行選擇自己喜歡的配置。 然後推薦安裝一些基本的外掛,會讓你的開發更便捷,點選左側第五個圖示,進入外掛商店,搜尋以下關鍵字: Atom One

CDN公共庫、前端開發常用插件一覽表(VendorPluginLib)

設計師 ping 項目 遮罩 3.1 輕量 大全 測試 ide =======================================================================================前端CDN公共庫==========

前端開發工具Brackets介紹,安裝及安裝Emme插件時踩過的坑

module 文件 不想 現在 div 當前 user 沒有 -s   對於前端開發的園友來說有可能IDE工具有很多,層次不窮,還有每個人的喜好及習慣也不一樣,因為我是一名後端開發的.Net程序員,但是大家都知道,現在都提倡什麽全棧工程師,所以也得會點前端開發,所以我對於

前端開發常用js代碼片段

表達式 form break ase create 字節 eve follow getc HTML5 DOM 選擇器 // querySelector() 返回匹配到的第一個元素var item = document.querySelector(‘.item‘);conso

前端開發常用原生JS API合集

tcl table links 寬度 形參 寬高 java com att 一、節點 1.1 節點屬性 Node.nodeName //返回節點名稱,只讀 Node.nodeType //返回節點類型的常數值,只讀 Node.nodeValue //返回Text或

(持續更新)瀏覽器兼容性總結—之前端開發常用屬性及api

ott 內置 事件 move min-width line 顏色漸變效果 瀏覽器兼容性 :hover max-width,min-width ie7以上支持 rgba 只支持ie9及以上瀏覽器,ie8要用濾鏡處理 border-radius 也只支持ie9以上 不需

關於js(二)----------------分享前端開發常用代碼片段

led tostring 類型 may 檢查 navi spa inux files 一、預加載圖像 如果你的網頁中需要使用大量初始不可見的(例如,懸停的)圖像,那麽可以預加載這些圖像。 二、檢查圖像是否加載 有時為了繼續腳本,你可能需要檢查圖像是否全部加

第一階段:前端開發_JDBC簡單介紹

接口 簡單介紹 關閉 odin 類型 管理器 sql語句 ger select 2018-06-25 JDBC簡單介紹 一、什麽是JDBC    JDBC(Java DataBase Connectivity)就是Java數據庫連接,說白了就是用Java語言來操作

前端開發工具技巧介紹-Sublime Text3篇

1.基礎須知     ①在命令列裡利用subl命令使用Sublime Text(用前配置環境變數):     subl file:使用Sublime Text開啟一個名為file的新檔案。       &nb

SUBLIME3 前端個人常用外掛及快捷鍵

首先先介紹如何啟用外掛安裝功能: 開啟Sublime 3,然後按 ctrl+` 或者在View → Show Console 在開啟的窗口裡黏貼這個網站上的程式碼(注意: Sublime 2和3所黏貼的程式碼不一樣,注意選擇):import urllib.request,os,hashlib; h

前端開發常用 Linux 命令

窗口 刪除文件 刪除空文件 沒有 dir 目錄 pre 所有 慎用 clear // 清理命令窗口(可簡寫為cls) exit // 關閉命令窗口 mkdir 文件夾名 // 新建文件夾 cd 文件夾名 // 進入文件夾 cd .. // 返回

分享前端開發常用程式碼片段-值得收藏

一、預載入影象 如果你的網頁中需要使用大量初始不可見的(例如,懸停的)影象,那麼可以預載入這些影象。 二、檢查影象是否載入 有時為了繼續指令碼,你可能需要檢查影象是否全部載入完畢。 你也可以使用 ID 或 CLASS 替換 <img>標籤來檢查某個特定的影象是

vue開發常用外掛

dependencies devDependencies babel-plugin-import // 會在編譯過程中將 import 的寫法自動轉換為按需引入的方式,注意:配置 babel-plugin-import 外掛後將不允許匯入所有元件 // .babelrc 中

前端開發常用的函式

實用的函式集合總結 基本型別的判斷 在專案例項中,難免要做一些容錯處理或者是對例項的型別判斷,那麼就可以把這部分的判斷整理成公共的js檔案,供全域性使用。 利用object.prototype.toString.call可以判斷物件的型別 變數的兩種型別值:1、基本型別:String,Number,B

php開發常用外掛整理

font awesome 簡介: font awesome是一套絕佳的圖示字型庫和CSS框架 網址: http://fontawesome.dashgame.com/ layer 簡介: layer是一款近年來備受青睞的web彈層元件 網址

前端開發常用es6知識總結

專案開發中一些常用的es6知識,主要是為以後分享小程式開發、node+koa專案開發以及vueSSR(vue服務端渲染)做個前置鋪墊。 專案開發常用es6介紹(點選檢視詳細) 1、塊級作用域 let const  2、箭頭函式及this指向 3、promise、

前端開發常用網站總結

總結一下自己在前端學習過程中常用的一些網站 1、教程類 w3school:教程詳細,覆蓋面廣http://www.w3school.com.cn 菜鳥教程:與w3school類似http://www.runoob.com 慕課網:以視訊課程為主https://www.imooc.com/ 2

idea 使用說明以及常用外掛介紹

一、idea使用說明 匯入idea的配置(如果之前有配置好的idea的配置檔案) 設定idea的預設配置檔案 (1)設定預設的jdk (2)設定預設的Maven倉庫地址 (3)設定預設的Java檔案的頭部格式 (4)設定檔案編碼UTF8格式(重要)