##### 插件安裝
需要注意的是,為了避免安裝的目錄亂,直接下載 portbale version
1.安裝插件管理器
ctrl+\` 打開調試窗口,在輸入框內粘貼如下代碼,然后回車即可自動安裝,安裝完成可能需要重啟ST。
import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; 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://packagecontrol.io/' + 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)
回車,稍等片刻就好了,會有提示。
2.這樣就可以使用package control 進行插件安裝了,ctrl+shift+p。輸入install package,回車
彈出搜索框:輸入要安裝插件的name,回車就會安裝,安裝的時候,左下角會有 = 左右移動,說明在安裝了,如果沒有任何提示,那說明沒有開始安裝,就要找別的方法了。(太費事了,具體自己到網上搜索方法吧!)
>[info] 如果要移除package,c+s+p,輸入remove package……
3.基礎用戶設置
網上現在的教程都是比較老的,

如圖所示,只有一個settings,沒錯,直接點擊就行了,新窗口,左邊為default設置,是不允許更改的,右邊為user設置,自己可以更改:
我的默認設置:
~~~
{
"auto_find_in_selection": true,
"bold_folder_labels": true,
"color_scheme": "Packages/User/SublimeLinter/Monokai (SL).tmTheme",
"default_line_ending": "unix",
"disable_tab_abbreviations": true,
"draw_minimap_border": true,
"ensure_newline_at_eof_on_save": true,
"fade_fold_buttons": false,
"font_face": "Microsoft YaHei Mono",
"font_size": 14,
"highlight_line": true,
"highlight_modified_tabs": true,
"ignored_packages":
[
"Vintage"
],
"save_on_focus_lost": true,
"tab_size": 4,
"theme": "Default.sublime-theme",
"translate_tabs_to_spaces": true,
"trim_trailing_white_space_on_save": true,
"word_wrap": "true"
}
~~~
trim_trailing_white_space_on_save,自動移除行尾多余空格,處女座更安心了。
ensure_newline_at_eof_on_save,文件末尾自動保留一個空行,懂的人自然知道它的用處。
font_face 設置字體。Microsoft YaHei Mono 是一款混合字體,專為代碼優化,看起來很舒服。當然你也可以使用你自己喜歡的字體,或者刪掉本行,使用默認字體。
disable_tab_abbreviations 設置為 true ,禁用 Emmet 的 tab 鍵功能(請使用 ctrl+e),系統自帶的 tab 功能還是可圈可點的。當然你也可以不設置它,以完全使用 Emmet 的 tab 補全功能。
translate_tabs_to_spaces 很明白就是把代碼 tab 對齊轉換為空格對齊,tab_size 配合設置空格數。這個需求因人而異了,不喜歡可以去掉。
draw_minimap_border,用于右側代碼預覽時給所在區域加上邊框,方便識別。
save_on_focus_lost,窗口失焦立即保存文件,嘛嘛再也不用擔心你忘記保存了。
highlight_line,當前行高亮。word_wrap,設置自動換行。
fade_fold_buttons,默認顯示行號右側的代碼段閉合展開三角號。
bold_folder_labels,側邊欄文件夾顯示加粗,區別于文件。
highlight_modified_tabs,高亮未保存文件。
default_line_ending: “unix”, 使用 unix 風格的換行符。
auto_find_in_selection: true ,開啟選中范圍內搜索(而不是整個文檔
4.ChineseLocalization , 完全漢化插件(不懂英文的福利,我也是在2018年春節前發現的。網上無意中看到的,我的英文還算ok吧,也沒太在意這個插件)
5.Emmet,前端神器
6.SideBarEnhancements ,增強型側邊欄

如上圖打開之后輸入:
~~~
[
// { "keys": ["ctrl+shift+c"], "command": "copy_path" },
//firefox
{ "keys": ["f1"], "command": "side_bar_files_open_with",
"args": {
"paths": [],
"application": "C:\\Program Files (x86)\\Mozilla Firefox\\firefox.exe",
"extensions":".*" //匹配任何文件類型
}
},
//chrome
{ "keys": ["f2"], "command": "side_bar_files_open_with",
"args": {
"paths": [],
"application": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe",
"extensions":".*"
}
},
//ie
{ "keys": ["f3"], "command": "side_bar_files_open_with",
"args": {
"paths": [],
"application": "C:\\Program Files\\Internet Explorer\\iexplore.exe",
"extensions":".*"
}
},
//safari
{ "keys": ["f4"], "command": "side_bar_files_open_with",
"args": {
"paths": [],
"application": "C:\\software\\Browser\\Safari\\safari.exe",
"extensions":".*"
}
},
//opera
{ "keys": ["f5"], "command": "side_bar_files_open_with",
"args": {
"paths": [],
"application": "C:\\software\\Browser\\opera\\opera.exe",
"extensions":".*"
}
}
]
~~~
7. HTML/CSS/js Prettify
然后找到這個文件文件夾
tools->HTML/CSS/JS Prettify->set prettify preference
修改文件目錄(sublime版本)

修改路徑:

找到這一樣代碼后面添加 vue
"allowed_file_extensions": ["htm", "html", "xhtml", "shtml", "xml", "svg", "vue"],
8.ConvertToUTF8
功能:文件轉碼成utf-8
簡介:通過本插件,您可以編輯并保存目前編碼不被 Sublime Text 支持的文件,特別是中日韓用戶使用的 GB2312,GBK,BIG5,EUC-KR,EUC-JP ,ANSI等。ConvertToUTF8 同時支持 Sublime Text 2 和 3。
使用:安裝插件后自動轉換為utf-8格式
9.IMESupport
功能:sublime中文輸入法
簡介:還在糾結 Sublime Text 中文輸入法不能跟隨光標嗎?試試「IMESupport 」這個插件吧!目前只支持 Windows,在搜索等界面不能很好的跟隨光標。
使用:Ctrl + Shift + P →輸入pci →輸入IMESupport →回車
10.最新版sublime主題、字體相關設置:
preferences(首選項) -> color(配色方案)->彈出下圖所示,選擇monokai extended就ok了

修改左側邊欄樣式:(繼續往下看,不要著急操作)
preferences(首選項) -> theme(主題方案)->彈出下圖所示,選擇Default.sublime-theme

但是這個只是選擇默認樣式,如何修改呢。繼續往下看:
>[warning] (默認的配置文件是不允許你修改的,你也找不到的,需要插件來查找和修改)
(1)安裝插件 PackageResourceViewer
(2)打開 Open Resource
(3)找到 Theme - Default,回車
(4)找打 Default.sublime-theme,回車打開
(5)搜索 ‘sidebar_label’ 并且修改找到的第一個(在362行),添加 ‘ "font.size": 14’,保存即可
其他相關顏色,背景等搜索網絡教程解決吧。
11.為了省去更改側邊欄樣式的問題,直接更改主題是最快的方式,需要安裝相關插件
搜索 theme 可以發現有很多的主題, 網上推薦這個 Afterglow 不錯(可顯示側邊欄小圖標)
改之前的效果:(10-相關操作之后的樣式 + sidebar)

Welcome to Afterglow Theme
To activate the theme, add or replace your current theme settings with the code below.
安裝完afterglow之后,會有package control message。關于插件的相關信息,如果要修改需要設置里添加相關信息
~~~
Settings for Afterglow
{
"theme": "Afterglow.sublime-theme",
"color_scheme": "Packages/Theme - Afterglow/Afterglow.tmTheme"
}
Settings for Afterglow-blue
{
"theme": "Afterglow-blue.sublime-theme",
"color_scheme": "Packages/Theme - Afterglow/Afterglow.tmTheme"
}
Settings for Afterglow-magenta
{
"theme": "Afterglow-magenta.sublime-theme",
"color_scheme": "Packages/Theme - Afterglow/Afterglow.tmTheme"
}
Settings for Afterglow-orange
{
"theme": "Afterglow-orange.sublime-theme",
"color_scheme": "Packages/Theme - Afterglow/Afterglow.tmTheme"
}
Settings for Afterglow-green
{
"theme": "Afterglow-green.sublime-theme",
"color_scheme": "Packages/Theme - Afterglow/Afterglow.tmTheme"
}
If you know other settings (height of the tabs, sidebar options, ...), visit this page:
https://github.com/YabataDesign/afterglow-theme/blob/master/README.md
~~~
https://github.com/YabataDesign/afterglow-theme/blob/master/README.md
我選擇的主題是:(決定側邊欄的樣式效果)

配色方案是:(決定編輯部分的樣式效果)

由于默認的側邊的樣式效果看不清問,顏色幾乎和背景融為一體,網上好多人說好看,還是那句話,蘿卜白菜各有所愛,關鍵是看不清……
修改
像 10 中提到的那樣,利用 PackageResourceViewer 插件,修改樣式文件

字體大小有 12,13,他默認是 14 修改font.size 為自己合適的大小
~~~
// Sidebar entry font size 14
{
"class": "sidebar_label",
"settings": ["sidebar_size_14"],
"font.size": 16,
"color": [200, 200, 200] // 03
},
~~~
~~~
// 修改文件夾名稱樣式
"parents": [{"class": "tree_row","attributes": ["expandable"]}],
還有 hover,selected 等 自己可以自行配置相關的樣式
~~~
it's mine.

STATUS BAR
label_control
修改下圖部位的樣式(編輯器最下邊文字樣式)


BOTTOM PANEL ICONS - GROUP 2
icon_reverse + icon_wrap
修改下圖中部位樣式

12.YUI Compressor
壓縮JS和CSS文件
快捷鍵: ctrl + b
- 1. KanCloud快捷鍵
- algate.github.io的網站建設
- algate.github.io基礎完善
- 如何在github上展示作品——為你的項目生成一個快速訪問的網址
- Github README.md 添加圖片
- git上傳github常用命令
- WEB開發文檔
- 工具相關文檔說明
- GulpJs開發文檔
- 安裝Gulp詳細教程
- 如何上傳到github
- 服務端相關文檔
- tomcat配置多域名多端口訪問
- Vue遇到的那些大坑
- vue-bulid新建問題解決方案
- vue-prev功能實現方案優劣(element)
- 常用組件使用和功能實現
- 1-文件上傳功能
- 2-select插件實現利弊
- 3-實現分步驟流程效果
- ES6-export與export default遇到的坑
- require.context()-route去中心化管理
- webpack.ensure(webpack代碼分割)
- angular爬-跪著也要爬完
- 新建遇到的問題
- 常用angular核心知識
- React初生牛犢不怕虎
- react初次見面之泥坑深譚
- react+webpack+es6精簡版HelloWorld
- create-react-app創建失敗
- create-react-app不歸路
- react用到的組件module
- react-hot-loader
- JavaScript成長之路
- Js進階
- Js模塊化編程:require.js的用法
- 淺談前端架構
- Js常見問題匯總
- 瀏覽器渲染原理及解剖瀏覽器內部工作原理
- 雅虎前端優化的35條軍規
- 常見問題描述-面試常問
- 前端性能優化-algate
- http狀態碼詳解
- 作用域,閉包,面向對象
- Js基礎知識
- Js基本功必須扎實
- 各個瀏覽器加載icon
- html特殊標簽和屬性的說明
- 個人資源總結
- 個人簡歷-絕對真實有效
- Jekyll博客創建
- Jekyll開始創建
- Jekyll文檔說明
- jekyll-paginate分頁問題
- HEXO博客創建
- es6新用法解析以及使用
- 神奇的三個點:...
- 幾大類
- coding創建hexo
- sublime相關配置
- Atom使用