公告:攜程招聘java、前端、測試、產品等,請發簡歷至[email protected],幫內推!

前端神器-sublime text3插件安裝及使用

152287次瀏覽

作為前端人員,要找一個很順手的編輯器真的不容易,以前我用同事推薦的netbeans,很好用,但是它主要是用于php開發,且軟件太大,運行起來比較慢,后來又用前端開發的webStrom,也不錯,很好用,他的歷史記錄等功能比較強大,但是還是有一個缺點,就是軟件有點大,運行起來有點慢。

我在我向大家推薦一款實用的前端開發神器,不但占地小,且插件很多,很強大。下面我向大家介紹一下它的安裝及插件的使用方法。

一、安裝及安裝emmet插件

首先,去sublime官網下載軟件:http://www.sublimetext.com/

軟件很小,我用的是最新版的text3,大家可以用目前穩定版text2。打開它的官網,我們就可以看到幾個動畫,演示sublime的強大功能。

其次,軟件安裝好了之后,我們來安裝一個插件,推薦使用package control組件來安裝插件,很方便。

安裝方法如下:

按快捷鍵ctrl+~ 調出命名控制行:然后如果是text2輸入如下命令:

import urllib2,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; 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()) ); by = urllib2.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')

如果是text3輸入如下命令:

import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

具體安裝您也可以查看:https://sublime.wbond.net/installation#st3

安裝好了之后,在Preferences會看到package control,如下如:

enter image description here

最后,有了package control,你就可以安裝您想要的插件了!很簡單,sublime下面有很多插件,一般編輯器有的,sublime都會以插件的形式出現,下面我們最先介紹Emmet

打開package control 輸入install package 然后找到emmet,點擊安裝,重啟sublime就可以了,具體請看:https://github.com/sergeche/emmet-sublime#readme

sublime Emmet的用法請點擊

第二,sublime常用插件:

ZenCoding

不得不用的一款前端開發方面的插件,Write less , show more.安裝后可直接使用,Tab鍵觸發,Alt+Shift+W是個代碼機器。

Alignment

代碼對齊,如寫幾個變量,選中這幾行,Ctrl+Alt+A,哇,齊了。

Prefixr

寫 CSS可自動添加 -webkit 等私有詞綴,Ctrl+Alt+X觸發。

Tag

Html格式化,右鍵Auto-Format Tags on Ducument。一般是用ctrl +Alt +F 觸發,若觸發不了,查看是不是html文件,是否選中,是否有快捷鍵沖突!

Clipboard History

剪貼板歷史記錄,顯示更多歷史復制,Ctrl+Shift+V觸發。

SideBarEnhancements

側欄右鍵功能增強,非常實用

Theme – Soda

完美的編碼主題,用過的都說好,Setting user里面添加”theme”: “Soda Dark.sublime-theme”

GBK to UTF8

將文件編碼從GBK轉黃成UTF8,菜單 – File里面找

SFTP

直接編輯 FTP 或 SFTP 服務器上的文件,絕對FTP浮云

WordPress

集成一些WordPress的函數,對于像我這種經常要寫WP模版和插件的人特別有用

PHPTidy

整理排版PHP代碼

YUI Compressor

壓縮JS和CSS文件

Ctags

函數跳轉,我的電腦上是Alt+點擊 函數名稱,會跳轉到相應的函數

Doc?Blockr

注釋插件,生成幽美的注釋。標準的注釋,包括函數名、參數、返回值等,并以多行顯示,省去手動編寫。

ftpsync

FTP ssh上傳配置,安裝成功配置一下host等就可以了!

SFTP

安裝成功之后,文件夾下面單擊右鍵,map to remote 生成sftp-config.json文件,假如已經生成,點擊 edit remote Mapping ,編輯sftp-config.json

   "type": "sftp",

    "save_before_upload": true,
    "upload_on_save": false,//設置為true,保存上傳
    "sync_down_on_open": false,
    "sync_skip_deletes": false,
    "sync_same_age": true,
    "confirm_downloads": false,
    "confirm_sync": true,
    "confirm_overwrite_newer": false,

    "host": "example.com",//設置服務器host
    "user": "username",//設置服務器用戶名

Tags: sublime Emmet編輯器

相關文章:

任选9场吧