1. 程式人生 > >sublime:一款神級web程式碼編輯器

sublime:一款神級web程式碼編輯器

我是一名web農農,下面是我使用的一些外掛或配置。

  1. 下載了sublime後首先要安裝的外掛:package control,它主要用來管理各種外掛。
    • View > Show Console 選單開啟控制檯
    • 輸入下面的命令安裝。(因為是國外的網站可能需要翻牆)
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())
  1. sublime外掛:Emmet

    • Emmet (前身為 Zen Coding) 是一個能大幅度提高前端開發效率的一個工具:基本上,大多數的文字編輯器都會允許你儲存和重用一些程式碼塊,我們稱之為“片段”。雖然片段能很好地推動你得生產力,但大多數的實現都有這樣一個缺點:你必須先定義你得程式碼片段,並且不能再執行時進行拓展。
    • Emmet把片段這個概念提高到了一個新的層次:你可以設定CSS形式的能夠動態被解析的表示式,然後根據你所輸入的縮寫來得到相應的內容。
      Emmet是很成熟的並且非常適用於編寫HTML/XML 和 CSS 程式碼的前端開發人員,但也可以用於程式語言。
  2. sublime外掛:SidebarEnhancements :對應前端開發來說,設定瀏覽器預覽很方便

    • 說明:這是一個側欄增強外掛,用於在瀏覽器中預覽程式碼效果。
      第一步:安裝sidebarEnhancements外掛。
      第二步:Preferences—Key Bindings—User.開啟這個選項。
      第三步:
      複製以下內容:
      [ //chrome
      { “keys”: [“f2”], “command”: “side_bar_files_open_with”,
      “args”: {
      “paths”: [],
      “application”: “C:/Program Files (x86)/Google/Chrome/Application/chrome.exe”,
      “extensions”:”.*”
      }
      },
      // firefox
      { “keys”: [“f3”], “command”: “side_bar_files_open_with”,
      “args”: {
      “paths”: [],
      “application”: “D:/Program Files (x86)/MozillaFirefox/firefox.exe”,
      “extensions”:”.*”
      }
      },
      // ie
      { “keys”: [“f4”], “command”: “side_bar_files_open_with”,
      “args”: {
      “paths”: [],
      “application”: “C:/Program Files/Internet Explorer/iexplore.exe”,
      “extensions”:”.*”
      }
      }
      ]
      第四步:儲存,可以預覽已經存在的檔案。
  3. SublimeLinter :用來提示錯誤語法
    Bracket Highlighter :顯示程式碼匹配

  4. sublime搭建開發環境:與wamp搭建PHP開發環境

    • 所需開發工具
      Wamp:Windows+Apache+MySQL+PHP整合執行環境
      sublime text 3:作為PHP的文字編輯器使用
    • 開始搭建開發環境
    • 第一步:先安裝wamp軟體,簡單快速。
    • 第二步:開啟sublime,找到”Tools—Build System—…”如下圖:

4.2.1.png

  • 第三步:找到PHP,如果沒有點選”New Build System”,輸入以下文字 輸入千萬不能出錯
{
"cmd": ["D:\\Program Files\\wamp\\bin\\php\\php5.5.12\\php.exe", "$file"],
"file_regex": "^(...*?):([0-9]*):?([0-9]*)",
"selector": "source.php"
}

引數解釋:cmd:wamp中PHP中的執行程式php.exe的路徑,注意格式。只需要替換這個引數即可。
其他引數現在不需要懂,知道即可,以後用多了會懂得。

  • 第四步:儲存指令碼檔案到 packages 資料夾下,我的儲存在packages/usr下面的名字是:php.sublime-build 。
  • 第五步:編寫幾段PHP程式碼,Ctrl+B即可build 。
  • 第六步:如果底部狀態列出現:no build system ,先檢查Tools——Build System下的環境有沒有選擇php模式,如果不是,有可能是第三步的指令碼寫錯了。

現在開始你可以任意的寫php程式,Ctrl+B 即可Build 。

附上sublime英文文件部分:

sublime-buildSystem.PNG