sublime text 心得

時間 2019-11-17

標籤 sublime text 心得欄目 HTML 简体版

原文原文鏈接

安裝javascript

一、官網下載Sublime Text 3 http://www.sublimetext.com/3html

二、示例Win7 64位前端

三、下載完成後（傻瓜式安裝）、安裝時，注意勾選java

這樣Sublime Text能夠被添加到右鍵中，在右鍵單擊文件時，能夠直接使用Sublime Text打開。python

Package Control安裝git

安裝插件以前、須要安裝Package Control（管理ST中的插件）github

使用Ctrl + ~快捷鍵或者經過View->Show Console菜單打開命令行chrome

將如下 Python 代碼粘貼進去並 enter 執行，不出意外即完成安裝。sublime-text

Sublime Text 3 瀏覽器

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

可能因爲各類緣由，沒法使用代碼安裝請跳轉連接http://www.imjeff.cn/blog/62/ https://packagecontrol.io/installation#st3

若Preferences中多出 Package Control恭喜你安裝成功

使用Package Control安裝插件

一、按下Ctrl+Shift+P調出命令面板。

二、輸入"pcip" 調出 Package Control: Install Package 選項並回車。

3. 在列表中選中要安裝的插件，或者輸入插件名(好比要安裝Emmet插件，則輸入Emmet),根據命令面板中的過濾結果，選擇要安裝的插件。

使用Package Control查看、刪除已安裝的插件

一、按下Ctrl+Shift+P調出命令面板

二、輸入"pcil",在下拉列表找到"Package Control: List Packages"，選中後回車，所有的插件就會顯示出來了。

三、輸入"pcrp",在下拉列表找到"Package Control: Remove Packages",刪除須要刪除的插件便可

插件

插件地址：https://packagecontrol.io/browse

一、Package Control( 管理Sublime Text插件 )

二、Emmet( 前端開發神器 ) 具體使用請跳轉 → http://www.iteye.com/news/27580

三、SublimeCodeIntel( 代碼提示插件 )

四、BracketHighlighter( 引號、括號、標籤高亮插件 ) 具體使用請跳轉 → http://www.dbpoo.com/sublime-text3-brackethighlighter/ Pregerence > Package Settings > BracketHighlighter > Bracket Settings – User

五、SideBarEnhancements( slide加強快捷鍵瀏覽器\並可自定義瀏覽器預覽的快捷鍵 )

六、Theme( 界面主題 )

七、ConvertToUTF8( 解決Sublime中中文不能正常顯示的問題 )

八、DocBlockr( 代碼生成註釋 )

九、Autoprefixer( 處理Browse前綴 )

十、AutoFileName( 自動補全文件路徑 )

十一、HTML五、jQuery、Sass、Git、JS Format、ConvertToUTF8

十二、SublimeREPL( 能夠直接在編輯器中運行一個解釋器 )

1三、ColorPicker( 內置調色板 )

經常使用快捷鍵

選擇類

Ctrl+D　選中光標所佔的文本，繼續操做則會選中下一個相同的文本。

Alt+F3　選擇一個選中項的全部匹配項

Ctrl+Enter　　在下一行插入新行

Ctrl+Shift+Enter　　在上一行插入新行

Ctrl+L　　選中整行、繼續操做則選擇下一行、效果與Shift+↓效果同樣

Ctrl+shift+L　　先選中多行，再按下快捷鍵，會在每行行尾插入光標，便可同時編輯這些行。

Ctrl+shift+M　選擇括號之間的一切,使用CSS

Ctrl+M　　光標移動至大括號內結束或開始的位置。

Ctrl+shift+[　　選中代碼，按下快捷鍵，摺疊代碼

Ctrl+shift+]　　選中代碼，按下快捷鍵，展開代碼

Ctrl+K+0　　展開全部摺疊代碼

Ctrl+shift+'　選擇與光標關聯的開始和結束標籤

Ctrl+shift+a　再次按下它,將選擇父容器,再按,將選擇父容器的父容器。

Ctrl+F2　　設置書籤

F2　　查找書籤(有的話)

移動行和文本

Ctrl+shift+↑　於上一行互換位置

Ctrl+shift+D　若是你已經選中了文本,它會複製你的選中項。不然,把光標放在行上,會複製整行。

Ctrl+[或]　增長和減小縮進

剪切、刪除、複製、粘貼

Ctrl+shift+;　移除選中項的標籤元素

Ctrl+shift+v　粘貼並保持縮進

Alt+shift+w　使用標籤包裹一行; 開始輸入你想使用的標籤

Ctrl+K+U　　大寫

Ctrl+K+L　　小寫

文本和數字的操做

Ctrl+shift+y　計算數學表達式

Alt+shift+↑　增加1

Ctr+↑　　　　增加10

Ctrl+/　　　　註釋

Ctrl+shift+/　　註釋選中的

顯示類

Ctrl+Tab　　按文件瀏覽過的順序，切換當前窗口的標籤頁
Ctrl+PageDown　　向左切換當前窗口的標籤頁
Ctrl+PageUp　　向右切換當前窗口的標籤頁

Alt+shift+1　　窗口分屏，恢復默認1屏（非小鍵盤的數字）

Alt+shift+2　　左右分屏-2列

Alt+shift+3　　左右分屏-3列

Alt+shift+4　　左右分屏-4列　　

Alt+shift+5　　等分4屏
Alt+shift+8　　垂直分屏-2屏
Alt+shift+9　　垂直分屏-3屏

Ctrl+K+B　　開啓/關閉側邊欄

F11　　全屏模式

Shift+F11　　免打擾模式

view　→　Hide Menu 隱藏工具欄

按住Alt工具欄顯示

Sublime Text3 實用設置

"caret_style":"phase",// 設置貫標閃動方式(smooth\phase\blink\wide\solid)

"caret_extra_top": 2,// 設置光標top的長度
"caret_extra_bottom": 2,// 設置光標bottom的長度
"caret_extra_width": 1,// 設置光標width

"color_scheme": "Packages/Theme - Spacegray/base16-ocean.dark.tmTheme",// 主題文件路徑

"draw_minimap_border": true,// 代碼地圖(右側縮略圖)是否加上邊框
"ensure_newline_at_eof_on_save": true,// 保存文件時光標會在文件的最後向下換一行
"font_face": "YaHei Consolas Hybrid",// 字體
"font_size": 14,// 字體大小
"highlight_line": true,// 高亮光標所在的一行
"highlight_modified_tabs": true,      // 高亮有修改的標籤 
"ignored_packages":// 刪除你想要忽略的插件 [ "Vintage" ], "overlay_scroll_bars": "enabled",// 鼠標滾輪不滑動時 默認隱藏滾動條
"rulers":// 寬度指導線 你的代碼寬度超出這條線的時候，說明你要從新組織一下了
[ 80 ], "save_on_focus_lost": true,// 焦點丟失後自動保存
"show_encoding": true,// 顯示當前文件的編碼(右下角)
"theme": "Soda Light.sublime-theme", "trim_trailing_white_space_on_save": true,// 保存的時候把無用的空格去掉
"word_wrap": true,    // 自動換行

"translate_tabs_to_spaces": true,// #將tab鍵的形式改成四個空格

"open_files_in_new_window": false, // #取消打開文件時會新生成一個窗口, 默認設置每次打開一個項目會從新生成一個窗口

http://www.tuicool.com/articles/uA3iui

插件配置

一、SideBarEnhancements( 右鍵加強 )

點擊菜單欄的preferences->package setting->side bar->Key Building-User

Ctrl+shift+C 複製當前文件路徑

[
    { "keys": ["ctrl+shift+c"], "command": "copy_path" },
    //chrome
    { "keys": ["f1"], "command": "side_bar_files_open_with",
        "args": {
            "paths": [],
            "application": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe",
            "extensions":".*" //匹配任何文件類型
        }
    },
    //firefox
    { "keys": ["f2"], "command": "side_bar_files_open_with",
        "args": {
            "paths": [],
            "application": "D:\\Program Files\\Mozilla Firefox\\firefox.exe",
            "extensions":".*"
        }
     },
    //ie
    { "keys": ["f4"], "command": "side_bar_files_open_with",
        "args": {
            "paths": [],
            "application": "C:\\Program Files\\Internet Explorer\\iexplore.exe",
            "extensions":".*"
        }
    },
]

若按f1無用、請檢查你的"application"路徑地址是否正確。再檢查是否在360攔截彈窗廣告內把"Windows 命令處理程序"攔截了

二、BracketHighlighter( 高亮插件 )

點擊菜單欄的Preferences -> package settings -> Bracket Highlighter -> Bracket Settings – User (注意是user)

 1 {
 2     // Define region highlight styles
 3     "bracket_styles": {
 4         // "default" and "unmatched" styles are special
 5         // styles. If they are not defined here,
 6         // they will be generated internally with
 7         // internal defaults.
 8 
 9         // "default" style defines attributes that
10         // will be used for any style that does not
11         // explicitly define that attribute.  So if
12         // a style does not define a color, it will
13         // use the color from the "default" style.
14         "default": {
15             "icon": "dot",
16             // BH1's original default color for reference
17             "color": "entity.name.class",
18             "color": "brackethighlighter.default",
19             "style": "highlight"
20         },
21 
22         // This particular style is used to highlight
23         // unmatched bracekt pairs.  It is a special
24         // style.
25         "unmatched": {
26             "icon": "question",
27             "color": "brackethighlighter.unmatched",
28             "style": "highlight"
29         },
30         // User defined region styles
31         "curly": {
32             "icon": "curly_bracket",
33             "color": "brackethighlighter.curly",
34             "style": "highlight"
35         },
36         "round": {
37             "icon": "round_bracket",
38             "color": "brackethighlighter.round",
39             "style": "underline"
40         },
41         "square": {
42             "icon": "square_bracket",
43             "color": "brackethighlighter.square",
44             "style": "underline"
45         },
46         "angle": {
47             "icon": "angle_bracket",
48             "color": "brackethighlighter.angle",
49             "style": "underline"
50         },
51         "tag": {
52             "icon": "tag",
53             "color": "brackethighlighter.tag",
54             "style": "highlight"
55         },
56         "single_quote": {
57             "icon": "single_quote",
58             "color": "brackethighlighter.quote",
59             "style": "outline"
60         },
61         "double_quote": {
62             "icon": "double_quote",
63             "color": "brackethighlighter.quote",
64             "style": "outline"
65         },
66         "regex": {
67             "icon": "regex",
68             "color": "brackethighlighter.quote",
69             "style": "outline"
70         }
71     },
72 
73 }

三、Theme( 主題 )

點擊菜單欄的preferences->package setting->Bracket highlighter–>Bracket settings-User

Theme - Spacegray　　https://packagecontrol.io/packages/Theme%20-%20Spacegray

1 黑暗
2 "theme": "Spacegray Eighties.sublime-theme",
3 "color_scheme": "Packages/Theme - Spacegray/base16-eighties.dark.tmTheme",
4 海洋
5 "theme": "Spacegray Light.sublime-theme",
6 "color_scheme": "Packages/Theme - Spacegray/base16-ocean.light.tmTheme",
7 暗黑海
8 "theme": "Spacegray.sublime-theme",
9 "color_scheme": "Packages/Theme - Spacegray/base16-ocean.dark.tmTheme"

View Code

Theme - Spacegray 連接 https://packagecontrol.io/packages/Theme%20-%20Spacegray

Theme - Soda 連接 http://buymeasoda.github.io/soda-theme/

Theme - Flatland 連接 https://packagecontrol.io/packages/Theme%20-%20Flatland

四、Autoprefixer與SublimeCodeIntel( 依賴NODE環境 )

五、ColorPicker( 內置調色板 )

因調色板快捷鍵跟、複製文件地址快捷鍵和UTF8插件快捷鍵衝突。所以修改以下

點擊菜單欄的preferences->Browser Packages…… >ColorPicker文件夾–>Default (Windows).sublime-keymap 修改

1 [
2     { "keys": ["ctrl+shift+z+x"], "command": "color_pick" }
3 ]

ColorPicker

Ctrl + Shift + P SetSyntax:html 縮寫ssh（更改頁面中的.html）

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。