1. 程式人生 > >sublime3使用:自定義快捷鍵、外掛安裝、語法校驗(css和js)

sublime3使用:自定義快捷鍵、外掛安裝、語法校驗(css和js)

1.快捷鍵大全:

https://mp.csdn.net/postedit/84336764

2.新增快捷鍵:

例:ctrl+q

開啟sublime編輯器

preference>>key bindings-user>>編輯設定文件,

輸入 { "keys": ["ctrl+q"], "command": "reindent" },

儲存,然後快捷鍵ctrl+q就可以自動幫你整理程式碼了

3.外掛安裝:

按下 Ctrl+Shift+p 進入 Command Palette,搜尋對應的外掛進行安裝

外掛的安裝,刪除,更新:

1、開啟Sublime Text3 ,按Ctrl+`(和qq輸入法快捷切換衝突,可以修改qq的輸入法切換熱鍵)

2、複製粘黏以下程式碼新增至命令列,然後回車(功能:安裝外掛的工具,有了它,以後安裝其他外掛更方便)
import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())


3、重啟Sublime Text 3,檢視Perferences->package settings中是否有package control這一項,如果有,則安裝成功

4、至此,package control工具安裝成功。以後方便安裝、跟新、解除安裝Sublimit外掛啦。

package control 可以理解為Linux中的yum,或Composer映象工具

使用方法:

開啟Sublime Text 3,檢視Perferences->package settings中是否有package control這一項

安裝:Ctrl+Shift+P調出命令面板,在輸入框輸入Install Package ,找到下列對應的的提示,選擇 安裝包,進入安裝輸入框,需要網路載入,可能要 稍等片刻,彈出如下,在輸入框中輸入要下載的外掛名稱,在下提示列選擇確認要安裝的安裝包名,然後請耐心等 在網路下載,下載成功會在彈出改外掛的配置資訊,無需儲存,關閉即可。

並可在Perferences->package settings 中看到對應的包名。


如果想要刪除外掛,Ctrl+Shift+P調出命令面板,輸入remove,調出Remove Package選項並回車,選擇要刪除的外掛即可,當然,更新外掛,upgrade packages,通過簡單的幾個命令就可以方便的管理我們的外掛了
--------------------- 
作者:index_ling 
來源:CSDN 
原文:https://blog.csdn.net/index_ling/article/details/72967199 
版權宣告:本文為博主原創文章,轉載請附上博文連結!

轉載:https://blog.csdn.net/index_ling/article/details/72967199

4.語法校驗外掛:

安裝 SublimeLinter

如同其他外掛一樣使用 Package Control 來安裝。

  1. 按下 Ctrl+Shift+p 進入 Command Palette
  2. 輸入install進入 Package Control: Install Package
  3. 輸入SublimeLinter。進行安裝.

安裝完成後可以看到這樣一段話:

 

可以看到具體的 Linters 元件不被包含在 SublimeLinter 3 中,所以我們要額外獨立安裝元件。 
可以針對不同的語言安裝不同的元件。


JavaScript 語法檢查

SublimeLinter-jshint 是基於 nodeJS 下的 jshint 的外掛,實際上 SublimeLinter-jshint 呼叫了 nodeJS 中 jshint 的介面來進行語法檢查的。


安裝 SublimeLinter-jshint

為了讓 JavaScript 程式碼有語法檢查,我們安裝 SublimeLinter-jshint 
同樣的方法,我們安裝 SublimeLinter-jshint

  1. 按下 Ctrl+Shift+p 進入 Command Palette
  2. 輸入install進入 Package Control: Install Package
  3. 輸入SublimeLinter-jshint。進行安裝.

如下圖

安裝完成後告訴我們必須按照https://github.com/SublimeLinter/SublimeLinter-jshint的安裝指令來啟用外掛。

 

安裝 nodeJS 和 jshint

在外掛開始工作之前,我們必須再看一下上述外掛的安裝說明 
通過 SublimeLinter-jshint 的說明 我們可以看到,這個元件依賴於 nodeJS 下的 jshint,所以我們安裝 nodeJS 環境和 nodeJS 下的 jshint。

  1. 安裝 Node.js
  2. 通過 npm 安裝jshint

開啟安裝好的node.js command prompt,在命令列下輸入如下程式碼,完成安裝

 

安裝完成後命令列中出現如下的資訊,後面還有一堆看不懂的東西

 

以防萬一檢視 jshint 版本,確認安裝完成。

 

現在,恭喜你,我們使用 Sublime 編輯 JavaScript 檔案,就會有語法檢查了!

在編輯過程中,會有如下提示

 

黃色為警告,紅色為致命錯誤!


css 語法檢查

與 jshint 同理,SublimeLinter-csslint 也是基於 nodeJS 下的 csslint 的外掛,實際上 SublimeLinter-csslint 呼叫了 nodeJS 中 csslint 的介面來進行語法檢查的。


安裝 SublimeLinter-csslint

同樣的方法。

  1. 按下 Ctrl+Shift+p 進入 Command Palette
  2. 輸入install進入 Package Control: Install Package
  3. 輸入SublimeLinter-csslint。進行安裝

會出現同樣的提示,之後和前面一樣的操作在nodeJS下安裝csslint


在 nodeJS 下安裝 csslint

進入上述的 GitHub 地址,csslint 的說明頁。我們知道了和 jshint 一樣,csslint 也是基於 nodeJS 下的 csslint 來使用的。

這裡安裝 nodeJS 過程省略。 
只需用 npm 安裝 csslint 即可。

和前面完全一樣的方法:

現在,恭喜你,我們使用 Sublime 編輯 css 檔案,就會有語法檢查了!

檢查效果與jshint類似

(注意:半形全形無法被檢查出來,這語法檢驗個人覺得不好用,外掛解除安裝的方法上面也有。)

5.有時候出現按tab鍵程式碼不會自動補全的情況,可能是當前的編寫模式不是你想要的。

如下圖,顯示的是PHP模式,無論是寫html還是php程式碼都是會自動補全的,如果顯示的是html模式,那麼php程式碼將不會自動補全。

這個時候只需要ctrl+shift+p,開啟命令欄,輸入:set syntax:php就行了。(其他模式類似,幾乎所有操作都能在該命令欄裡完成)