前端利器 關於sublime text的使用。

2022-07-14 08:15:11 字數 1233 閱讀 1282

英文版本:

中文版本:

sublime text支援模糊匹配,所以以下操作的輸入亦是支援的。著重挑幾個部分來講,剛開始入門學習前端知識的小夥伴夠用了。

一、 go to anything:

使用快捷鍵control + p 即可開啟, 可以在該輸入框中輸入路徑即可快速檢視檔案;輸入@可以快速瀏覽查詢檔案所包含的css選擇器,支援方向鍵進行上下導航,在js檔案中可以快速查詢函式。

如要開啟bootstrap.css檔案並查詢body元素可以這樣進行操作:public/css/bo@body然後回車即可。(此處使用了模糊匹配)

二、好用的幾個快捷鍵:

多行游標:先選中所要匹配的格式,使用快捷鍵control + d,編輯器會自動匹配到能匹配的下一行文字,如果要略過這一行,按下control + k 即可跳過這一行。如此便可快速進行多行的操作了。亦可通過control + 滑鼠左鍵逐個進行點選來實現自主選擇。也可以通過按住shift,點選所在位置按住滑鼠右鍵進行或上或下的拖拉,也可以實現多行游標的操作,三個方法有各自所適用的地方,稍加嘗試便可以掌握用法。

快速複製本行:control + shift + d

快速新增注釋:control + / 

三、 命令模式:

外掛程式安利:emmet   

1、安裝:進入命令模式,輸入install package 回車,然後輸入emmet 回車 等待安裝。

2、具體的使用:

① 快速建立html檔案:輸入! 再使用快捷鍵 ctrl + e

② 快速新增帶有類或者id的元素:如 .header>ul>item$*10 ,再使用快捷鍵:control  + e (此處的$為數字位),自行體驗吧。

四、sublime text 主題的安裝:

首先進入命令模式,然後搜尋package control install,之後搜尋theme 就會跳出一條條可選擇項,方向鍵上下篩選,回車安裝即可。安裝完後會跳出乙個設定見面,將裡面的一小段**複製到個人的setting中即可。

記得theme前面有乙個逗號要打上去。不然會報錯。

又  嘗試安裝了第乙個theme選項,settings-user設定如下:

如果想在安裝前檢視主題的效果,可以進入 搜尋theme進行檢視。

前端利器sass,scss安裝

之前對比了下less和sass,發現sass使用會比較複雜,所以就拋棄了sass用less寫過乙個專案,可能之前用這個寫專案的經驗太少,發現寫過以後,並沒有想象中那樣方便,但是看過很多文章以後,感覺在 寫乙個完整的專案時使用此類框架還是會比較方便,並且發現sass配合compass有很多優勢,所以還...

whistle 前端除錯利器

為什麼80 的碼農都做不了架構師?前端本地開發的場景中,我們需要頻繁的改動 並需要實時看到效果,並且在一些開發場景中,我們需要將特定的請求 到特定的ip 本地檔案等,所以使用fiddler或whistle等本地 真機抓包除錯工具是非常必要的。在歷史的長河中,我們是使用fiddler willow再搭...

前端除錯利器 Charles

docs 開發之 charles 配置指南 2.啟用 使用公司正版license 啟用 安裝證書 點選證書並選擇 始終信任 證書不被信任可能會導致 開發時部分資源檔案無法載入。設定 將你需要 https的 新增進去 本地除錯 如果你想 bear test 到本地,你需要 點選map remote 新...