##### 插件安装
需要注意的是,为了避免安装的目录乱,直接下载 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.基础用户设置
网上现在的教程都是比较老的,
![](https://box.kancloud.cn/e2bf8629032a724100e81d6903a29818_593x284.png)
如图所示,只有一个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 ,增强型侧边栏
![](https://box.kancloud.cn/fde975519f47a0cb8c16d1f4c8ecd9e2_703x428.png)
如上图打开之后输入:
~~~
[
// { "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版本)
![](https://box.kancloud.cn/99dfdafd90329488df554641de928f20_787x537.png)
修改路径:
![](https://box.kancloud.cn/3670ece328461c2a686209fade6fea63_644x127.png)
找到这一样代码后面添加 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了
![](https://box.kancloud.cn/022904a041e0818e0d091a45d556a1a3_502x438.png)
修改左侧边栏样式:(继续往下看,不要着急操作)
preferences(首选项) -> theme(主题方案)->弹出下图所示,选择Default.sublime-theme
![](https://box.kancloud.cn/165c77a8a43255ccc311fe885863de4d_451x177.png)
但是这个只是选择默认样式,如何修改呢。继续往下看:
>[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)
![](https://box.kancloud.cn/b100c35303eeabd3381d37e2878a5602_1333x656.png)
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
我选择的主题是:(决定侧边栏的样式效果)
![](https://box.kancloud.cn/474eaafea4265ffcaf1046d2edf391d0_493x124.png)
配色方案是:(决定编辑部分的样式效果)
![](https://box.kancloud.cn/0b960eca00195e965f3362d46e4b796d_631x200.png)
由于默认的侧边的样式效果看不清问,颜色几乎和背景融为一体,网上好多人说好看,还是那句话,萝卜白菜各有所爱,关键是看不清……
修改
像 10 中提到的那样,利用 PackageResourceViewer 插件,修改样式文件
![](https://box.kancloud.cn/056d5cacb17880562b528c7da161f892_1323x818.png)
字体大小有 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.
![](https://box.kancloud.cn/6c04e9fd85e0964ca5084f03488cb24c_395x704.png)
STATUS BAR
label_control
修改下图部位的样式(编辑器最下边文字样式)
![](https://box.kancloud.cn/ab8a062ab38374610420163e10ec1602_268x58.png)
![](https://box.kancloud.cn/dace896eca51675cdc471418927b1b33_420x69.png)
BOTTOM PANEL ICONS - GROUP 2
icon_reverse + icon_wrap
修改下图中部位样式
![](https://box.kancloud.cn/f3ec2f7493b7c2d5a78be209fa83c6a1_397x64.png)
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使用