18. Git版本管理

自帶Git版本管理，如右圖：

上圖中，我們可以在這里進行常用的git命令操作。 如果對Git版本管理不熟悉，可以先去補習。

同時，我推薦安裝插件，這是我在中最推薦的插件之一。 它只是一個 Git 工具，是編碼人員的必備工具。

19.放大/縮小工作區(qū)

我們在前面的設置項中更改了字體大小后，只是更改了代碼的字體大小。

如果要縮放整個工作區(qū)（包括代碼的字體、左側導航欄的字體等），可以按快捷鍵“cmd+/-”。 用戶正在按“ctrl+/-”

當我們在投影儀上向其他人展示代碼時，這個技巧非常有效。

如果想恢復默認的工作區(qū)大小，可以在命令面板中輸入reset zoom（英文為）

20.創(chuàng)建多級子文件夾

我們在新建文件夾的時候，如果直接輸入aa/bb/cc，例如：

這樣就可以創(chuàng)建多級子文件夾，效果如下：

21..的作用

為了統(tǒng)一團隊的配置，我們可以在項目的根目錄下建立.，在上面放置一些配置內容，例如：

. 中的配置只在當前??項目范圍內生效。 提交 . 到代碼倉庫，統(tǒng)一配置會特別方便。

22. 自帶終端

我們可以按“Ctrl+`”打開自帶的終端。 我覺得外部終端不太好用，建議大家使用第三方終端item2。

23.語法支持

自帶句子高亮功能。 換句話說，如果你是在寫一個格式的文章，你可以用來寫。

寫入md文件后，可以點擊右上角的按鈕進行預覽，如右圖：

我一般會安裝""插件來預覽帶有的樣式。 款式非常簡潔美觀。

也可以在控制面板中輸入：打開預覽，直接全屏預覽文件。

24.

emmet可以大大提高html和css的編輯效率，它提供了一個非常短的句子規(guī)則。

比如我們在編輯器中輸入簡寫代碼：ul>li*6，然后按Tab鍵得到如下代碼片段：

默認支持 Emmet。 更多Emmet句型規(guī)則請自行查閱。

25.修改字體，使用“”字體

這個字體很漂亮，很適合寫代碼：

安裝步驟如下：

(1) 進入網(wǎng)站，下載并安裝“”字體。

（2）打開的“設置”，搜索字體，將相關配置改成如下：

"editor.fontFamily": "'Fira Code',Menlo, Monaco, 'Courier New', monospace", // 設置字體顯示
"editor.fontLigatures": false,//控制是否啟用字體連字，true啟用，false不啟用

上面第二行的配置看個人習慣。 我直接設置為".":null，因為我不習慣練書法。

26.代碼低格式：

我們可以利用它來讓代碼變得低級化，這樣會讓代碼顯示的更加美觀。 進行如下：

(1) 安裝插件。

(2) 在項目根路徑下，新建文件.，在文件中添加如下內容：

{
  "printWidth": 150,
  "tabWidth": 4,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "tslintIntegration": true,
  "insertSpaceBeforeFunctionParenthesis": false
}

里面的內容是我自己的配置，大家可以參考一下。

更多配置可以參考官方文檔：

27. 文件傳輸：sftp

如果需要通過ftp將本地文件上傳到局域網(wǎng)中的服務器，可以安裝sftp插件，非常好用。 在公司里經(jīng)常用到。

進行如下：

(1) 安裝插件sftp。

(2) 配置sftp.json文件。 插件安裝完成后，輸入快捷鍵“cmd+shift+P”彈出命令面板，然后輸入sftp:，回車，會在.zip目錄下手動生成一個sftp.json文件。 當前項目的文件夾。 我們需要在這個文件中進行配置，內容可以是：

例子如下：（注意里面的注釋要去掉）

{
  "host": "192.168.xxx.xxx", //服務器ip
  "port": 22, //端口，sftp模式是22
  "username": "", //用戶名
  "password": "", //密碼
  "protocol": "sftp", //模式
  "agent": null,
  "privateKeyPath": null,
  "passphrase": null,
  "passive": false,
  "interactiveAuth": false,
  "remotePath": "/root/node/build/", //服務器上的文件地址
  "context": "./server/build", //本地的文件地址
  "uploadOnSave": true, //監(jiān)聽保存并上傳
  "syncMode": "update",
  "watcher": {
    //監(jiān)聽外部文件
    "files": false, //外部文件的絕對路徑
    "autoUpload": false,
    "autoDelete": false
  },
  "ignore": [
    //忽略項
    "**/.vscode/**",
    "**/.git/**",
    "**/.DS_Store"
  ]
}

(3)在的當前文件中，選擇“右鍵->”將本地代碼上傳到指定的ftp服務器（即上面host中配置的服務器ip）。

我們也可以選擇“右鍵->”來比較本地代碼和ftp服務器上的代碼。

七、配置云端同步

我們可以將配置同步到云端。 這樣一來，當我們換筆記本的時候，配置就可以一鍵同步到本地，不需要重新安裝插件，也不需要重新配置軟件。

我們也可以把配置分享給其他用戶，我們也可以把其他用戶的配置為自己所用。

將您的本地配置云同步到：

(1) 安裝插件同步。

(2)安裝插件后，在插件中使用您的賬號登錄。

(3) 登錄后，在界面中，可以選擇其他的gist； 你也可以忽略它，然后創(chuàng)建你自己的要點。

(4) 使用快捷鍵“+Shift+P”，在彈出的命令框中輸入sync，選擇“/ ”，這樣就可以將最新的配置上傳到.

更換筆記本時，將配置從云端同步到本地：

(1)當我們換成其他時，可以先在中安裝-sync插件。

(2)安裝插件后，在插件中使用您的賬號登錄。

(3) 登錄后，插件界面會手動出現(xiàn)之前的同步記錄：

上圖中，我們點擊最新記錄，將最新的配置從云端同步到本地：

如果你的遠程配置沒有成功同步到本地，可能是網(wǎng)絡的問題。 這時可以使用快捷鍵“+Shift+P”，在彈出的命令框中輸入sync，選擇“下載配置”。 多試幾次。

使用別人的配置：

如果我們要使用別人的配置，首先需要對方給你提供gist。 具體步驟如下：

(1) 安裝插件同步。

(2)使用快捷鍵“+Shift+P”，在彈出的命令框中輸入sync，選擇“下載配置”

(3) 在彈出的界面中，選擇“Gist”，然后輸入別人分享給你的gist。 請注意，此步驟不需要帳戶登錄。

八、三頭六臂：插件推薦

有一個非常強大的功能，支持插件擴展，讓你的編輯器仿佛三頭六臂。

上圖中，點擊紅框，在輸入框中找到你想要的插件名稱，然后安裝即可。

我列幾個常用的插件，非常好用。 注意：階數(shù)越高越實用。

1.【推薦】

我強烈建議你安裝插件，這是我在 中最推薦的插件之一。 它只是一個 Git 工具，是編碼人員的必備工具。 不知道就真的out了。

Git管理中有很多強大的功能，比如：

2. 混帳

有些朋友習慣在編輯器中使用Git管理工具，不喜歡另開GitUI工具。 這個插件可以滿足你查詢所有 Git 記錄的需求。

3.直播【推薦】

在本地啟動一個服務器，寫完代碼就可以實現(xiàn)“熱更新”，在網(wǎng)頁上可以實時看到運行效果。 無需每次都自動刷新頁面。

使用方法：安裝好插件后，開始寫代碼； 編寫代碼后，右鍵單擊并選擇“”。

4.()打包代碼

使軟件顯示為繁體英文。

5. Pair2：高亮配對括號【推薦】

Pair2插件：以不同顏色顯示成對的括號，并用連線標出括號的范圍。 簡稱彩虹括號。

或者，有一個插件也可以突出顯示成對的括號。

6.sftp：文件傳輸【推薦】

如果需要通過ftp將本地文件上傳到局域網(wǎng)中的服務器，可以安裝sftp插件，非常好用。 在公司里經(jīng)常用到。

詳細配置前面已經(jīng)講過了。

7.打開

安裝好插件后，在HTML文件中“右擊->”即可在瀏覽器中預覽網(wǎng)頁。

8.-：選中相同代碼時，高亮更加突出【推薦】

內置的高亮顯示確實不夠搶眼。 用插件支持它。

使用這個插件后，可以關閉自帶的高亮：

只需在用戶設置中添加“。”：false。

參考鏈接：選擇后，相同內容高亮顯示為插件推薦

9.-圖標

-icons會根據(jù)文件的后綴顯示不同的圖標，讓你更直觀的知道每個文件是什么類型。

10.

在工作中，我們經(jīng)常會來回切換多個項目，每次都要找到對應項目的目錄打開，很麻煩。 插件可以解決這樣的煩惱。 它提供了一個特殊的視圖來顯示您的項目。 我們可以把常用的項目保存在這里，需要的時候一鍵切換，非常方便。

11.待辦事項

在寫代碼的過程中，突然發(fā)現(xiàn)一個bug，手頭的工作不想停下來，以免打斷思路，怎么辦？ 根據(jù)代碼規(guī)范，我們通常會在代碼中添加TODO注釋。 如：（注意一定要寫小寫的TODO，不能寫大寫的todo）

//TODO:這里有個bug，我一會兒再收拾你

或者：

//FIXME:我也不知道為啥， but it works only that way.

安裝插件TODO后，按住“Cmd+Shift+P”打開命令面板，輸入“”，選擇相關命令，我們可以看到一個列表。

12.【推薦】

計算在 中編寫代碼所花費的時間。 統(tǒng)計療效如下：

13.代碼時間

插件：記錄編程時間，統(tǒng)計代碼行數(shù)。

安裝插件后，在頂部狀態(tài)欄右下角可以看到時間統(tǒng)計。 點擊該位置后，選擇“”即可查看統(tǒng)計結果。

備注：組長嘗試了這個視圖，發(fā)現(xiàn)統(tǒng)計結果不是很準確。

14.【推薦】

風格預覽風格，非常簡潔大方。 如下圖，兩邊寫文字，兩邊預覽渲染效果：

15.

預覽樣式。

一體

此插件將幫助您更有效地編寫 .

16.同步【推薦】

前面已經(jīng)提到了同步的詳細操作。

17, -, 維圖爾

vue多功能集成插件，包括：句型高亮、智能提示、emmet、錯誤提示、低格式、手動補全、。 官方Vue插件，Vue開發(fā)者必備。

19. /Redux//反應-

React/Redux/react- 智能提示。

20.: 小程序支持

小程序開發(fā)必備插件。

21.代碼低格式

它是一個代碼低格式工具，只專注于低格式，但沒有校準功能。 在多人協(xié)作開發(fā)團隊中，統(tǒng)一的編碼標準非常重要。 一套規(guī)范可以讓我們編寫的代碼達到風格一致，增強代碼的可讀性和統(tǒng)一性。 自然保養(yǎng)也會得到改善。

22.：代碼格式校準

在日常開發(fā)中，建議將其作為底層代碼格式使用，然后用于標定。

23，

代碼低格式工具。

備注：相比之下，它是目前最流行的代碼底層工具，用的比它還多。

24.(ES6)代碼

ES6語句智能提示，支持快速輸入。

25.【推薦】

模塊上的文件夾和模塊太多，不好找。 好在安裝這個插件后，輸入快捷鍵“Cmd+Shift+P”，然后回車，在彈出的選項中選擇，搜索里面的模塊。

26.-：高亮代碼縮進

- 插件：高亮代碼縮進。

安裝完成后sublime text 格式化代碼快捷鍵，效果如右圖所示：

27. utils：快速復制log日志【推薦】

安裝此插件后，當我們按住快捷鍵“Cmd+Shift+L”時，可以手動出現(xiàn)log.log()。 簡直就是期刊黨的福音。

當我們選中一個變量名，然后按住快捷鍵“Cmd+Shift+L”，就可以手動顯示這個變量的日志了。 日志（名稱）。

其他類似的插件包括：。

但是對于生產環(huán)境中的代碼，還是盡量少打log，防止出現(xiàn)一些異常。

編程分為三個層次：

28. ：短語拼寫錯誤檢測

這個拼寫檢查器的目標是幫助捕捉短語的常見拼寫錯誤，并可以測量駝峰式大小寫。 從此再見。

29.本地【推薦】

維護文件的本地歷史記錄，強烈建議安裝。 當代碼意外丟失時，它有時可以挽救生命。

30.-2020：生成代碼截圖【推薦】

您可以將代碼片段保存為精美的圖片。 不同的主題有不同的代碼配色方案。 您還可以自定義圖片的邊框顏色、大小和陰影。

當我們在做PPT分享的時候需要用到代碼片段，或者需要堂堂正正的在網(wǎng)上分享代碼片段的時候，這個技巧就特別有用。

所得療效如下：

其他類似的插件： .我們也可以通過這個網(wǎng)站生成代碼圖片

可能有人會說：不能直接用截圖嗎？ 可以，但是不夠漂亮干凈。

31.圖片【推薦】

圖片預覽。 當鍵盤連接圖片url時，會手動顯示圖片預覽和圖片規(guī)格。

32、自動關閉標簽、自動標簽

手動關閉標簽并自動重命名標簽。

33.

為注釋添加更突出的分類基調。

34. CSS 查看

提高HTML和CSS的關聯(lián)性，快速查看元素上的CSS樣式。

35. Vue CSS 查看

不支持 Vue，此插件提供對 Vue 文件的支持。

36. 顏色信息

這個方便的插件將為您提供有關您在 CSS 中使用的顏色的相關信息。 只需將光標懸停在顏色上，即可在色塊中預覽顏色模型（HEX、RGB、HSL、CMYK）的相關信息。

37.

不要震驚，而且是同一作者開發(fā)的。

該插件的作用是：無需在本地下載代碼，即可在本地查看網(wǎng)站代碼。

目前使用該插件的人不多，趕緊安裝嘗鮮吧。

38. ：實時編碼分享

是官方出品的一款神奇插件。 它的功能是：實時編碼共享。 也就是說，它使您和您的同行能夠一起編寫代碼。 這絕對是結對編程的利器。

安裝方法：

打開插件管理，搜索“”，安裝即可。 安裝后重啟，兩邊會多出一個按鈕：

上圖中，點擊紅框，登錄后即可分享你的工作空間。

39.成本

在項目開發(fā)過程中，我們會引入很多npm包。 有時，可能只使用某個包中的一個方法，但引入了整個包，導致代碼量小得多。 Cost插件可以在代碼中友好的提醒我們當前導入的包會減少多少體積，對于幫助我們優(yōu)化代碼的體積有很大的幫助。

粘貼

該插件可以將剪貼板中的 JSON 字符串轉換為工作代碼。 支持多種語言。

8.常用主題插件

給你的 一個新的皮膚sublime text 格式化代碼快捷鍵，免費的。

操作：File（文件）-（首選項）-Color-Theme（顏色主題）

如有侵權請聯(lián)系刪除！