Sublime 3 初始安装及常用插件安装

##Sublime 3安装
###下载安装
[官方下载地址](http://www.sublimetext.com/3)

###破解
>https://fatesinger.com/100237

	加入到hosts文件
	127.0.0.1       www.sublimetext.com
	127.0.0.1       license.sublimehq.com
	Windows : c:/windows/system32/drivers/etc/hosts
	Linux : /etc/hosts
	Mac : /Private/etc
	
	----- BEGIN LICENSE -----
	sgbteam
	Single User License
	EA7E-1153259
	8891CBB9 F1513E4F 1A3405C1 A865D53F
	115F202E 7B91AB2D 0D2A40ED 352B269B
	76E84F0B CD69BFC7 59F2DFEF E267328F
	215652A3 E88F9D8F 4C38E3BA 5B2DAAE4
	969624E7 DC9CD4D5 717FB40C 1B9738CF
	20B3C4F1 E917B5B3 87C38D9C ACCE7DD8
	5F7EF854 86B9743C FADC04AA FB0DA5C0
	F913BE58 42FEA319 F954EFDD AE881E0B
	------ END LICENSE ------


###主题
大量[第三方主题](https://sublime.wbond.net/browse/labels/theme)

- 安装方法一:使用Package Control:Install Package安装
		
	command/ctrl+shift+p打开命令板,输入install,选择Install Package并按回车键,再输入主题名字并按回车键,即可安装该主题
	

- 安装方法二:
	主题文件下载后放到Packages目录下,在用户配置文件中
	1. tomorrow-theme [下载地址](https://github.com/theymaybecoders/
	2. -tomorrow-theme.git)
	2. material-theme [下载地址](https://github.com/equinusocio/material-theme)
	3. Nuxus-theme [下载地址](https://packagecontrol.io/packages/Theme%20-%20Nexus) 推荐
	4. Boxy-theme


###配置
Preferences -> Settings -> User

{
	"auto_complete_commit_on_tab": true,
	"bold_folder_labels": true,
	"default_encoding": "UTF-8",
	"draw_minimap_border": false,
	"ensure_newline_at_eof_on_save": true,
	"fade_fold_buttons": false,
	"file_exclude_patterns":
	[
		".DS_Store",
		"*.pid",
		"*.pyc"
	],
	"folder_exclude_patterns":
	[
		".git",
		"__pycache__",
		".idea"
	],
	"font_size": 14,
	"ignored_packages":
	[
		"Vintage"
	],
	"line_numbers": true,
	"line_padding_bottom": 3,
	"line_padding_top": 3,
	"match_selection": true,
	"save_on_focus_lost": true,
	"spell_check": false,
	"tab_size": 4,
	"theme": "Adaptive.sublime-theme",
	"translate_tabs_to_spaces": true,
	"trim_trailing_white_space_on_save": false,
	"update_check": false
}

###安装插件
>[15个插件推荐](https://www.oschina.net/translate/15-awesome-sublime-text-plugins-for-web-development?cmp)
>[插件库](https://packagecontrol.io)

	#插件安装
	Package Control	快捷键 Ctrl + Shift + P 输入 Install 选择 Install Package
	
	#中文支持
	ChineseLocalizations	汉化,Help -> Language
	ConvertToUTF8   		将文件编码从GBK转换成UTF8,File -> Set File Encoding to / Reload with Encoding
	codecs33        		ConvertToUTF8在sublime3中无法使用时安装

	#主题
	Material Theme	Material主题
	A File Icon		Material主题需要安装
	ColorSublime    主题预览安装	
	MarkdownExtended    markdown显示主题	
	
	#界面
	Side​Bar​Enhancement      侧边栏增强工具,文件定义引用跳转
	BracketHighlighter      括号、引号匹配高亮显示

	
	#格式化
	Alignment       进行智能对齐,选中代码,Ctrl+Alt+A
	AutoPep8        格式化Python代码
	CodeFormatter   自动格式化代码,支持多种编程语言,需要指定编程语言路径(html格式化不好用)
	HTML-CSS-JS Prettify	对于html,css,js这个好用
	HTMLBeautify    格式化HTML代码
	CSS Format      格式化CSS代码
	JsFormat        格式化JS代码

	#编程
	Emmet           		前端开发神器
	Jedi            		Python智能代码补全
	DocBlockr				自动补全注释插件
	SublimeLinter   		语法检查工具
	SublimeCodeIntel		代码智能提示
	HTML5					HTML snippets(可选)
	JQuery					JQuery snippets
	
	#Markdown
	Markdown Editing    高亮显示Markdown语法
	OmniMarkupPreviewer 预览markdown 编辑的效果,同样支持渲染代码高亮的样式
	
	#辅助
	FileDiffs       对比文件区别
	SublimeTmpl     提供常用文件的模板
	SublimeREPL     多种脚本语言的执行环境
	SFTP            FTP工具
	GIT             GIT工具
	


####Package Control

- 方法一代码安装:
	
	ctrl + ~ 打开控制台,粘贴python代码进去并按回车键执行
	
		#Sublime Text3
		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())
		
		#Sublime Text 2:
		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')

- 方法二手动安装:
	
	1. 点击Preferences > Browse Packages菜单
	2. 进入打开的目录的上级目录,进入Installed Packages目录
	3. 下载[Package Control.sublime-package](https://sublime.wbond.net/Package%20Control.sublime-package) ,复制到Installed Packages目录中
	4. 重启Sublime Text
####编程
- SublimeTmpl:提供常用文件的模板
- SublimeCodeIntel:代码智能提示

		"Python": {
		        "python":"D:/Python27/python.exe",
		        "pythonExtraPaths":
		            [
		                "D:/Python27",
		                 "D:/Python27/DLLs",
		                 "D:/Python27/Lib",
		                 "D:/Python27/Lib/lib-tk",
		                 "D:/Python27/Lib/site-packages"
		            ]
		        }
		        
        "Python3": {
            "python3": "/Users/admin/venv36/bin/python",
            "codeintel_scan_extra_dir": [
                "/Users/admin/venv36",
                "/Users/admin/venv36/lib",
                "/Users/admin/venv36/lib/site-packages",
                "/Users/admin/venv36/lib/python3.6",
            ],
            "codeintel_scan_files_in_project": true,
            "codeintel_selected_catalogs": []
        },	        
		For Mac OS X:
		
		Jump to definition = Control+Click
		Jump to definition = Control+Command+Alt+Up
		Go back = Control+Command+Alt+Left
		Manual Code Intelligence = Control+Shift+space
		For Linux:
		
		Jump to definition = Super+Click
		Jump to definition = Control+Super+Alt+Up
		Go back = Control+Super+Alt+Left
		Manual Code Intelligence = Control+Shift+space
		For Windows:
		
		Jump to definition = Alt+Click
		Jump to definition = Control+Windows+Alt+Up
		Go back = Control+Windows+Alt+Left
		Manual Code Intelligence = Control+Shift+space	 
- Jedi:Python智能代码补全       
- FileDiffs:对比文件区别
- SublimeLinter:语法检查工具

		安装SublimeLinter-php,配置
{
    "paths": {
        "linux": [],
        "osx": ["/usr/bin/"],
        "windows": []
    },
    "lint_mode": "save",
}
		
		Show all error	ctrl+cmd+A
		Lint this view	ctrl+cmd+L
		Goto next error	ctrl+cmd+E
		Goto prev error	ctrl+cmd+shift+E
####界面
- Side​Bar​Enhancement:侧边栏增强工具
- BracketHighlighter:括号、引号高亮

		配置括号高亮度显示
		{
			"bracket_styles": {
				"default": {
					"icon": "dot",
					// "color": "entity.name.class",
					"color": "brackethighlighter.default",
					"style": "highlight"
				},
				"unmatched": {
					"icon": "question",
					"color": "brackethighlighter.unmatched",
					"style": "highlight"
				},
				"curly": {
					"icon": "curly_bracket",
					"color": "brackethighlighter.curly",
					"style": "highlight"
				},
				"round": {
					"icon": "round_bracket",
					"color": "brackethighlighter.round",
					"style": "highlight"
				},
				"square": {
					"icon": "square_bracket",
					"color": "brackethighlighter.square",
					"style": "highlight"
				},
				"angle": {
					"icon": "angle_bracket",
					"color": "brackethighlighter.angle",
					"style": "highlight"
				},
				"tag": {
					"icon": "tag",
					"color": "brackethighlighter.tag",
					"style": "highlight"
				},
				"single_quote": {
					"icon": "single_quote",
					"color": "brackethighlighter.quote",
					"style": "highlight"
				},
				"double_quote": {
					"icon": "double_quote",
					"color": "brackethighlighter.quote",
					"style": "highlight"
				},
				"regex": {
					"icon": "regex",
					"color": "brackethighlighter.quote",
					"style": "outline"
				}
			}
		}
- ColorSublime:主题预览安装

		安装后输入colorsublime install即可安装color scheme
####格式化
- HTMLBeautify:格式化HTML
- AutoPEP8:格式化Python代码

	ctrl+shift+8 进行pep8格式化,ctrl+8 进行预览
- Alignment:进行智能对齐。

	ctrl+command+A 缩进、对齐字符
- CodeFormatter:自动格式化代码,支持多种编程语言,需要指定编程语言路径

	ctrl+command+F 格式化代码

	HTML的格式化配置需要改为下面内容
	
	    "codeformatter_html_options":
	    {
        "syntaxes": "html,blade,asp,xml", // Syntax names which must process HTML formatter
        "format_on_save": true, // Format on save
        "formatter_version": "regexp", // Which formatter to use. Current options are "bs4" and "regexp". If an error occurs while loading the bs4 formatter, the regexp formatter will automatically be used
        "indent_size": 4, // indentation size
        "indent_char": " ", // Indentation character
        "indent_with_tabs": true, // Indent with one tab (overrides indent_size and indent_char options)
        "exception_on_tag_mismatch": false, // If the last closing tag is not at the same indentation level as the first opening tag, there's probably a tag mismatch in the file
        "expand_javascript": true, // (Under construction) Expand JavaScript inside of <script> tags (also affects CSS purely by coincidence)
        "expand_tags": true, // Expand tag attributes onto new lines
        "minimum_attribute_count": 2, // Minimum number of attributes needed before tag attributes are expanded to new lines
        "first_attribute_on_new_line": false, // Put all attributes on separate lines from the tag (only uses 1 indentation unit as opposed to lining all attributes up with the first)
        "reduce_empty_tags": true, // Put closing tags on same line as opening tag if there is no content between them
        "custom_singletons": "" // Custom singleton tags for various template languages outside of the HTML5 spec
    	},
    
####命令行
- sublimeREPL:多种脚本语言的执行环境

####前端开发
- Emmet:前端开发神器 
>[https://www.w3cplus.com/tools/emmet-cheat-sheet.html](https://www.w3cplus.com/tools/emmet-cheat-sheet.html)
		
		后代:>
		nav>ul>li
		兄弟:+
		div+p+bq
		上级:^
		div+div>p>span+em^bq
		div+div>p>span+em^^bq
		分组:()
		div>(header>ul>li*2>a)+footer>p
		(div>dl>(dt+dd)*3)+footer>p
		乘法:*
		ul>li*5
		自增符号:$
		ul>li.item$*5
		h$[title=item$]{Header $}*3
		ul>li.item$$$*5
		ul>li.item$@-*5
		ul>li.item$@3*5
		属性(ID、类属性、自定义属性)
		#header
		.title
		form#search.wide
		p.class1.class2.class3
		p[title="Hello world"]
		[a='value1' b="value2"]
		td[rowspan=2 colspan=3 title]
		文本
		a{Click me}
		p>{Click }+a{here}+{ to continue}
		隐式标签
		.class
		em>.class
		ul>.class
		table>.row>.col
		
		
####Markdown
- OmniMarkupPreview:网页中预览markdown,支持局域网预览
	
		下面配置中去掉"strikeout",否则会报错404
		"extensions": ["tables", "strikeout", "fenced_code", "codehilite"]
- MarkdownEditing:markdown语法编辑
- MarkdownExtended:markdown显示主题

##Sublime使用技巧
>https://www.cnblogs.com/figure9/p/sublime-text-complete-guide.html

###配置技巧
####侧边栏打开多个目录
Project - Add Folder to Project
###编辑
####基本编辑
	ctrl + enter			下面新增一行并跳转到新行
	ctrl + shift + enter	上面新增一行并跳转到新行
	
	ctrl + ←/→				逐词移动
	ctrl + shift + ←/→		逐词选择
	ctrl + ↑/↓				移动当前显示区域
	ctrl + shift + ↑/↓		移动当前行

####选择(多重选择)
	ctrl + D				选择当前光标所在词
	ctrl + D				选择该词的下一个位置
	ctrl + K				跳过
	ctrl + U				回退
	Esc						退出多重编辑
###窗口&标签
####窗口
	ctrl + shift + N		创建新窗口
	ctrl + W				窗口内没有标签时,关闭窗口
####标签
	ctrl + N				创建新标签
	ctrl + W				关闭标签
	ctrl + shift + T		恢复刚关闭的标签
####分屏
	alt + shift + 1			单屏
	alt + shift + 2			左右2屏
	alt + shift + 3			左右3屏
	alt + shift + 4			左右2屏
	alt + shift + 5			上下左右分屏
	alt + shift + 8			上下2屏
	alt + shift + 9			上下3屏

##编码Coding
###编码规范

	// 设置tab的大小为2
	"tab_size": 2,
	// 使用空格代替tab
	"translate_tabs_to_spaces": true,
	// 添加行宽标尺
	"rulers": [80, 100],
	// 显示空白字符
	"draw_white_space": "all",
	// 保存时自动去除行末空白
	"trim_trailing_white_space_on_save": true,
	// 保存时自动增加文件末尾换行
	"ensure_newline_at_eof_on_save": true,

 

posted @ 2018-09-21 11:06  智昕  阅读(1594)  评论(0编辑  收藏  举报