这里给出sublime text3 免安装版的绿色软件,已自带较多组件和插件,个人认为较为完善的版本。
下载下来选择对应 x86 或 x64 的版本直接使用。
下载地址:点击下载
-----------------------------------------------------
当然也可以自己去官网下载,再安装插件自行汉化:
官网地址:Sublime Text - Text Editing, Done Right
下面为对sublime text3自定义配置一些使用操作:
【1】如何显示当前文件的编码
Sublime Text的默认设置是不开启显示编码的,如果想开启,可通过菜单,首选项→设置 – User设置,在打开的配置文件里 ,在后面,增加以下内容:
"show_encoding": true,
"show_line_endings": true
注意结尾 , (逗号)的闭合
【2】在同窗口打开新的项目(文件夹)
首选项→设置 – User设置,在打开的配置文件里 ,在后面,增加以下内容:
"open_files_in_new_window":false (这个只针对文件起作用)
要设置对文件夹起作用,还是用下面方式打开,
项目-添加文件夹到项目
【3】关闭/开启分屏
视图-布局
【4】显示左侧目录栏
视图-侧边栏-显示侧边栏
【5】关闭单击打开标签页,覆盖前标签页
就是默认状态下,单击目录中一个文件,会打开此文件,并把之前打开的文件覆盖掉。
现在需要关闭此情况,双击打开文件在新的标签页打开。
首选项→设置 – User设置,在打开的配置文件里 ,在后面,增加以下内容:
"preview_on_click": false
===================================================
下面为我平常使用的一些设置,可以直接复制使用:
{
"color_scheme": "Packages/Color Scheme - Default/Monokai.sublime-color-scheme",
"ignored_packages":["Vintage"],
"fade_fold_buttons": true, //代码折叠按钮一直显示
"font_size": 14, //字体
"highlight_line": false, //高亮选择当前选中代码行,关闭
"open_files_in_new_window": false, //关闭新窗口打开
"preview_on_click": false, //关闭单击左侧栏文件打开文件(因为单击打开会覆盖已打开文件)
"save_on_focus_lost": true,//自动保存
"show_encoding": true, //显示编码
"show_full_path": true, //显示文件完整路径
"show_line_endings": true, //显示行结束符
"word_wrap": true, //自动换行
"update_check": false, //关闭自动更新
//如果用来编辑python代码,加下面代码
"draw_white_space": "all" ,//显示符号和制表符,默认selection
"tab_size": 4, //tab为4个空格
"translate_tabs_to_spaces": true, //在按tab键时插入空格
"expand_tabs_on_save": true //设置保存时自动转换
}
下面为一些需要安装的实用插件:
安装插件前需要sublime text3软件已安装 Package Control 组件,因为上面提供的下载版本自带这个组件,那就直接安装插件就行。
如果下载的官方版,没有安装Package Control 组件,则按下面两个步骤安装:
①打开sublime界面,按Ctrl+shift+P组合键,出现界面
②搜索install package control,然后直接点击安装。安装好后就会有弹窗提示信息。
-------------------------------------------------------------------------
下面讲解插件安装步骤:
(1)按Ctrl+Shift+P调出命令面板,输入install Package
(2)搜索需要的插件名称,安装即可。(拿Emmet举例)
(3)查看是否安装成功。
安装完成重启sublime text3,点击首选项->Package Settings-> 看到有Emmet,则安装成功。
=========================================================
下面开始例举实用的插件
【1】ChineseLocalization #各国的语言包,其实就是汉化软件的方法。安装完点击help->language->选择相应语言版本。
【2】Emmet #命令补全插件(例如生成html代码)
【3】ConvertToUTF8 #可以编辑并保存目前编码不被 Sublime Text 支持的文件,特别是中日韩用户使用的 GB2312,GBK,BIG5,EUC-KR,EUC-JP 等。简单说就是能打开其他编码格式的代码文件。
【4】Alignment #代码对齐,选中要调整的行,然后按 Ctrl+ Alt + A
【5】DocBlockr #全自动代码补全注释的插件,快捷生成注释。
【6】Ctags #跳转到函数方法
【7】AutoFileName #自动补全文件路径,非常方便。强烈推荐。
【8】sublimeLinter,sublimeLinter-php #用来检测php代码错误的插件
【9】Trimmer #自动删除代码中不必要的空格
【10】All Autocomplete #搜索所有打开的文件来寻找匹配的提示词。
【11】BracketHighlighter #配置文件的高亮设置,让你的代码有不同的颜色区分该插件提供配对标签,或大括号或字符引号的配对高亮显示,算是对系统高亮的加强吧。
【12】Sublimerge #这个插件可以用来比对两个文件的不同之处,除了可以和本地文件比对还可以和git上面的历史版本对比,本人主要用于本地文件对比。选中文件右键就可以加入对比。
【13】pretty json #这个插件可以用来格式化json代码的内容。选中内容、使用ctrl+ alt+ j快捷键转化。
【14】sublime_thinkphp5 ### 这个是个人制作的TP5语法支持插件,超级方便实用。下载压缩包后解压出来,将文件放到
sublime text3的插件目录下就可以。下载链接:文件分享
【15】codeFormatter ###比较重要的插件,ctrl+alt+f 就可以实现php代码格式化(俗称对齐)。安装好之后需要配置php.exe的路径信息。操作说明:preferences->Package Settings->CodeFormatter->Settings - Default。打开这个之后可以看到:
"codeformatter_php_options":
{
"syntaxes": "php", // Syntax names which must process PHP formatter
"php_path": " ",
.......省略
}
需要在php_path里面填入你本地电脑装的php程序的运行文件php.exe的目录。
比如我的是phpstudy,这个插件只支持php5.6版本及以上,但是测试发现php7版本又报错,所以选择了php5.6版本。
我的路径为:"php_path": "C:/phpStudy/PHPTutorial/php/php-5.6.27-nts/php.exe",
使用的时候ctrl+alt+f6,会对整个文件进行格式化。
【16】EditorConfig 编码规划化,统一格式
------------------------(如果是后端程序员,基本安装以上16个插件就行了)------------------------------------------
【17】Autoprefixer #主要应用css的浏览器兼容书写,自动分析你的css文件,解析出新的css文件,可以配置你要兼容的浏览器,不过这个插件要在之前安装nodejs
【18】SublimeCodeIntel #一个全功能的 Sublime Text 代码自动完成引擎,主要用于代码自动补全,函数追踪。
【19】HTML-CSS-JS Prettify #一键格式化HTML,CSS,Javascript代码
【20】HTML5 #支持hmtl5规范的插件包,与Emmet插件配合使用,效果更好
【21】jQuery #支持JQuery规范的插件包
【22】JSFormat #主要用于javascript代码格式化。快捷键:ctrl+alt+f
【23】ColorPicker #取色板。快捷键:ctrl+shift+c ,会和ConvertToUTF8按键冲突。(改键:导航栏点击首选项->浏览插件目录->打开ColorPicker 文件夹, 打开Default (Windows).sublime-keymap文件,编辑按键,保存重启软件即可 )
【24】Color Highlighter #css中如果用了颜色代码,会自动显示该代码的颜色
下面为一些实用快捷键说明
【1】代码注释
”Ctrl+/” 使用//对代码进行每行或多行注释
“Ctrl+Shft+/” 使用/* */对代码进行注释
【2】快速打开项目中文件
"ctrl + P " 输入文件名称即可切换打开了
【3】使用" ! " + " Tab " 键进行生成html5初始代码,使用tab键补全代码。
首先要安装Emmet插件,安装插件前需要sublime text3软件已安装 Package Control 组件,因为上面提供的下载版本自带这个组件,那就直接安装Emmet插件就行。
下面为Emmet插件快捷生成标签代码的技巧:
[1] 生成html5代码
!或者 html:5 + tab键
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
[2] utf-8编码
meta:utf + tab
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
[3] 生成移动端标签
meta:vp + tab
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
[4]兼容 IE
meta:compat + tab
<meta http-equiv="X-UA-Compatible" content="IE=edge">
[5] css调用
link + tab
[6] script 调用
script:src + tab
[7] p标签 div标签 a标签
p.red + tab <p class="red"></p>
div.blue +tab <div class="blue"></div>
div#yy +tab <div id="yy"></div>
a:link + tab <a href="http://"></a>
[8]重复生成
ul>li*5
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
[9] 快速生成导航栏列表
ul.list>li.item*8>a{导航}
<ul class="list">
<li class="item"><a href="">导航</a></li>
<li class="item"><a href="">导航</a></li>
<li class="item"><a href="">导航</a></li>
<li class="item"><a href="">导航</a></li>
<li class="item"><a href="">导航</a></li>
<li class="item"><a href="">导航</a></li>
<li class="item"><a href="">导航</a></li>
<li class="item"><a href="">导航</a></li>
</ul>
ul.list>li.item*8>a{导航$}
<ul class="list">
<li class="item"><a href="">导航1</a></li>
<li class="item"><a href="">导航2</a></li>
<li class="item"><a href="">导航3</a></li>
<li class="item"><a href="">导航4</a></li>
<li class="item"><a href="">导航5</a></li>
<li class="item"><a href="">导航6</a></li>
<li class="item"><a href="">导航7</a></li>
<li class="item"><a href="">导航8</a></li>
</ul>
ul.list>li.item*8>a{导航$$}
<ul class="list">
<li class="item"><a href="">导航01</a></li>
<li class="item"><a href="">导航02</a></li>
<li class="item"><a href="">导航03</a></li>
<li class="item"><a href="">导航04</a></li>
<li class="item"><a href="">导航05</a></li>
<li class="item"><a href="">导航06</a></li>
<li class="item"><a href="">导航07</a></li>
<li class="item"><a href="">导航08</a></li>
</ul>
ul.list>li.item*8>a{导航$@-}
<ul class="list">
<li class="item"><a href="">导航8</a></li>
<li class="item"><a href="">导航7</a></li>
<li class="item"><a href="">导航6</a></li>
<li class="item"><a href="">导航5</a></li>
<li class="item"><a href="">导航4</a></li>
<li class="item"><a href="">导航3</a></li>
<li class="item"><a href="">导航2</a></li>
<li class="item"><a href="">导航1</a></li>
</ul>
ul.list>li.item*8>a{导航$@50}
<ul class="list">
<li class="item"><a href="">导航50</a></li>
<li class="item"><a href="">导航51</a></li>
<li class="item"><a href="">导航52</a></li>
<li class="item"><a href="">导航53</a></li>
<li class="item"><a href="">导航54</a></li>
<li class="item"><a href="">导航55</a></li>
<li class="item"><a href="">导航56</a></li>
<li class="item"><a href="">导航57</a></li>
</ul>