Sublime Text的使用代碼塊安裝的模組

標籤：storm   寫代碼   debug   顯示   選中   isa   show   script   項目   

在眾多的開發工具IDE當中。作者現在唯獨深愛sublime text(以下簡稱st)。以前做後台開發使用visual studio(以下簡稱vs),以及實行前後端分工也是配合後台使用vs.這裡要講述兩個概念：前後端分離與前後端分工。分離是指：前端獨立完成搭建前端系統。資料只需要後端提供API介面調用即可。前端渲染HTML頁面（俗稱前端開發工程師）。分工是指按照設計切成靜態頁面，寫一些互動js,配合後端完成項目開發。服務端渲染HTML頁面（俗稱頁面仔）。在全職做前端的時候，也嘗試使用webstorm(以下簡稱ws)，在學校偶爾用過dreamweaver(以下簡稱dw)。個人感覺dw的介面醜陋不堪。一點都沒有逼格。作為一名前端開發工程師，當然要選用逼格高一點的開發工具。目前前端開發工具比較出名的使用比較普遍的也就是st和ws了。現在說說st的優點：1.介面炫酷。2.醒目提示好看。3.輕量小巧。作者語錄：裝逼從點滴開始，從現在開始。從開發工具開始。寫代碼一定要風騷。作為一名逼格高的程式猿，必須要有好的開發工具。正如高手都有一把屬於自己的武器。驚羽的斬龍劍。小凡的攝魂棍，雪琪的天琊神劍。書書的武器那是百寶箱啊。青雲f4.

一、Package Control的安裝

在st所有的外掛程式當中。一定要先安裝package control。可以理解為外掛程式安裝包的管理器吧。所有的外掛程式都是通過這這裡面下載安裝的。

1.按下Ctrl + ~ 調出st的控制台

2.複製以下代碼到控制台

   a.適合st3:

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

 

  b.適合st2:

import urllib2,os; pf=‘Package Control.sublime-package‘; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler( ))); open( os.path.join( ipp, pf), ‘wb‘ ).write( urllib2.urlopen( ‘http://sublime.wbond.net/‘ +pf.replace( ‘ ‘,‘%20‘ )).read()); print( ‘Please restart Sublime Text to finish installation‘)

3.按下Ctrl + Shift + p 輸入pci選中Install Package斷行符號。會彈出一個輸入框。以後的外掛程式都在這裡面安裝。有時候調出輸入框的時候很久。注意下面狀態列的=符號來回跑動說明正在處理當中

二、SVN外掛程式的安裝

在項目開發當中怎麼少得了svn的使用。除非你一個人能開發完成項目

1.前提是你電腦當中已安裝svn。這裡相當於設定快速鍵調用svn

2.複製以下代碼到控制台（Ctrl + ~）

   a.適合st3:

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(‘ ‘,‘ ‘)).read())

   b.適合st2:

import  urllib2,os;pf=‘Package Control.sublime-package‘;ipp=sublime.installed_packages_path();os.makedirs(ipp)ifnotos.path.exists(ipp)elseNone;urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler()));open(os.path.join(ipp,pf),‘wb‘).write(urllib2.urlopen(‘http://sublime.wbond.net/‘+pf.replace(‘ ‘,‘ ‘)).read());print(‘Please restart Sublime Text to finish installation‘)

3.在網上下載SubLime Texe2/3的SVN外掛程式

4.點擊Preferences - 瀏覽資源套件

5.在檔案總管中。建立svn檔案夾。將下載好的svn外掛程式放入到svn檔案夾裡面

6.在專案檔右鍵外掛程式是否有svn commit ，svnupdate 檢驗是否安裝成功

三、代碼語法檢查外掛程式

1.按下 Ctrl + Shift + p輸入pci選中Install Package斷行符號

2.輸入sublimeLinter進行安裝

3.安裝完成後繼續按下 Ctrl + Shift + p輸入pci選中Install Package斷行符號。

4.輸入SublimeLinter-jshint進行安裝

5.由於jshint組件依賴於nodejs裡面的jshint.所以在nodejs環境下必須全域安裝jshint.  在cmd視窗執行 npm install -g jshint  使用jshint -v 查看其版本檢驗是否安裝成功

6.如果沒有安裝nodejs環境，上面第五點是運行不起的。接下來簡要說明一下安裝nodejs環境。如果已安裝可忽略直接下一步

   a.進入官網下載相應的系統。下面以window為例

   b.進行傻瓜式的下一步操作直到完成。

   c.記住要配置環境變數

   d.使用node -v && npm -v 查看其版本檢驗是否安裝成功

7.安裝css代碼校正也是同樣。進入外掛程式庫裡面安裝sublimeliter-csslint外掛程式

8.nodejs環境下也要安裝csslint。在cmd視窗執行 npm install -g csslint

9.配置：在preferences-Pageckage Settings-SublimeLinter-Settings-User粘貼下面代碼就OK

{    "user": {        "debug": false,        "delay": 0.25,        "error_color": "D02000",        "gutter_theme": "Packages/SublimeLinter/gutter-themes/Default/Default.gutter-theme",        "gutter_theme_excludes": [],        "lint_mode": "background",        "linters": {            "jshint": {                "@disable": false,                "args": [],                "excludes": []            }        },        "mark_style": "outline",        "no_column_highlights_line": false,        "passive_warnings": false,        "paths": {            "linux": [],            "osx": [],            "windows": []        },        "python_paths": {            "linux": [],            "osx": [],            "windows": []        },        "rc_search_limit": 3,        "shell_timeout": 10,        "show_errors_on_save": false,        "show_marks_in_minimap": true,        "syntax_map": {            "html (django)": "html",            "html (rails)": "html",            "html 5": "html",            "javascript (babel)": "javascript",            "magicpython": "python",            "php": "html",            "python django": "python",            "pythonimproved": "python"        },        "warning_color": "DDB700",        "wrap_find": true    }}

 四、定製一段代碼塊

 1.tools - 建立程式碼片段(New Snippet)

 2.你會看到以下代碼，首先不要懵逼

<snippet>    <content><![CDATA[Hello, ${1:this} is a ${2:snippet}.]]></content>    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->    <!-- <tabTrigger>hello</tabTrigger> -->    <!-- Optional: Set a scope to limit where the snippet will trigger -->    <!-- <scope>source.python</scope> --></snippet>

 解釋以上代碼

1 <snippet>2     <content><![CDATA[ 你需要插入的程式碼片段${1:name},test,${2} ]]></content>3     <!-- 可選：快速鍵，利用Tab自動補全代碼的功能 -->4     <tabTrigger>cygnet</tabTrigger>5     <!-- 可選：使用範圍，不填寫代表對所有檔案有效。附：source.css和test.html分別對應不同檔案。 -->6     <scope>source.js</scope>7     <!-- 可選：在snippet菜單中的顯示說明（支援中文）。如果不定義，菜單則顯示當前檔案的檔案名稱。 -->8     <description>My Fancy Snippet</description>9 </snippet>

${1:name}表示代碼插入後，游標所停留的位置，可同時插入多個。其中:name為自訂參數（可選）

${2}表示代碼插入後，按Tab鍵，游標會根據順序跳轉到相應位置（以此類推）。

3.儲存在\Packages\User目錄下（例 X:\Sublime Text 2.0\Data\Packages\User），檔案命名為cygnet-code，尾碼名.sublime-snippet。

4.開啟一個HTML檔案。輸入cygnet按下tab會自動產生你定製的代碼塊

 

 

Sublime Text的使用代碼塊安裝的模組