碼上歡樂
相關內容    簡體    繁體

開發工具之Sublime編輯器

本文轉載自   查看原文   2018-03-13 10:23   1872    軟件/ 工具/ sublime

　　sublime是一款輕量級的編輯器，可以從官網上進行下載最新版本。它有很多使用並且強大的功能支持。例如：GOTO,package 等快捷操作。但有時候下載的版本不能進行安裝package control 無法方便的進行插件的管理。所引我經常會使用一個不是最新的版本，如果有些小伙伴也有這種情況，那么可以使用我提供的這款sublime即可正常使用。

　　相關插件: https://packagecontrol.io/

　　接下來就是簡單的下一步下一步進行安裝，安裝完成之后我們要安裝一些插件，來便利我們進行高效的開發工作。首先，我會下載這些。。。。。

　　1）control + shift + p   輸入 install package  進行包管理的安裝，稍等片刻會提示你安裝完成，這個時候就可以進行相關插件的安裝了（如果無法使用命令安裝，可以手動下載並安裝）

　　2）進行漢化，依舊使用組合鍵control + shift + p 輸入 install package  稍后會出現一個搜索框，輸入你想要安裝的插件的名稱localization

　　3）  對於長時間變成的我來說，一個好的環境是至關重要的，所以我會選擇一個好的主題開始愉快的工作。使用插件colorSublime 可以自由的主題選擇

　　4） 由於現在編碼都是使用utf-8的字符集，所以為了不必要的不統一，所以安裝ConvertToUTF8 自動的將字符集轉化成標准的utf-8的形式

　　5）側邊欄加強版 Side​Bar​Enhancements 支持更多的選項操作。

　　6)好用的智能提示插件：Emmet

 　  7）其他的自己選擇 

　　　 　alignment　  對齊
 
　　　　bracketHighlighter    高亮
 
　　　　docBlockr   注釋
 
　　　　git   
 
　　　　jsFormat : 

　　　　　　功能：Javascript的代碼格式化插件

　　　　　　簡介：很多網站的JS代碼都進行了壓縮，一行式的甚至混淆壓縮，這讓我們看起來很吃力。而這個插件能幫我們把原始代碼進行格式的整理，包括換行和縮進等等，是代碼一目了然，更快讀懂~

　　　　　　使用：在已壓縮的JS文件中，右鍵選擇jsFormat或者使用默認快捷鍵（Ctrl+Alt+F）


　　　　HTML-CSS-JS Prettify

 　　　　　　功能：將前端 不規則的代碼排版進行格式化
　　　　　　 簡介：有時候對於排版不友好的代碼來說，讀起來是一件費事的事情，這個工具可以有效的解決這個問題
　　　　　　使用：選擇需要進行格式化的代碼，右鍵格式即可
              

             JavaScript Completions    支持javascript原生語法提示

　　　　tortoiseSvn   SVN
 
　　　　terminal  命令行
 
　　　　compare side-by-side ,Sublimerge 文本對比
 
 　　　  search stack overflow  快速搜索
 
　　　　  AutoFileName —— 自動補全文件路徑和文件名

　　　　Color Highlighter —— 高亮顏色

　　　　SublimeCodeIntel   提示, 使用一個類this-> 的時候,會進行提示類中的方法與屬性

　　　　ClickableURLs  -----  對於文本中有一個url地址,可以通過這個插件設置快捷鍵直接打開在瀏覽器中

　　　　SyncedSideBar: 每次打開文件，側邊欄都會同步顯示該文件所在目錄樹中的位置

　　　　jquery:  功能：jQ函數提示

 

　　8) sublime本身不支持中文的鼠標跟隨,就是我們輸入的文字與光標所在的位置分離,這樣會很影響我們的日常開發
　　　　解決: 安裝插件  IMESupport
 
　　   想看完整內容，可以去官網，這里提供兩個地址，國內： http://www.sublimetextcn.com/ （對於英文不好的同學） 國外： https://www.sublimetext.com/

 
　　　常用的快捷鍵也有很多：
　　
 
 
　　
組合鍵　
描述
ctrl + G
 定位行，跳轉行
ctrl + F
在當前窗口查找文本
ctrl + E　
最近打開的文件
CTRL+ALT+L
格式化代碼
CTRL+J
自動代碼提示，自動補全
CTRL+Z
 倒退(代碼后悔)
CTRL+SHIFT+Z
向前
CTRL+/ 
注釋//取消注釋  
CTRL+SHIFT+/ 
注釋/*...*/
Ctrl+Shift+U
選中的字符大小寫轉換
CTRL+F4
關閉當前的編輯器或選項卡
ctrl + k + u
將選定字符轉換成 大寫
ctrl + k + l
將選定字符轉化成小寫
Ctrl + Enter
智能線分割（HTML和JavaScript）
Ctrl + Shift + J
智能線連接（僅適用於HTML和JavaScript）
ESC   
光標返回編輯框
CTRL+UP/DOWN
光標跳轉到編輯器顯示區第一行或最后一行下
ctrl+shift+up/down
移動行、合並選中行，代碼選中區域 向上/下移動
CTRL+C
復制
CTRL+V
粘貼
CTRL+X
剪 切,刪除行
CTRL+D 
復制行
 
按Ctrl+`
 打開面板
　　
　 　常用鍵：
　　　　
　　1 )安裝
　　　　ctrl+shift + p  輸入 install
 　　　　Install Package 選擇
 
　　2) 卸載
　　　　ctrl+shift + p  輸入 remove
　　　　Remove Package  選擇
 
 
　 還有一些實用的功能：
　　1） 直接編譯執行本文件
　　　　
　　　　Tool -> Build System -> New Build System 中選擇php
　　　　打開的樣式：
 　　　　　　
　　　　進行修改：
　　　　

　　　　

{
    "cmd":["C:/phpStudy/PHPTutorial/php/php-5.6.27-nts/php.exe","$file"],
    "file_regex":"php$",
    "selector":"source.php"
}

 

 

 
　　　　需要注意的是： 要設置好php的環境變量，否則需要找到相應的路徑替換php，例如
 
　　　　最后進行保存為后綴為sublime-build的文件即可，名稱自定
　　　　最終路徑：  C:\Users\Administrator\AppData\Roaming\Sublime Text 3\Packages\User(本人)
　　　　調用方式:  Ctrl + B 即可查看該腳本運行效果
 
　　　　2） 添加代碼段
 　　　　
　　　　　　在tool->new snippet…創建一個新的snippet
 
 
　　　　進行相應的設置 
 　　　　　　
　　　　　　新建一個snippet文件
 
　　簡要介紹一下snippet四個組成部分:
　　content:其中必須包含<![CDATA[…]]>,否則無法工作, Type your snippet here用來寫你自己的代碼片段 tabTrigger:用來引發代碼片段的字符或者字符串, 比如在以上例子上, 在編輯窗口輸入hello然后按下tab就會在編輯器輸出Type your snippet here這段代碼片段 scope: 表示你的代碼片段會在那種語言環境下激活, 比如上面代碼定義了　　　　source.python, 意思是這段代碼片段會在python語言環境下激活. description :展示代碼片段的描述, 如果不寫的話, 默認使用代碼片段的文件名作為描述
 
　　Snippet可以存儲在任何的文件夾中, 並且以.sublime-snippet為文件擴展名, 默認是存儲在.sublime-snippet文件夾下。

      

　　3、在content標簽里面編輯要在文件頭部顯示的信息，在tabTrigger標簽中間編輯觸發的單詞–意思就是在文件頭部輸入單詞，然后按tab鍵，會將content標簽中間的信息顯示出來；請看我的例子

 　　

 

　 附加項：
　　1. 手動安裝插件包
　　　　1）sublime text3
　　　　
mport 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())
　　　　2)sublime text2
　　
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')
 
　　添加右鍵
　　　　 
Windows Registry Editor Version 5.00
[HKEY_CLASSES_ROOT\*\shell\SublimeText3]
@="SublimeText3"
"Icon"="D:\\software\\Sublime Text 3\\sublime_text.exe,0"
[HKEY_CLASSES_ROOT\*\shell\SublimeText3\command]
@="D:\\software\\Sublime Text 3\\sublime_text.exe %1"
[HKEY_CLASSES_ROOT\Directory\shell\SublimeText3]
@="SublimeText3"
"Icon"="D:\\software\\Sublime Text 3\\sublime_text.exe,0"
[HKEY_CLASSES_ROOT\Directory\shell\SublimeText3\command]
@="D:\\software\\Sublime Text 3\\sublime_text.exe %1"

　　重命名為：sublime_addright.reg，然后雙擊就可以了

　　注意點:  需要將目錄替換成自己實際安裝的路徑即可

 

 代碼校驗:
　　平常開發中經常會出現各種低級的錯誤,例如:少一個分號,變量名稱錯誤了,這時候 一個好的編輯器代碼校驗就尤其重要了.所以,我在這介紹一款插件  SublimeLinter
 　　安裝:　　 使用install package的方式來進行安裝     sublimelinter 和 SublimeLinter-php
　　設置:  Preferences->Package Settings->SublimeLinter->Settings
　　重要的參數設置:      lint_mode 和 paths 
　　 
1 { 2     "lint_mode": "save",
3     "paths": { 4         "linux": [],
5         "osx": [],
6         "windows": ["E:\\xampp\\php"] //設置自己的PHP地址
7     },
8     "delay": 0.1,
9 }

　　安裝好以后就可以進行愉快的開發工作了

,

 

　php官方函數查詢(DocPHPManualer)

　　　場景:  在開發或者審查代碼的時候,經常會用到一些自帶的函數,這個時候,你時候 還要打開官方地址 -> 在搜索欄中進行相關函數的搜索呢? 不用如此麻煩,一個插件就搞定!!!

　　　安裝使用: 使用package包管理器進行正常安裝,完成安裝之后,就可以進行試驗,選中一個函數,右鍵可以進行搜索

 

 

　　

搭配LiveReload實現實時刷新

　　場景:作為開發者,我們經常需要進行頁面調整,你是不是經常遭遇這樣的情景,修改一個樣式,去刷新一下瀏覽器,看看是否是自己想要的樣式,這樣的開發很累,效率較為低下,這個時候,借助插件可以實現實時刷新的效果,效率倍增,有木有!!!

　　安裝與使用:

　　　　在瀏覽器Chrome中添加擴展: LiveReload,並且設置允許訪問文件網址

　　　　在sublime中下載插件:livereload

　　　　　　1)配置LiveReload

Preference>Package Settings>LiveReload>Settings User，復制下面的代碼粘貼保存
{
　　"enabled_plugins": [
　　"SimpleReloadPlugin",
　　"SimpleRefresh"
　　 ]
}

　　　　　　2)在Sublime中啟用LiveReload

Ctrl+Shift+P →LiveReload: Enable/disable plugins， 按 Enter→在下拉列表找到 “Enable - Simple Reload” ， 按 Enter

　　使用:點擊 Chrome菜單欄中LiveReload 圖標，中心的空心小圓圈會變成實心，表示已經啟用LiveReload並連接成功。Sublime text3中的任何變化，Ctrl+S后，立即在Chrome中看到相應變化

　　　　

 

　　常見問題總結：

　　　　1. 安裝package 失敗（Error installing Package Control: HTTPS error encountered, falling back to HTTP - <urlopen error [WinError 10060]）

　　　　

50.116.34.243 sublime.wbond.net
50.116.34.243 packagecontrol.io

在hosts中添加配置項

　　

　　　　2. Package Control: Error downloading channel. HTTP error 502 downloading https://packagecontrol.io/channel_v3.json.　　　　

　　　　　　Package Control.sublime-settings]修改方法：

　　　　　　Preferences > Package Settings > Package Control > Settings - User

 "channels":
    [
        "http://static.bolin.site/channel_v3.json",
        //"https://packagecontrol.io/channel_v3.json",
        //"https://web.archive.org/web/20160103232808/https://packagecontrol.io/channel_v3.json",
        //"https://gist.githubusercontent.com/nick1m/660ed046a096dae0b0ab/raw/e6e9e23a0bb48b44537f61025fbc359f8d586eb4/channel_v3.json"
    ],

　　

 

　　常用配置：

　　

{
    "ignored_packages":
    [
        "Vintage"
    ],
    "font_size": 14,
    "word_wrap": true,
    "save_on_focus_lost": true,
    "wrap_width": 120,
}

 

 常見錯誤：

　　1.  there are no packages available for instation

            解決方案： preferences > package settings > package control > setting user 

{
    "bootstrapped": true,
    "installed_packages":
    [
        "Package Control"
    ],
    "channels":
    [
        "http://cst.stu.126.net/u/json/cms/channel_v3.json"
    ]
}


//重點需要添加channels

 

Mac中在命令行下打開文件

　　安裝成功的sublime軟件一般位於應用目錄之下Sublime Text.app

　　1）設置軟連接

ln -s "/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl" /usr/local/bin/subl

 

 

 

 

 

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 sublime編輯器 Sublime Text3 編輯器我的最愛 sublime text 編輯器的操作 Sublime Text3編輯器簡介 【工具】前端開發工具-sublime Text2 mac下配置subl啟動sublime text 編輯器 文件編碼、charset、sublime編輯器支持GBK等問題 Web開發者用什么編輯器？ 前端開發主流編輯器 [cb]Unity 關卡編輯器 開發
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM