如何優雅地使用Sublime Text3

Sublime Text:一款具有代碼高亮、語法提示、自動完成且反應快速的編輯器軟件,不僅具有華麗的界面,還支持插件擴展機制,用她來寫代碼,絕對是一種享受。相比于難于上手的Vim,浮腫沉重的Eclipse,VS,即便體積輕巧迅速啟動的Editplus、Notepad++,在SublimeText面前大略顯失色,無疑這款性感無比的編輯器是Coding和Writing最佳的選擇,沒有之一。

Sublime Text 2和3的對比


相比于2,Sublime Text 3就秒啟動一項,就壓倒性地勝利了。因此在之后的敘述中都以Sublime Text 3為主角。并且3一直在不斷的完善更新,具體的差異可參看 Sublime Blog.簡單的說:
  • ST3支持在項目目錄里面尋找變量
  • 提供了對標簽頁更好地支持(更多的命令和快捷鍵)
  • 加快了程序運行的速度
  • 更新了API,使用Python3.3

強烈推薦朋友們使用3! 唯快不破,不解釋。

Sublime Text 3安裝插件


Sublime Text的強大就是她擁有強大的課可擴展性。您可根據自己的需要安裝不同的插件;這使得她變的無比強大的同時又不失輕便。
  • 插件安裝方式一:直接安裝:

安裝Sublime text 3插件很方便,可以直接下載安裝包解壓縮到Packages目錄(菜單->preferences->packages)。

  • 插件安裝方式二:使用Package Control組件安裝:

按Ctrl+`調出console(注:安裝有QQ輸入法的這個快捷鍵會有沖突的,輸入法屬性設置-輸入法管理-取消熱鍵切換至QQ拼音)粘貼以下代碼到底部命令行并回車:

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())

重啟Sublime Text 3。如果在Perferences->package settings中看到package control這一項,則安裝成功。按下Ctrl+Shift+P調出命令面板輸入install 調出 Install Package 選項并回車,然后在列表中選中要安裝的插件。

PS:國內使用SublimeText3,經常可能遇到無法安裝可用插件問題,可remove掉Package Control重新安裝下;如遇到連Package Control也無法安裝,則可以在別處拷貝一份關于Package Control的文件-(Package Control.sublime-package)存放于Installed Packages目錄之下即可。

Sublime Text 3插件推薦


無插件,不神器!根據自己的需要定制屬于自己的強大插件集;作為在移動端舊游之后,又Web端新游的自己,墻裂推薦以下這么幾款插件:

MarkDown Editing
SublimeText不僅僅是能夠查看和編輯 Markdown 文件,但它會視它們為格式很糟糕的純文本。這個插件通過適當的顏色高亮和其它功能來更好地完成這些任務。關于如何在SublimeText下高效些東西可參見文章:sublime text 2(3)下的Markdown寫作 抑或是前段時間寫下的追尋高效工作的一路折騰㈡

SideBarFolders
打開的文件夾都太多了? 來用這個來管理文件夾,世界原來也可以這么美好。


SideBarFolders


Sublime Terminal
這個插件可以讓你在Sublime中直接使用終端打開你的項目文件夾,并支持使用快捷鍵。

ColorPicker
通常,如果你想使用一個顏色選擇器則可能打開 Photoshop 或 GIMP。而在 Sublime Text 中,你可以使用內置的顏色選擇器。安裝完成后,只要按下Ctrl / Cmd + Shift + C 快捷鍵。

SublimeREPL
這可能是對程序員很有用的插件。SublimeREPL 允許你在 Sublime Text 中運行各種語言(NodeJS , Python,Ruby, Scala 和 Haskell 等等)。

Ctags插件
有童鞋抱怨Sublime Text不能支持函數的跳轉(比如像Eclipse那樣,按住Control點擊該方法或者對象,即可跳轉到定義的地方; Alt+←即可回到原處)。其實Sublime Text也可以借助插件實現之(當然,有些情況下:Can not find defination)畢竟這個也是借助正則來匹配完成的。因此這個也就要求代碼很規范。這個插件相對來講會有些麻煩,具體的可以參見:Sublime Text ctags 的配置.

SublimeLinter插件
SublimeLinter 是前端編碼利器——Sublime Text 的一款插件,用于高亮提示用戶編寫的代碼中存在的不規范和錯誤的寫法,支持 JavaScript、CSS、HTML、Java、PHP、Python、Ruby 等十多種開發語言。這篇文章介紹如何在 Windows 中配置 SublimeLinter 進行 JS & CSS 校驗。
比如寫例如像lua這樣的弱語言腳本代碼,有這個可以規避掉很多不該有的低級錯誤吧?當然這也需要你SublimeLinter安裝完畢之后再安裝一個SublimeLinter-lua即可。具體的使用可以參見:借助 SublimeLinter 編寫高質量的 JavaScript & CSS 代碼

SideBarEnhancements插件
SideBarEnhancements是一款很實用的右鍵菜單增強插件;在安裝該插件前,在Sublime Text左側FOLDERS欄中點擊右鍵,只有寥寥幾個簡單的功能;安裝了就相當于給其豐了大胸一般。更強大的是,該插件還能讓我們自定義快捷鍵呼出某個瀏覽器以預覽頁面!這樣就不用到項目目錄下尋找和拖動到特定瀏覽器中預覽了。
安裝此插件后,點擊菜單欄的preferences->package setting->side bar->Key Building-User,鍵入以下代碼:

[   { "keys": ["ctrl+shift+c"], "command": "copy_path" },//chrome{ "keys": ["f2"], "command": "side_bar_files_open_with","args": {"paths": [],"application": "C:\\Users\\jeffj\\AppData\\Local\\Google\\Chrome\\Application\\chrome.exe","extensions":".*"}}
]

這里設置按Ctrl+Shift+C復制文件路徑,按F2即可在Chrome瀏覽器預覽效果(如果需要的話,也可以根據自己的需要為Firefox,Safari,IE,Opera等加上),當然你也可以自己定義喜歡的快捷鍵,最后注意代碼中的瀏覽器路徑要以自己電腦里的文件路徑為準。

HTML-CSS-JS Prettify
一款集成了格式化(美化)html、css、js三種文件類型的插件,即便html,js寫在PHP文件之內。插件依賴于nodejs,因此需要事先安裝nodejs,然后才可以正常運行。插件安裝完成后,快捷鍵ctrl+shift+H完成當前文件的美化操作。插件對html、css文件的美化不是非常滿意,但還可以,后面將說明如何修改css美化腳本。本人用起來超級爽的,鑒于篇幅,就不贅述,可以參見這篇介紹。

CSScomb CSS屬性排序:
有時候看看自己寫的CSS文件,會不會覺得屬性很亂查找不易維護難?CSScomb可以按照一定的CSS屬性排序規則,將雜亂無章的CSS屬性進行重新排序。選中要排序的CSS代碼,按Ctrl+Shift+C,即可對CSS屬性重新排序了,代碼從此簡潔有序易維護,如果不款選代碼則插件將排序文件中所有的CSS屬性。當然,可以自己自定義CSS屬性排序規則,打開插件目錄里的CSScomb.sublime-settings文件,更改里面的CSS屬性順序就行了。因為這個插件使用PHP寫的,要使他工作需要在環境變量中添加PHP的路徑,具體請看github上的說明。

SublimeTmpl 快速生成文件模板
一直都很奇怪為什么sublime text 3沒有新建文件模板的功能,像html頭部的DTD聲明每次都要復制粘貼。用SublimeTmpl這款插件終于可以解脫了,SublimeTmpl能新建html、css、javascript、php、python、ruby六種類型的文件模板,所有的文件模板都在插件目錄的templates文件夾里,可以自定義編輯文件模板。
SublimeTmpl默認的快捷鍵:

ctrl+alt+h html
ctrl+alt+j javascript
ctrl+alt+c css
ctrl+alt+p php
ctrl+alt+r ruby
ctrl+alt+shift+p python

如果想要新建其他類型的文件模板的話,先自定義文件模板方在templates文件夾里,再分別打開Default (Windows).sublime-keymap、Default.sublime-commands、Main.sublime-menu、SublimeTmpl.sublime-settings這四個文件照著里面的格式自定義想要新建的類型,這里就詳細介紹了,請各位自己折騰哈~

Javascript-API-Completions:
支持Javascript、JQuery、Twitter Bootstrap框架、HTML5標簽屬性提示的插件,是少數支持sublime text 3的后綴提示的插件,HTML5標簽提示sublime text3自帶,不過JQuery提示還是很有用處的,也可設置要提示的語言。


sublime-jq-plugin

SFTP:快速編輯遠程服務器文件
在Win下用XftpWinScp,被這種需要切換點擊or F5刷新的手動操作蛋疼到無語;故此一遇見這SFTP,頓覺這世界都美好了許多。當然Sublime下面也有些其他同步插件,比如FtpSnyc,但是配置起來的錯誤提示一點都不人性化,就毫不留情的舍棄了。Sublime下有SFTP,只要Ctrl+S即可同步本地到服務器,妥妥的爽歪歪有么有?如何配置,請參見在 Sublime Text中使用 SFTP 插件快速編輯遠程服務器文件;如欲使用FtpSync可參見Sublime使用及FtpSync遠程同步;大道至簡,因簡而悅;開心壘碼,值得折騰。

WakaTime -- 記錄你的Code時間;
WakaTime可以做到精確地統計到你花在某個項目上的時間;WakaTime針對不同的IDE,擁有不同的插件,在Sublime上安裝著插件,就能統計到我使用Sublime進行的所有項目的行為。可以高效管理和知曉自己code時間;并且,統計完善, 適合發朋友圈裝逼(如果你喜歡的話)~

Waka的基本設計和rescuetime類似。每個人注冊完將獲取一個key,裝一個客戶端,把key輸進去(登陸是同一個道理),然后它就把本地的所有行為帶個key扔給服務器來統計,一段時間之后給你個報表。不過Waka做的真的很精準,精確到每一個文件用了多少秒,每一種語言用了多少時間。



安裝和使用都很簡單,請參見這里。另外一篇比較詳細的文章時間都去哪了?用RescueTime和WakaTime來記錄你的時間,對RescueTime和WakaTime有一個更為詳細的敘述,可以一讀。

Doc?Blockr: 代碼塊注釋
可以快速的對函數進行注釋。保持代碼規范。支持多種語言,有 JavaScript (including ES6), PHP, ActionScript, Haxe, CoffeeScript, TypeScript, Java, Apex, Groovy, Objective C, C, C++ and Rust.

  • /*:回車創建一個代碼塊注釋
  • /**:回車在自動查找函數中的形參等等。

它會生成 JSDoc 格式的注釋。如果你從沒有使用過類似的工具,DocBlockr 會讓你覺得以前沒有它是如何寫代碼的。幫助你創造你的代碼注釋,通過解析功能,參數,變量,并且自動添加基本項目;如果你愿意其更為便捷,不妨再結合AutoHotKey,高效注釋,由此開啟。

sublime-text-git: Git 版本控制
可視化的操作:幫助你與你的Git repo協議進行交互。它支持很多命令像init,push, pull, branch, stash,等等。使用它當然提前需要安裝 Git,并做好響應的配置;對于這個插件,不妨看下這篇文章Using Git Inside of Sublime Text to Improve Workflow,相信她的伴隨不會讓你失望的。

advancedNewFile: 快速創建文件
當我們在 Sublime Text 編輯器里我們可以通過快捷鍵command+n(win: ctrl+n),來新建一個文件,然后command+s(Win:ctrl+s)進行彈出保存框,填寫文件名進行保存。還是老問題,麻煩!!我們接下來就通過安裝advancedNewFile插件來提升我們在Sublime Text編輯器下的創建文件速度。

關乎其使用,安裝完成之后,運用快捷鍵command+alt+n(win: ctrl+alt+n)
,Sublime Text底部會彈出輸入框;我們只需在這個輸入框里輸入我們需要新建的文件名回車即可(我們甚至可以帶路徑,譬如:src/components/perfect.vue;這就會在當前項目目錄下,建立該文件;需要注意的是這路徑前面不可加 '/', 這會使得建立的路徑成為用戶目錄,而非改項目目錄)。默認情況下文件會存儲在當前目錄,如果當前沒有目錄,會存儲在用戶的家目錄。


剩下些許其他的可以按需安裝的插件,比如:

  • ConvertToUTF8 支持 GBK, BIG5, EUC-KR, EUC-JP, Shift_JIS 等編碼的插件
  • Bracket Highlighter 用于匹配括號,引號和html標簽。對于很長的代碼很有用。安裝好之后,不需要設置插件會自動生效
  • DocBlockr 可以自動生成PHPDoc風格的注釋。它支持的語言有Javascript, PHP, ActionScript, CoffeeScript, Java, Objective C, C, C++
  • <font color="purple">Emmet(Zen Coding)</font>快速生成HTML代碼段的插件,強大到無與倫比:可以超快速編寫HTML/CSS/JS,當然這個插件還支持多種編譯環境,如常見的:Eclipse/Aptana、Coda、Notepad++、Adobe Dreamweaver、TextMate等,web開發必備!!!
  • jsFormat 格式化js代碼,懂者自懂;強迫癥Coder必備!默認快捷鍵Ctrl+Alt+F。
  • phpFormat 格式化php代碼,懂者自懂;強迫癥Coder必備!
  • CSS Compact Expand CSS屬性展開收縮:寫CSS的盆友,喜歡將其寫多行還是一行(個人喜歡將其格式化為多行)?如果閱讀別人的代碼不符合自己的習慣,可以用CSS Compact Expand這個插件將CSS格式化一下,按 Ctrl+Alt+[ 收縮CSS代碼為一行顯示,按 Ctrl+Alt+] 展開CSS代碼為多行顯示;強迫癥Coder必備!。
  • Autoprefixer插件:這是一款CSS3私有前綴自動補全插件;該插件使用CanIUse資料庫(當然,SublimeText自然也有<font color="purple">CanIUse</font>這個插件咯),能精準判斷哪些屬性需要什么前綴,與CssComb插件一樣,該插件也需要系統已安裝Node.js環境;使用方法:在輸入CSS3屬性后(冒號前)按Tab鍵即可。
  • YUI Compressor:壓縮JS和CSS文件,按F7鍵后,若壓縮當前文件(demo.js),則壓縮后的文件(demo.min.js)保存在該文件的同級目錄,需要安裝java的JDK。使用方法:YUI Compressor
  • ClickableURLs:可點擊的URL
    使用小插件ClickableURLs可以讓文件中的URL能夠點擊。
  • Vue Syntax Highlight: Vue(*.vue)高亮插件;于前端而言,使用Vue框架開發,是一個很酷爽的存在,那么此插件也就很有必要擁有;同時Jade,SASS等插件也是很有擁有的必要,誰用誰知道(說到用vue, 這vue-cli就蠻有使用的必要了( Webpack, Eslint, Test等都配置完善,十分貼心); 而寫Js代碼,于稍大項目 Eslint 就很有使用必要,而 sublime 在針對使用 Eslint 的*.vue文件,目測還沒有很好格式化插件,坐等誕生)。
  • 終極王道:自己編寫專用的Sublime Text插件。雖然說各個方面比如移動端,Web前段,服務器端,非Coder的Writer所需要的方便已經被集成在了不同的插件中。但譬如,需要快捷打開PC端的某個模擬器,便捷的進行某些校驗,只要你想的到的基本都可以將其在插件內,以快捷鍵處理之。至于如何編寫SublimeText插件,請參看這里編寫自己的Sublime Text2 插件

    定制屬于自己的快捷鍵

    • 首先要會使用SublimeText內置的快捷鍵:
      比如 Commond Shift P 打開命令面板:例如打開Package Control安裝各種插件;可以可以輸入Set(Snytax)來改變使用的語言環境,瞬間切換等等。
    • 設置快捷鍵。在SublimeText里,打開Preferences -> Key Bindings - User,我設置的快捷鍵:
        [{ "keys": ["ctrl+f9"], "command": "build" },{ "keys": ["f10"], "command": "build", "args": {"variant": "Run"} },{ "keys": ["ctrl+shift+x"], "command": "toggle_comment", "args": { "block": true } },]
      具體可參見這邊文章Sublime Text3 快捷鍵匯總及設置快捷鍵配置環境變量
    • 定制屬于自己的專屬快捷鍵:
      比如就拿定制Sublime Text(2/3)編譯lua 的快捷鍵來說:

      • 首先:下安裝lua環境(MAC)

        curl -s https://raw.githubusercontent.com/rudix-mac/rpm/2014.10/rudix.py | sudo python - install rudix或者:curl -O https://raw.githubusercontent.com/rudix-mac/rpm/2014.10/rudix.py
        sudo python rudix.py install rud
      • 安裝IED:SublimeText3;完畢后上面選擇:Build System--New Build System 輸入:

          {  "cmd": ["/usr/local/bin/lua", "$file"],  "file_regex": "^(...*?):([0-9]*):?([0-9]*)",  "selector": "source.lua"  }

        保存為Lua.sublime-build,然后Tools-Build System上就能選擇lua來編譯腳本了)
        PS:網上找到的大多數都是 "cmd": ["lua", "$file"]可能我是用rudix自動來安裝lua的,需要改一下路徑。

        新建一個xx.lua文件,隨便寫個語句,選擇lua為build system,按一下command+b,就能跑出來了。 如下圖所示:


        LuaShortCutSublimeText


        WindowS下面的定制請參看這里Sublime Text(2/3)編譯lua

    Sublime不可不知的實用技巧:


    ---更新2015.05.21 15:50 ShenZhen@nanshan
    對于這個依賴于插件的強大性感無比開源編輯器;優雅的適用之,就在于合理的使用需要的插件,走一條快準狠的鍵盤一刀流。這個當然可以自己用python來寫,但是一般的需求基本上都已經有人完成,還是不浪費時間自己造輪子了。今兒就再贅述一些使用的經驗,讓使用她可以更加優雅。

    (1) Ctrl+O(Command+O)可以實現頭文件和源文件之間的快速切換
    (2) 通過 View -> Side bar 可在左側顯示當前打開的文件列表

    (3) ST3雖然不像notepad++可以在sidebar上顯示函數列表,但是可通過Ctrl+R查看

    (3) 通過 Preference -> Key binding user 可根據個人操作習慣自定義快捷鍵(包括ST3自帶的和插件的)

    (4) 雙擊可選中光標所在單詞,三擊可選中光標所在行(等同于Ctrl+L(Command+L));

    (5) Ctrl+Shift+T可以打開之前關閉的tab頁,這點同chrome是一樣的

    (6)Ctrl+R定位函數;Ctrl+G定位到行;

    (7) 單個文件批量修改:純相同的內容:選中需要修改的內容Alt+F3(Mac下默認的是Ctrl+Command+G) , 或者連續 Ctrl+D(Win) /連續 Command+D(Mac)之后重新寫即可,使用Ctrl + U進行回退,使用Esc退出多重編輯。不純相同卻有一定規律可循的內容:這個就需要借助SublimeText強大正則的支持了。可以使用Ctrl+H(Mac下是Alt+Command+F)調出:


    SublimeText


    正則表達式是非常強大的文本查找&替換工具,Sublime Text中使用Alt + R切換正則匹配模式的開啟/關閉。Sublime Text的使用Boost里的Perl正則表達式風格。鑒于篇幅,加之本身就對這個不甚熟悉,這里就不再多啰嗦;以下是一些可以參考的文章:

    • 開源中國~正則表達式30分鐘入門教程
    • 59分鐘學會正則表達式
    • MSDN~正則表達式語法
    • 月光博客~常用正則表達式

    (8) 有時我們需要對一片區域的所有行進行同時編輯,Ctrl+Shift+L可以將當前選中區域打散,然后進行同時編輯:


    SublimeText

    (9)有打散自然就有合并,Ctrl + J(mac下Command+J)可以把當前選中區域合并為一行:


    SublimeText

    (10)在Ctrl + P(Command+P)匹配到文件后,我們可以進行后續輸入以跳轉到更精確的位置:

    • @ 符號跳轉:輸入@symbol跳轉到symbol符號所在的位置
    • # 關鍵字跳轉:輸入#keyword跳轉到keyword所在的位置
    • : 行號跳轉:輸入:12跳轉到文件的第12行。

    (11)Ctrl + Enter(Mac~Command+Enter)在當前行下面新增一行然后跳至該行;Ctrl + Shift + Enter在當前行上面增加一行并跳至該行。

    (12)Sublime Text的查找有不同的模式:Alt + C切換大小寫敏感(Case-sensitive)模式,Alt + W切換整字匹配(Whole matching)模式,除此之外Sublime Text還支持在選中范圍內搜索(Search in selection),這個功能沒有對應的快捷鍵,但可以通過以下配置項自動開啟。

    "auto_find_in_selection": true

    這樣之后在選中文本的狀態下范圍內搜索就會自動開啟,配合這個功能,局部重命名(Local Renaming)變的非常方便:


    SublimeText

    (13)Windows下Ctrl + ←/→進行逐詞移動,相應的,Ctrl + Shift + ←/→進行逐詞選擇。


    SublimeText


    而Mac下的Command+←/→是從一端移動到另一端;相應的,Command + Shift + ←/→是從一端選擇到另一端。

    (14) Windows下Ctrl + ↑/↓移動當前顯示區域,Ctrl + Shift + ↑/↓移動當前行。


    SublimeText


    而Mac下的Command + ↑/↓是從當前行移動到頭/尾;相應的,Command + Shift + ↑/↓是從當前行選擇到頭/尾;

    (15)使用Ctrl + N在當前窗口創建一個新標簽,Ctrl + W關閉當前標簽,Ctrl + Shift + T恢復剛剛關閉的標簽。

    (16)編輯代碼時我們經常會開多個窗口,所以分屏很重要。Windows下:Alt + Shift + 2進行左右分屏,Alt + Shift + 8進行上下分屏,Alt + Shift + 5進行上下左右分屏(即分為四屏)。

    (17)Sublime Text基本的手動格式化操作包括:Ctrl + [向左縮進(等同于將一塊選中Shift+Tab),Ctrl + ]向右縮進(等同于將一塊選中后Tab鍵),注解: Ctr+[ 和 Ctr+[ 針對一塊連續內容使用,無需選中;此外Ctrl + Shift + V可以以當前縮進粘貼代碼(非常實用)。

    (18) Ctrl+Shift+V(好吧,嘗試了下Windows下的這個,目測不行,看來須得安裝下Clipboard-history插件~(粘貼板歷史記錄)才行啊)(Mac下Command+Shift+V),粘貼之時可以調出之前粘貼過的內容(以一個輕量彈框顯示以供選擇),哇哦,才發現這個功能,感覺棒棒噠



    SublimeText

    (19) Sublime text 刪除插件步驟:“Ctrl+Shift+P”—“Remove Package”—“找到需要刪除的插件,并點擊即可刪除”;

    (20) 作為強大而小巧,性感且快捷的SublimeText,怎么能夠允許不時彈個框提醒你購買或者別的,并且頂部有未注冊這樣破壞美感的存在呢?OK,輸入Sublime text 3最新版破解方法中提供的注冊碼,就妥妥的哦了。

    定制屬于自己的個性化主題


    SublimeText 她不僅僅是作為性感無比,強大可大編輯器的存在;要知道在如今這么靠臉吃飯的時代,她的美者這方面怎么可能不臻至完美呢?Mac和Windows都默認十多種不同風格的主題,想必會有您喜歡的。即便沒有也沒關系,我們可以自己定制自己喜歡的風格主題。在線制作專屬Sublime Text主題。這個網址可以輕松按照自己的意愿制作喜歡的主題。完畢之后將生成的xx.sublime.theme文件,點開Preferences -> Browsr Packages這個,放在這個直屬目錄之下,即可在Theme處選擇這個主題了,親測沒有問題。

    后記:作為如此便捷的她(Sublime Text3),值得分享肯定不止這些,在Coding and Writing路上,要繼續去發現和發揚她的美,未完待續...
    --寫于2015.04.17 22:49 ShenZhen@nanshan


    Sublime錦上添花些許設置


    ---更新2015.08.31 11:59 ShenZhen@nanshan---

    Sublime Text內運行javascript(ES6)

    首先安裝nodejs

    當然你可以使用其它諸如jsc之類的環境來運行js, 本文使用的是nodejs. 首先確保你的電腦已經安裝好nodejs, 并已將其添加到環境變量中 (一般安裝時自動添加或者詢問是否添加)

    添加build system

    在sublime text中依次打開Tools -> Build System -> New Build System... 粘貼以下代碼后保存(如Node.sublime-build), 然后把Build System設成Automatic
    { "cmd": ["node", "--use-strict", "--harmony", "$file"], "selector": "source.js"}

    附加說明

    在以上的build文件中(Node.sublime-build), node是執行命令, --harmony和--use-strict是執行參數, $file是當前文件名, 所以一次build操作實際上相當于在命令行中執行了node --use-strict --harmony filename
    . --harmony表示啟用ES Harmony features, 而這些features目前只能在strict模式下運行, 所以需要同時添加use-strict參數(詳見what-is-extended-mode).
    如果不想啟用es6的特性,把build文件更改成以下代碼保存即可.
    { "cmd": ["node", "$file"], "selector": "source.js"}

    具體使用

    在sublime test中新建一個test.js文件, 然后輸入你的測試代碼, 比如:

    for (let i = 0; i < 3; i++) {console.log('i:', i);
    }

    使用快捷鍵 ctrl + b
    , 將得到以下執行結果:

    i: 0i: 1i: 2[Finished in 0.1s]

    溫馨注解:

    • (1)文件必須是存在于磁盤中的, 而不是untitled的, 否則sublime無法找到相應的文件.
    • (2)Nodejs安裝目錄需要加入path環境變量中,否則Ctrl+B運行 會出現:[WinError 2] 系統找不到指定的文件。

    更換Sublime Text程序圖標

    不僅主題可以更換,圖標也可以。在Dribbble上有大量重新設計的Sublime Text精美圖標。更換方法:

    1. 下載一個圖標,有.icns格式的最好。如果沒有,用iConvert轉換之。
    2. 終端執行:open /Applications/Sublime\ Text.app/Contents/Resources/
    3. 替換Sublime Text 3.icnsSublime Text 2.icns文件。

      Sublime

    Sublime 拼寫檢查

    如果你經常使用SublimeText從事英文創作,那么啟用拼寫檢查就非常有用處了。選擇Preferences > Settings – User菜單,添加以下代碼:

    "spell_check": true,?

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/247856.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/247856.shtml
英文地址,請注明出處:http://en.pswp.cn/news/247856.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

題目:有一分數序列:2/1,3/2,5/3,8/5,13/8,21/13... 求出這個數列的前20項之和。...

題目&#xff1a;有一分數序列&#xff1a;2/1&#xff0c;3/2&#xff0c;5/3&#xff0c;8/5&#xff0c;13/8&#xff0c;21/13... 求出這個數列的前20項之和。 程序分析&#xff1a;請抓住分子與分母的變化規律。 public class 第二十題求數列之和 {public static void mai…

iview 組件 設置頭像更換

基于iview 組件 設置頭像更換 <!-- 頭像更換 --><div style"width: 100%;height:100%;"><div style"height: 100%;"><Upload :on-success"uploadSuccess" :show-upload-list"false" accept"image/png, i…

HTML的target屬性中_blank、_self、_parent、_top含義

_blank 瀏覽器會另開一個新窗口顯示鏈接_self&#xff0c;在同一框架或窗口中打開所鏈接的文檔。 此參數為默認值&#xff0c;通常不用指定。 _parent&#xff0c;將鏈接的文件載入含有該鏈接框架的父框架集或父窗口中。 如果含有該鏈接的框架不是嵌套的&#xff0c;則在瀏覽…

Windows 聚焦的鎖屏壁紙設置為桌面壁紙

需求&#xff1a; Windows的鎖屏壁紙偶爾遇到非常喜歡的壁紙&#xff0c;想設置為桌面壁紙。 步驟如下&#xff1a; 1. “Windows 聚焦”的鎖屏壁紙都保存在隱藏文件夾 --- Assets里。 a. 打開“資源管理器 b. 在地址欄復制粘貼下方路徑后按回車鍵&#xff0c;即可快速跳轉至這…

VUE藥監碼掃描

<!-- 藥監碼 --><div class"divContent"><div class"headDiv"><div class"spanA">請掃描相關藥監碼</div></div><button class"scanBtn" clickscan_img()>掃描藥監碼</button><bu…

Chrome 控制臺的console用法收集

Chrome 控制臺console的用法 大家都有用過各種類型的瀏覽器&#xff0c;每種瀏覽器都有自己的特色&#xff0c;本人拙見&#xff0c;在我用過的瀏覽器當中&#xff0c;我是最喜歡Chrome的&#xff0c;因為它對于調試腳本及前端設計調試都有它比其它瀏覽器有過之而無不及的地方。…

面向對象思想封裝狙擊手狙擊敵人

需求&#xff1a;狙擊手xxx使用xx槍&#xff0c;射擊敵人xxx,敵人生命值歸0&#xff0c;應聲倒下分析設計類&#xff1a; 封裝狙擊手類 屬性&#xff1a; 名字 行為&#xff1a;撿槍   裝彈   射擊封裝槍類 屬性&#xff1a; 型號 行為&#xff1a;射擊封裝彈夾類 屬性&…

JavaScript 字符串處理方法總結

變量從字符串轉換成int和float型 var weightincrease "2.5kg";undefinedparseInt(weightincrease);2parseFloat(weightincrease);2.5 字符串處理方法var words "魚神是個帥哥";undefinedwords.length6words.charAt(0);"魚"words.charAt(words.…

【js】vue 2.5.1 源碼學習(二) 策略合并

一、 整體思路1 首先是代碼的大體構造&#xff0c;先判斷引入代碼的環境&#xff0c;即對應amd 和cmd的處理2 vue_init 需要借助 initMinxin >>> // 初始化選項1: 規范 2: 合并策略。3 mergeOptions 選項合并 一個或者多個對象合并&#xff0c;并且生成一個…

解決公眾號的加載問題

相關組件內設置的方法&#xff08;方法可以多處組件運用&#xff09; <x-input on-change"changeinp" on-blur"temporaryRepair();" on-enter"temporaryRepair();" name"mobile" :show-clear"false" placeholder"…

JavaScript 數組處理方法總結

數組處理方法//定義數組var array [];undefined//查看類型typeof(array);"object"//往數組里添加數據array [first,second,third]["first", "second", "third"]//數組長度array.length3//索引array[0]"first"//添加數組新…

今天第一次開通blog

紀念第一次開通轉載于:https://www.cnblogs.com/struggle-star/p/10960491.html

前端設置,驗證碼登錄

<group class"shadow" gutter"0"><x-input v-model"mobileCaptcha" placeholder"請輸入手機驗證碼" class"weui-vcode" keyboard"number" :max"6"></x-input><button click"…

JQuery實現頁面跳轉

$(function(){ var pn $("#gotopagenum").val();//#gotopagenum是文本框的id屬性 location.href "NewList.aspx?pagenum"pn;//location.href實現客戶端頁面的跳轉 }); 今天我們就來說一說如何在jQuery中跳轉到另外一個網頁HTML。其實下面我列舉的幾…

pycharm安裝lxml

今天下午剛學爬蟲&#xff0c;要安好多庫的感覺&#xff0c;崩潰 requests 首先我們用pip安裝完成后&#xff0c;在pycharm里面還要導入進去&#xff0c;沒有的話是會報錯的 文件--設置--Project Interpreter 然后點擊pip進去&#xff0c;搜索requests&#xff0c;再安裝進去就…

JS生成動態表格并為每個單元格添加單擊事件的方法

<html><head><title>Demo</title><script>function getColumnDetail(column) {column.style.color "blue"; //將被點擊的單元格設置為藍色 alert(column.innerHTML); //彈出被點單元格里的內容 }<!--trLineNumber為動態表格行數&a…

6.1團隊第二階段沖刺(七)

燃盡圖&#xff1a; 任務板: 會議照片&#xff1a; 昨天完成了管理員對發布人的查詢功能&#xff0c;條件查詢功能以及一系列常用小功能 今天完成了功能說明部分及其那部分界面美化&#xff0c;所有界面的退出以及回到首頁的功能及首頁美化等 明天打算做信息分頁顯示&#xff0…

Jquery 獲取日期date()對象,jquerydate

Jquery 獲取日期date()對象&#xff0c;jquerydate 獲取JavaScript 的時間使用內置的Date函數完成 var mydate new Date(); mydate.getYear(); //獲取當前年份(2位) mydate.getFullYear(); //獲取完整的年份(4位,1970-????) mydate.getMonth(); //獲取當前月份(0-11,0代表…

redis的安裝和使用【2】redis的java操作

1、前提約束熟悉redis的命令行操作 https://www.jianshu.com/p/26f6e85e600f修改redis.conf# 配置綁定ip&#xff0c;作者機子為192.168.100.192&#xff0c;請讀者根據實際情況設置bind 192.168.100.192#非保護模式protected-mode no保存重啟 2、操作2.1 使用idea創建一個mave…

Vue多字段下的非空判斷(new Promise)

// 利用 ref 獲取相關組件中的數值checkInfo(){let Insured this.$refs.Insured.mastdata; //參保量let technology this.$refs.drugs.mastdata; //技術let business this.$refs.business.mastdata; //商務return new Promise((resolve,reject) > {if (!Insured.usern…