前端開發(fā)常用的Sublime前端插件及快捷鍵總結(jié)

件

插件安裝方式，ctrl+shift+p輸入install packages

CSS3:支持CSS3里的語法高亮。(Sublime3里自帶的CSS高亮不夠用)。安裝后, 打開一個(gè)CSS文件，然后按照下面GIF操作，將CSS3高亮作為CSS文件的默認(rèn)高亮。

livestyle：調(diào)試后實(shí)時(shí)更新頁面。安裝這個(gè)還需要安裝谷歌的插件。

Emmet:快速生成代碼，用過h5build的應(yīng)該知道。ul*li*3相當(dāng)于:

<ul><li></li><li></li><li></li></ul>

記下語法就ok.

ConvertToUTF8：編碼轉(zhuǎn)utf8

CSScomb:css屬性排序

html5：html規(guī)范包，輸入html+tab生成html規(guī)范文檔

Alignment：代碼對齊，快捷鍵ctrl alt a

Autoprefixer插件:css3私有前綴自動(dòng)補(bǔ)全插件

AutoFileName：自動(dòng)完成文件名的輸入，如圖片選取，快捷輸入文件名路徑補(bǔ)全

less sass插件

JsFormat js格式化插件

Terminal 命令行插件

Minify 代碼美化壓縮插件

Color Highlighter 顏色選擇插件

快捷鍵

Ctrl+D 選中光標(biāo)所占的文本，繼續(xù)操作則會(huì)選中下一個(gè)相同的文本。

Alt+F3 選中文本按下快捷鍵，即可一次性選擇全部的相同文本進(jìn)行同時(shí)編輯。舉個(gè)栗子：快速選中并更改所有相同的變量名、函數(shù)名等。

Ctrl+L 選中整行，繼續(xù)操作則繼續(xù)選擇下一行，效果和 Shift+↓ 效果一樣。

Ctrl+Shift+L 先選中多行，再按下快捷鍵，會(huì)在每行行尾插入光標(biāo)，即可同時(shí)編輯這些行。

Ctrl+Shift+M 選擇括號內(nèi)的內(nèi)容（繼續(xù)選擇父括號）。舉個(gè)栗子：快速選中刪除函數(shù)中的代碼，重寫函數(shù)體代碼或重寫括號內(nèi)里的內(nèi)容。

Ctrl+M 光標(biāo)移動(dòng)至括號內(nèi)結(jié)束或開始的位置。

Ctrl+Enter 在下一行插入新行。舉個(gè)栗子：即使光標(biāo)不在行尾，也能快速向下插入一行。

Ctrl+Shift+Enter 在上一行插入新行。舉個(gè)栗子：即使光標(biāo)不在行首，也能快速向上插入一行。

Ctrl+Shift+[ 選中代碼，按下快捷鍵，折疊代碼。

Ctrl+Shift+] 選中代碼，按下快捷鍵，展開代碼。

Ctrl+K+0 展開所有折疊代碼。

Ctrl+← 向左單位性地移動(dòng)光標(biāo)，快速移動(dòng)光標(biāo)。

Ctrl+→ 向右單位性地移動(dòng)光標(biāo)，快速移動(dòng)光標(biāo)。

shift+↑ 向上選中多行。

shift+↓ 向下選中多行。

Shift+← 向左選中文本。

Shift+→ 向右選中文本。

Ctrl+Shift+← 向左單位性地選中文本。

Ctrl+Shift+→ 向右單位性地選中文本。

Ctrl+Shift+↑ 將光標(biāo)所在行和上一行代碼互換（將光標(biāo)所在行插入到上一行之前）。

Ctrl+Shift+↓ 將光標(biāo)所在行和下一行代碼互換（將光標(biāo)所在行插入到下一行之后）。

Ctrl+Alt+↑ 向上添加多行光標(biāo)，可同時(shí)編輯多行。

Ctrl+Alt+↓ 向下添加多行光標(biāo)，可同時(shí)編輯多行。

Ctrl+J 合并選中的多行代碼為一行。舉個(gè)栗子：將多行格式的CSS屬性合并為一行。

Ctrl+Shift+D 復(fù)制光標(biāo)所在整行，插入到下一行。

Tab 向右縮進(jìn)。

Shift+Tab 向左縮進(jìn)。

Ctrl+K+K 從光標(biāo)處開始刪除代碼至行尾。

Ctrl+Shift+K 刪除整行。

Ctrl+/ 注釋單行。

Ctrl+Shift+/ 注釋多行。

Ctrl+K+U 轉(zhuǎn)換大寫。

Ctrl+K+L 轉(zhuǎn)換小寫。

Ctrl+Z 撤銷。

Ctrl+Y 恢復(fù)撤銷。

Ctrl+U 軟撤銷，感覺和 Gtrl+Z 一樣。

Ctrl+F2 設(shè)置書簽

Ctrl+T 左右字母互換。

F6 單詞檢測拼寫

Ctrl+F 打開底部搜索框，查找關(guān)鍵字。

Ctrl+shift+F 在文件夾內(nèi)查找，與普通編輯器不同的地方是sublime允許添加多個(gè)文件夾進(jìn)行查找，略高端，未研究。

Ctrl+P 打開搜索框。舉個(gè)栗子：1、輸入當(dāng)前項(xiàng)目中的文件名，快速搜索文件，2、輸入@和關(guān)鍵字，查找文件中函數(shù)名，3、輸入：和數(shù)字，跳轉(zhuǎn)到文件中該行代碼，4、輸入#和關(guān)鍵字，查找變量名。

Ctrl+G 打開搜索框，自動(dòng)帶：，輸入數(shù)字跳轉(zhuǎn)到該行代碼。舉個(gè)栗子：在頁面代碼比較長的文件中快速定位。

Ctrl+R 打開搜索框，自動(dòng)帶@，輸入關(guān)鍵字，查找文件中的函數(shù)名。舉個(gè)栗子：在函數(shù)較多的頁面快速查找某個(gè)函數(shù)。

Ctrl+：打開搜索框，自動(dòng)帶#，輸入關(guān)鍵字，查找文件中的變量名、屬性名等。

Ctrl+Shift+P 打開命令框。場景栗子：打開命名框，輸入關(guān)鍵字，調(diào)用sublime text或插件的功能，例如使用package安裝插件。

Esc 退出光標(biāo)多行選擇，退出搜索框，命令框等。

Ctrl+Tab 按文件瀏覽過的順序，切換當(dāng)前窗口的標(biāo)簽頁。

Ctrl+PageDown 向左切換當(dāng)前窗口的標(biāo)簽頁。

Ctrl+PageUp 向右切換當(dāng)前窗口的標(biāo)簽頁。

Alt+Shift+1 窗口分屏，恢復(fù)默認(rèn)1屏（非小鍵盤的數(shù)字）

Alt+Shift+2 左右分屏-2列

Alt+Shift+3 左右分屏-3列

Alt+Shift+4 左右分屏-4列

Alt+Shift+5 等分4屏

Alt+Shift+8 垂直分屏-2屏

Alt+Shift+9 垂直分屏-3屏

Ctrl+K+B 開啟/關(guān)閉側(cè)邊欄。

F11 全屏模式

Shift+F11 免打擾模式

言：

在程序猿的日常開發(fā)、故障處理、版本更新、文檔編輯等等的工作當(dāng)中，必不可少的都會(huì)和數(shù)據(jù)打交道。

有時(shí)候在處理一些代碼數(shù)據(jù)時(shí)，往往都是手工一個(gè)個(gè)地進(jìn)行復(fù)制粘貼，數(shù)據(jù)量如果很大的時(shí)候，就會(huì)很耗費(fèi)時(shí)間，而且有時(shí)候不太現(xiàn)實(shí)，只能選擇其他解決方式。

接下來，讓我來給大家分享一些實(shí)用的處理技巧吧！

工具準(zhǔn)備

Sublime，同學(xué)們可以提前在網(wǎng)上下載，下文將通過這個(gè)軟件教給大家一些處理數(shù)據(jù)的小技巧。

簡介：Sublime一般指Sublime Text。Sublime Text 是一個(gè)文本編輯器（收費(fèi)軟件，可以無限期試用，但是會(huì)有激活提示彈窗），同時(shí)也是一個(gè)先進(jìn)的代碼編輯器。

心理準(zhǔn)備

出于簡單易懂易理解的理由，以下會(huì)有很多多多圖哦~~ 不用慌，都很簡單的！！

場景分析：

1、根據(jù)已有的數(shù)據(jù)片段，組裝SQL

836037954@qq.com
471644502@qq.com
297380274@qq.com
836037@qq.com
dgsoqqqzh@163.com
123456@qq.com
...

比如我們有以上一些郵箱數(shù)據(jù)，我們?nèi)绾慰焖俚亟M裝插入數(shù)據(jù)庫的sql呢？

通常做法：

第一步，首先寫一條完整的sql

INSERT INTO User(email) VALUE("836037954@qq.com");

第二步，數(shù)一下總共有多少條數(shù)據(jù)，把上面組裝好的數(shù)據(jù)，復(fù)制出多少條，如：

第三步，把全部郵箱，逐個(gè)復(fù)制，逐個(gè)粘貼替換已經(jīng)組裝好的數(shù)據(jù)，如：

至此，已經(jīng)完成要求了，同學(xué)們可能會(huì)說：“這么簡單，才不要什么技巧呢，我都會(huì)了”

在這里我想說，如果要處理的數(shù)據(jù)，有成千上萬條，甚至上萬上百萬條呢？

如果按照1秒處理一條的速度，那么10萬條，要10萬秒，一天86400秒，那豈不是處理完都要明天了。

接下來，教大家如何快速處理好，就剩下很多時(shí)間可以處理更多其他事情了。

快速簡單做法：

首先，我們把全部數(shù)據(jù)復(fù)制出來，如：

然后ctrl+A全選(或者用鼠標(biāo)把需要處理的數(shù)據(jù)選中)，關(guān)鍵步驟來了！

鍵盤按ctrl + shift + L后，如：

大家可能會(huì)說，沒什么變化啊！

而細(xì)心的同學(xué)會(huì)發(fā)現(xiàn)，“咦，怎么每一行都會(huì)有光標(biāo)呢？”

不錯(cuò)，這就是處理數(shù)據(jù)的關(guān)鍵操作！

好了，我們繼續(xù)。

接著，我們按一下鍵盤的方向鍵←

可以看到這時(shí)候并沒有選中數(shù)據(jù)，但是光標(biāo)都去到最左邊了，而且每一行都有光標(biāo)，然后我們就可以開始按照下面的格式組裝sql數(shù)據(jù)了。

INSERT INTO User(email) VALUE("836037954@qq.com");

直接在鍵盤輸入 INSERT INTO User(email) VALUE("

然后按一下鍵盤的end鍵，繼續(xù)補(bǔ)回 ");

至此，我們已經(jīng)完成組裝sql的工作了，1分鐘的事情就搞定了！

其實(shí)不止這個(gè)組裝sql的，文檔編輯工作也可能會(huì)用到，具體就需要同學(xué)們自己去體會(huì)啦！

2、處理部分相同，部分不同的數(shù)據(jù)

以php語言為例，如果需要快速組裝一個(gè)數(shù)組，如：

通常我們會(huì)類似場景一的做法，一個(gè)個(gè)地去復(fù)制、粘貼、替換，比較麻煩，接下來分享一個(gè)快速組裝的方法。

下圖是初始化的情況

2.1 首先，我們用鼠標(biāo)選中全部數(shù)據(jù)都相似的部分，如：

2.2 然后用sublime的選中相同內(nèi)容的快捷鍵，按 ctrl + D (這個(gè)是選中下一個(gè)相同的內(nèi)容，如果有多個(gè)，需要按多次)；

或者按 alt + F3（這個(gè)是選中當(dāng)前文件內(nèi)所有和已選中內(nèi)容相同的數(shù)據(jù)），如：

2.3 然后繼續(xù)按一下鍵盤方向鍵右 →，這時(shí)候也是沒有選中內(nèi)容，出現(xiàn)多個(gè)光標(biāo)的情況。

2.4 然后需要這些光標(biāo)都選中需要復(fù)制的內(nèi)容，先按住ctrl + shift，然后再按鍵盤方向鍵右 →，就會(huì)得到如下圖。

達(dá)到選中所有不同數(shù)據(jù)的效果，這里ctrl鍵+方向鍵是光標(biāo)會(huì)按照指定方向跳動(dòng)（按單詞或者分隔符，如果是從單詞開頭按，就會(huì)跳躍到單詞的尾部），shift+方向鍵是按照指定方向選中內(nèi)容的意思。

2.5 接著，ctrl+C 復(fù)制，其實(shí)已經(jīng)是復(fù)制了全部選中的數(shù)據(jù)，然后就開始組裝異形數(shù)組。

由上圖得知，當(dāng)前選中了10個(gè)數(shù)據(jù)，我們需要先組裝好10條初始化的數(shù)據(jù)（如何初始化就不細(xì)說了，復(fù)制粘貼，或者先寫好一條，然后光標(biāo)放在需要復(fù)制的行，按住ctrl+shift,再按D 鍵，多按幾次就能復(fù)制多條），如：

2.6 然后使用場景一的方法，選中相似的數(shù)據(jù)片段，這里選中 test，再按alt + F3即可選中10行的arr數(shù)據(jù)，按ctrl+V粘貼即可，然后再按end 鍵，再按← 鍵,ctrl+V粘貼2.4步驟得到的數(shù)據(jù)（可能2.5進(jìn)行過復(fù)制操作，所以可能需要重復(fù)2.4步驟得到需要粘貼的數(shù)據(jù)）就大功告成啦，完成如下圖：

是不是挺簡單方便呢？個(gè)人覺得對于開發(fā)來說比較友好，可以提高寫代碼的效率！！

小結(jié)

1、場景一比較適合批量對大量的數(shù)據(jù)進(jìn)行組裝和處理，可以為我們節(jié)省很多人工處理的時(shí)間；

2、場景二比較適合處理異形數(shù)據(jù)，大部分內(nèi)容相同，只有某少部分內(nèi)容不同的數(shù)據(jù)，就是異形數(shù)據(jù)，使用場景二推薦的技巧，我們可以快速輕松地達(dá)到我們想要的效果；

3、同學(xué)們可能會(huì)有疑問，如果我是程序員，寫個(gè)腳本出來，逐個(gè)處理不就完了嗎。但寫腳本的時(shí)間，都可以使用sublime處理好幾次了；

4、以上就是我通過快捷鍵的組合去解決的部分場景，sublime是一個(gè)充滿各種插件，快捷鍵的一款輕便軟件，只要我們合理利用好sublime各種快捷鍵，可以為同學(xué)們完成更多重復(fù)煩瑣困難的工作啦！

賣個(gè)關(guān)子

如下圖，如果想把這么多行的編號數(shù)據(jù)都處理成一行，并且以空格分隔，要怎么快速處理好呢？千萬不要用老方法哦，假如有10萬行，你就知道困難了。

處理前：

處理后：

提示：利用場景一介紹的部分技巧即可完成哦！

以上是本期分享的全部內(nèi)容，主要講解通過Sublime快速處理數(shù)據(jù)的小技巧。

下期會(huì)分享PHP解壓縮工具類的使用，敬請期待~

歡迎各位關(guān)注、留言，大家的支持就是我的動(dòng)力！

0世紀(jì)初，幾乎所有的飛機(jī)都是并列雙翼結(jié)構(gòu)，此時(shí)，美國著名飛行大亨霍華德·休斯認(rèn)為自己的飛機(jī)不夠快，助手委婉地提醒他，如果速度太快，飛機(jī)的上翼結(jié)構(gòu)支柱很可能會(huì)支撐不住，發(fā)生斷裂。霍華德憤怒地向助手大喊：“誰說我們需要上翼結(jié)構(gòu)?讓上翼和支柱見鬼去吧，我們需要的是更輕便的單翼飛機(jī)！”

于是乎，H1單翼飛機(jī)就此出現(xiàn)，這款機(jī)型身上體現(xiàn)了霍華德作為一名航空工程師的天才之處：突破性的流線型機(jī)身，可收放起落架，輕巧靈動(dòng)，平面的鉚釘和接頭以減少空氣阻力，因其優(yōu)美的造型被稱為“銀色子彈”。

同樣地，如果你入職了一家公司，當(dāng)主管拍拍你的肩膀讓你往電腦里安裝Pycharm的時(shí)候，你也可以憤怒地向他大喊：“誰說我們需要Pycharm？讓笨重的IDE都見鬼去吧，我只要輕便的Sublime text 4 !”

是的，輕便優(yōu)雅，不是所有人都喜歡披盔戴甲，重裝上陣。如果你偏愛輕靈機(jī)巧，編寫代碼恰如春日雙燕飛舞柳間，高低左右，回轉(zhuǎn)如意，那么Sublime text 4會(huì)是你的最佳選擇。

Win11系統(tǒng)配置Sublime text 4

首先來到Win11環(huán)境下，進(jìn)入Sublime text 4官網(wǎng)的下載頁面：https://www.sublimetext.com/download

選擇Win版本的安裝包：

下載成功后，雙擊安裝即可。

隨后，需要安裝Python3的安裝包，這里推薦3.10最新版本，由于之前安裝過，這里就不贅述了，如果是沒有安裝過Python3的朋友，請移玉步至：一網(wǎng)成擒全端涵蓋，在不同架構(gòu)(Intel x86/Apple m1 silicon)不同開發(fā)平臺(tái)(Win10/Win11/Mac/Ubuntu)上安裝配置Python3.10開發(fā)環(huán)境。

Sublime Text 4 是一個(gè)擴(kuò)展性極高的編輯器，所有功能可以使用稱為Package Control的插件進(jìn)行擴(kuò)展。要安裝、更新和管理軟件，我們需要在 Sublime Text 4上安裝 Package Control。

打開Sublime Text 4 ，選擇菜單 -> menu Tools -> Install Package Control 進(jìn)行安裝：

安裝過程需要等待一小會(huì)，一旦安裝成功，會(huì)有相應(yīng)的提示信息：

下面我們就可以利用Package Control安裝一些擴(kuò)展軟件了，可以通過菜單 -> Install Package Control option 來激活安裝命令行，也可以通過快捷鍵 Ctrl+Shift+P 來激活安裝命令行：

隨后輸入install后選擇install package 回車選擇。

在安裝搜索框里，鍵入：Chinese 選擇 ChineseLocalizations 回車安裝中文擴(kuò)展。

安裝好以后，我們的Sublime Text 4就可以支持中文顯示了。

接著安裝Python3的擴(kuò)展，和Sublime Text 3 配置Python3不同的是，Sublime Text 4 只需要一個(gè)插件即可以運(yùn)行Python3，那就是 Anaconda

Ctrl+Shift+P 來激活安裝命令行 install package 鍵入：Anaconda

安裝好以后，新建一個(gè)test.py：

def mytest():

    print("Hello Sublime Text 4 ! ")

if __name__=="__main__":
    mytest()

利用快捷鍵 ctrl + b 就可以直接運(yùn)行代碼：

Hello Sublime Text 4 !
[Finished in 152ms]

非常方便，當(dāng)然了，由于Anaconda的語法檢測相對嚴(yán)格，會(huì)出現(xiàn)一些“白框”的提示，我們可以用過Sublime Text 4的首選項(xiàng) -> Package Settings -> Anaconda -> Settings-User 進(jìn)行設(shè)置，打開配置文件后鍵入：

{"anaconda_linting":false}

保存設(shè)置以后，不會(huì)出現(xiàn)白框，并且可以通過Anaconda進(jìn)行自動(dòng)補(bǔ)全：

和 Sublime Text 3 相比，Sublime Text 4 配置 Python3 相對快捷方便了很多，只需要Chinese和Anaconda這兩個(gè)插件即可：

當(dāng)然了，插件可以進(jìn)行安裝，同時(shí)也支持卸載。

Ctrl+Shift+P 來激活安裝命令行 Remove package 然后選擇需要卸載的插件即可。

除了可以針對安裝的軟件進(jìn)行配置，也可以單獨(dú)修改Sublime Text 4的配置，選擇首選項(xiàng) -> 快捷鍵設(shè)置：

[


{
            "keys": ["alt+l"],
            "command": "toggle_setting",
            "args":
            {
                    "setting": "line_numbers"
            }
    }


]

我們就可以使用 alt + l 的快捷鍵來控制Sublime Text 4的行號顯示。

如果愿意，我們還可以通過官網(wǎng)安裝Sublime Text 4的Git 擴(kuò)展 SublimeMerge : https://www.sublimemerge.com/download

這樣，我們就可以在Sublime Text 4 操作代碼的分支、提交、以及推送了：

M1 Mac 系統(tǒng) 配置 Sublime text 4

回到Mac，https://www.sublimetext.com/download 選擇 mac 的壓縮包：

注意，即使是M1芯片的Mac也不要選擇底下的ARM64版本，同樣是選擇MacOS版本，注意下載成功之后并不是dmg擴(kuò)展的安裝包，而是sublime_text_build_4126_mac.zip，里面是軟件本體，需要進(jìn)行解壓操作。

解壓之后，將軟件本體直接拖動(dòng)到應(yīng)用程序目錄中即可：

隨后，同樣選擇菜單 -> menu Tools -> Install Package Control 進(jìn)行安裝

安裝成功后，激活命令行的快捷鍵變成了 Command+Shift+P

同時(shí)運(yùn)行代碼的快捷鍵變成了 Command + b

修改配置文件也換到了 Preferences 中：

設(shè)置完畢以后，我們就可以享受Sublime text 4帶給我們的極速編碼之旅了，Enjoy it！

Sublime text 4 也新增了針對GPU加速的界面渲染，理論上來說輸入延遲可以進(jìn)一步降低。市面上沒有比它輸入延遲低，反應(yīng)更迅速，資源占用更少的編輯器了，絲滑順暢，反觀Pycharm/VSCode對硬件的要求很高，需要好的CPU/內(nèi)存支持，另外如果在內(nèi)網(wǎng)環(huán)境，沒有公網(wǎng)，這種情況下Sublime text 4離線導(dǎo)入配置，導(dǎo)入插件的體驗(yàn)是更好的，直接配置文件夾打包拿到內(nèi)網(wǎng)就直接用了，而vscode對網(wǎng)絡(luò)的依賴度還是比較高的，折騰麻煩。

結(jié)語：

是的，也許你的主管會(huì)和你說：“組里的同事都在用Pycharm，你為什么不用？”，毫無疑問，人往往是按照別人的期待，活成別人希望的樣子，最后丟掉自己。你愿意低質(zhì)量的合群、討好別人，還是一個(gè)人獨(dú)處、堅(jiān)持做自己？這個(gè)時(shí)候也許你更該問自己一個(gè)問題：