1. 程式人生 > >sublime 編輯器學習(學習使用隨筆)

sublime 編輯器學習(學習使用隨筆)

sublime 編輯器學習

對比了不少的文字編輯工具,也接觸過很多的編輯工具 例如:nodpad++,editplus,sublimetext3,visual studio code ,等工具,發現各有利弊,因為在考慮往全棧方向發展 故也開始向前端邁進。下面主要是在網上翻閱部落格整理的相關知識。主要貼了一下其他博友的網址,和一些自己在使用sublime時遇到的一下問題和記的一些筆記。便於自己後面查閱。

start

離線安裝 package controll

https://www.cnblogs.com/luoshupeng/archive/2013/09/09/3310777.html

markdown實時預覽

https://blog.csdn.net/github_32886825/article/details/52930195

emmet(補齊html程式碼等)無法生效原因 ,PyV8安裝

https://blog.csdn.net/yanzi1225627/article/details/51069420

快捷鍵和外掛參考

https://blog.csdn.net/huohao_blogs/article/details/76120756

AutoFileName

快速列出你想引用的資料夾裡面所有檔案的名字,比如想引用test/img/1.png。只需要輸入/img,該外掛就會自動提示/img下面的所有檔名,如圖

JsFormat

JsForma可以自動幫助你格式化JavaScript程式碼,形成一種通用的格式,比如對壓縮、空格、換行的js程式碼進行整理,使得js程式碼結構清晰,易於觀看。在已壓縮的JS檔案中,右鍵選擇jsFormat或者使用預設快捷鍵(Ctrl+Alt+F),如果該熱鍵被佔用了,可以在Preferences→Key Bindings-User中配置: { “keys”: [“ctrl+shift+alt+j”], “command”: “js_format”,“context”: [{“key”: “selector”, “operator”: “equal”, “operand”: “source.js,source.json”}]},

sublime 常用快捷鍵

https://blog.csdn.net/free_xiaochen/article/details/78181125
側邊欄增強外掛SideBarEnhancements

這個也沒有什麼好說的,誰用誰知道,大大增強右鍵列表的功能,裝上就能用。s

控制檯撥出外掛Terminal

用node,Grunt等等要調出控制檯的娃知道的,簡直神奇有木有,裝上就能用。

Tips:快捷鍵 ctrl+shift+T撥出當前檔案路徑的控制檯

程式碼提示外掛SublimeCodeIntel

這個也沒什麼廢話吧,支援多語言的高速編碼的程式碼提示工具。
然後開啟Sublime建立個檔案試一下,如果還不行就按下 ctrl+shift+space 開啟提示功能

以前用的是什麼TAG,CssComb和JSFormat,但是某一天發現這款整合prettify的外掛後就一直沒換過了,不要被外掛的HTML迷惑,這是一款可以用於HTML,CSS,Javascript的整合排版外掛

Tips:安裝完快捷鍵ctrl+shift+h 一鍵格式化程式碼

一鍵瀏覽檔案

Preferences->Key Bindings - User開啟使用者快捷鍵設定,copy下面的設定

[
//firefox
{
“keys”: [“f1”],
“command”: “side_bar_files_open_with”,
“args”: {
“paths”: [],
“application”: “C:\Program Files\Mozilla Firefox\firefox.exe”,
“extensions”: “."
}
},
//chorme
{
“keys”: [“f2”],
“command”: “side_bar_files_open_with”,
“args”: {
“paths”: [],
“application”: “C:\Users\manfr\AppData\Local\Google\Chrome\Application\chrome.exe”,
“extensions”: ".

}
},
//IE
{
“keys”: [“f3”],
“command”: “side_bar_files_open_with”,
“args”: {
“paths”: [],
“application”: “C:\Program Files\Internet Explorer\iexplore.exe”,
“extensions”: “."
}
},
//safari
{
“keys”: [“f4”],
“command”: “side_bar_files_open_with”,
“args”: {
“paths”: [],
“application”: “C:\Program Files (x86)\Safari\Safari.exe”,
“extensions”: ".

}
}
]
稍微解釋下,keys是按鍵,application是瀏覽器應用程式路徑,注意反斜槓的要轉義。extensions是匹配所有的檔案字尾格式。

Tips:查了下預設的快捷鍵,SublimeText3中f1-f12中只有f11被預設為全屏命令,其他的沒設定。也就是說,你可以裝十個八個瀏覽器一字排開按過去測試。

CSS3字首補充外掛Autoprefixer

ctrl+shift+P輸入install Package等待讀取伺服器列表,輸入autoprefixer第一個就是了
要裝Node.js,沒有的話去下載安裝吧
外掛使用CanIUse資料庫,能精準判斷哪些屬性需要什麼字首

Tips:使用方法:在輸入CSS3屬性後(冒號前)按Tab鍵

Trailing spaces

可以檢測和一鍵刪除程式碼的空格,儲存時自動刪除多餘空格,讓你的程式碼更加緊湊規範。功能入口:Edit→
Trailing Spaces→
Delete,也可以自己設定快捷鍵,我通常設定成ctrl+shift+alt+t,以下貼上到Key-Bindings-User裡面:{ “keys”: [“ctrl+shift+alt+t”], “command”: “delete_trailing_spaces” },

DocBlockr

安裝該外掛後,可以快速生成各種註釋格式,當需要生成註釋符號時,輸入/*、/然後回車系統即幫你自動生成,如果/後面剛好是一個函式的定義,註釋格式會根據函式的引數生成。

目前使用到的外掛

{
“bootstrapped”: true,
“in_process_packages”:
[
],
“installed_packages”:
[
“3024 Color Scheme”,
“AdvancedNewFile”,
“auto-save”,
“AutoFileName”,
“Autoprefixer”,
“DocBlockr”,
“Emmet”,
“jQuery”,
“JsFormat”,
“MarkdownEditing”,
“MarkdownPreview”,
“Nodejs”,
“Package Control”,
“Python 3”,
“SideBarEnhancements”,
“SublimeCodeIntel”,
“Terminal”,
“TrailingSpaces”
]
}