今天pink来给大家分享一些关于sublimetext3的简单介绍sublime text 3怎么用方面的知识吧,希望大家会喜欢哦
1、SublimeText3是一款具有代码高亮、语法提示、自动完成且反应快速的编辑器软件,不仅具有华丽的界面,还支持插件扩展机制,用她来写代码,绝对是一种享受。
2、界面
3、先看下ST3的界面:
4、l从上到下:标题栏↓菜单栏↓tab控制栏↓编辑区↓状态栏;
5、l从做到右:分别是边栏(可关闭)→编辑区→MiniMap
6、菜单栏
7、各种命令,各种设置。
8、Tab栏
9、很多编辑器都有的,如果文件编辑过未保存,右上角有个小圆点提示保存,如果未保存关了也不用害怕,ST2很贴心,会帮我们自动保存。
10、编辑区
这是我们主要的工作区域,ST2支持代码自动缩进,代码折叠功能。
介绍几个常见的功能:
l自动完成:自动完成的快捷键是Tab和Enter,如果在html文件中,输入cl按下tab或Enter,即可自动补全为class=””;加上zencoding后,更是如虎添翼,后面再讲到。
l多列编辑:按住ctrl点击鼠标,会出现多个闪烁的光标,这时可同时修改多处
或者按住鼠标中键拖拽,
l代码注释功能:ctrl+/、ctrl+shift+/分别未行注释和块注释,再按一下就能去掉注释,ST3能够自动识别是html、css还是js文件,给出不同类型的注释。
l行操作:ctrl+alt+↑、ctrl+alt+↓向上或者向下交换两行,ctrl+enter,光标者饥慎后插入空行,ctrl+d选择相似,可以参考后面的快捷键列表。
l右键功能:
前3个,大家都知道,第4个,showunsavedchanges,显示未保存的修改,红色减号表示删去的内容,绿色加号表示新增的内容
OpenContainingFolder…,打开包含此文件的文件夹,这个很方便找到相关的文件。
CopyFilePath,复制文件路径,方便我们复制路径到浏览器中查看。
l人性化设计:从ST2开始就有很多设计细节还是值得称赞的,比如点击一个标签或者括弧,会在起始处显示下划点线,方便看清代码结构,每一层嵌套代码间都有竖线,起到视觉辅助的作用。选中某个词还会给其他地方相同的词加上方框。另外还有代码折叠功能。
三、设置
ST3的设置只有两个选项,分别是系统设置和快捷键设置。
一般我们修改设置的话,最好复制出来在user里修改,以免以后升级default被覆盖掉。
lSettings:在此文件里,可以修改很多东西,比如主题,字体,字号,是否显示行号、自动缩进、自动完成。很多都默认选中了,我另外修改肢岁了几处地方:
always_show_minimap_viewport——默认显示缩略图
draw_minimap_border——显示缩略图边框
font_size——字号
lKeyBindings:快捷键设置,ST3的快捷键很多,改的时候注意不要覆盖了。因为快捷键众多,所以有下面这种组合快捷键,先按下ctrl+k,松开k,再按下j就可以展开全部折叠代码了。
此处插入图首敬片
l主要快捷键列表
Ctrl+L选择整行(按住-继续选择下行)
Ctrl+KK从光标处删除至行尾
Ctrl+Shift+K删除整行
Ctrl+Shift+D复制光标所在整行,插入在该行之前
Ctrl+J合并行(已选择需要合并的多行时)
Ctrl+KU改为大写
Ctrl+KL改为小写
Ctrl+D选词(按住-继续选择下个相同的字符串)
Ctrl+M光标移动至括号内开始或结束的位置
Ctrl+Shift+M选择括号内的内容(按住-继续选择父括号)
Ctrl+/注释整行(如已选择内容,同“Ctrl+Shift+/”效果)
Ctrl+Shift+/注释已选择内容
Ctrl+Z撤销
Ctrl+Y恢复撤销
Ctrl+M光标跳至对应的括号
Alt+.闭合当前标签
Ctrl+Shift+A选择光标位置父标签对儿
Ctrl+Shift+[折叠代码
Ctrl+Shift+]展开代码
Ctrl+KT折叠属性
Ctrl+K0展开所有
Ctrl+U软撤销
Ctrl+T词互换
Tab缩进自动完成
Shift+Tab去除缩进
Ctrl+Shift+↑与上行互换
Ctrl+Shift+↓与下行互换
Ctrl+KBackspace从光标处删除至行首
Ctrl+Enter光标后插入行
Ctrl+Shift+Enter光标前插入行
Ctrl+F2设置书签
F2下一个书签
Shift+F2上一个书签
四、扩展
ST3是支持插件扩展的,首先,我们需要安装PackageControl,我会另外发文章介绍。
插件推荐(由于ST3使用python3语言开发,而目前大部分插件还是python2.x,所以暂时有些插件会用不了或会有所改变,请等待更新):
lZenCoding:前端必备,快速开发HTML/CSS,现已更名为Emmet。
输入div.wrapperdiv.header+div.main+div.footer按下Tab,立刻变成
或者按下ctrl+alt+enter,激发zencoding控制台,可看到整个动态的过程。
lJsFormat,格式化js代码,这个插件很有用,我们有时在网上看到某些效果,想查看是怎么实现的,但是代码被压缩过,很难阅读,不用怕,用ST3打开,按下快捷键,即可让代码还原,莫非是武林中失传已久的“还我靓靓拳”。
lTag格式化标签,让乱七八糟的代码,瞬间整齐清晰。
lBracketHighlighter,括弧高亮显示。
lClipboardHistory,剪切板历史,可以保存多个复制信息,按下ctrl+alt+v,可以选择历史剪切板。
lGoto-CSS-Declaration,跳转到css文件该class的声明处,方便修改查看,如图下所示,注意对应的css文件要同时打开才行。
lSCSS,支持scss的语法高亮,里面附带了好多CSSSnippet,无论现用或者改造成,都可节省不少时间。
还有很多插件,jquery语法提示,jsHint等等。
五、结语
总而言之,SublimeText3是一款不错的代码编写工具,有好看的ui,人性化的细节设计,全面的功能和扩展机制,如果你还没用过,请试一下,不会让你失望的。另外,希望ST3以后能完美支持中文。
1、在电脑上打开sublimetext3应用程序。
2、之后点击上方的preferences菜单,然升禅后点击箭头所指的选项。
3、在跳转的界面中,点击箭头所指的选项。
4、在跳转的界面中,找到中文安装包插件,并点击安装。
5、之后即卜态可成功将应用软件设置为中文吵弊尘。
SublimeText:一款具有代码高亮、语法提示、自动完成且反应快速的编辑器软件,不仅具有华丽的界面,还支持插件扩展机制,用她来写代码,绝对是一种享受。相比于难于上手的Vim,浮肿沉重的Eclipse,VS,即便体积轻巧迅速启动的Editplus、Notepad++,在SublimeText面前大略显失色,无疑这款性感无比的编辑器是Coding和Writing最佳的选择,没有之一。
原文首链,请移步这里如何优雅地使用SublimeText;最后更新于2015.12.15晚(不能为简书文章添加目录?,额,折腾不出来,醉了),但目录结构还是可以有的:
如何优雅地使用SublimeText之目录结构
SublimeText2和3的对比
SublimeText3安装插件
SublimeText3插件推荐
定制属于自己的快捷键
Sublime不可不知的实用技巧
定制属于自己的个性化主题
Sublime锦上添花些许设置
写在一路更来的结语
SublimeText2和3的对比
相比于2,SublimeText3就秒启动一项,就压倒性地胜利了。因此在之后的叙述中都以SublimeText3为主角。并且3一直在不断的完善更新,具体的差异可参看SublimeBlog.简单的说:
ST3支持在项目目录里面寻找变量
提供了对标签页更好地支持(更多的命令和快捷键)
加快了程序运行的速度
更新了API,使用Python3.3
强烈推荐朋友们使用3!唯快不破,不解释。
SublimeText3安装插件
SublimeText的强大就是她拥有强大的课可扩展性。您可根据自己的需要安装不同的插件;这使得她变的无比强大的同时又不失轻便。
插件安装方式一:直接安装:
安装Sublimetext3插件很方便,可以直接下载安装包解压缩到Packages目录(菜单-preferences-packages)。
插件安装方式二:使用PackageControl组件安装:
按Ctrl+`调出console(注:安装有QQ输入法的这个快捷键毁唯察会有冲突的,输入法属性设纤茄置-输入法管理-取消热键切换至QQ拼音)粘贴以下代码到底部命令行并回车:
importurllib.request,os;pf='PackageControl.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(''+pf.replace('','%20')).read())
重启SublimeText3。如果在Perferences-packagesettings中看到packagecontrol这一项,则安装成功。按下Ctrl+Shift+P调出命令面板输入install调出InstallPackage选项并回车,然后在列表中选中要安装的插件。
PS:国内使用SublimeText3,经常可能遇到无法安装可用插件问题,可remove掉PackageControl重新安装下;如遇到连PackageControl也无法安装,则可以在别处拷贝一份关于PackageControl的文件-(PackageControl.sublime-package)存放于InstalledPackages目录之下即可。
SublimeText3插件推荐
无插件,不神器!根据自己的需要定制属于自己的强大插件集;作为在移动端旧游之后,又Web端新游的自己,墙裂推荐以下这么几款插件:
MarkDownEditing
SublimeText不仅仅是能够查看和编辑Markdown文件,但它会视它们为格式很糟糕的纯文本。这个插件通过适当的颜色高亮和其它功能来更好地完成这些任务。关于如何在SublimeText下高效些东西可参山键见文章:sublimetext2(3)下的Markdown写作抑或是前段时间写下的追寻高效工作的一路折腾二
SideBarFolders
打开的文件夹都太多了?来用这个来管理文件夹,世界原来也可以这么美好。
SideBarFolders
SublimeTerminal
这个插件可以让你在Sublime中直接使用终端打开你的项目文件夹,并支持使用快捷键。
ColorPicker
通常,如果你想使用一个颜色选择器则可能打开Photoshop或GIMP。而在SublimeText中,你可以使用内置的颜色选择器。安装完成后,只要按下Ctrl/Cmd+Shift+C快捷键。
SublimeREPL
这可能是对程序员很有用的插件。SublimeREPL允许你在SublimeText中运行各种语言(NodeJS,Python,Ruby,Scala和Haskell等等)。
Ctags插件
有童鞋抱怨SublimeText不能支持函数的跳转(比如像Eclipse那样,按住Control点击该方法或者对象,即可跳转到定义的地方;Alt+←即可回到原处)。其实SublimeText也可以借助插件实现之(当然,有些情况下:Cannotfinddefination)毕竟这个也是借助正则来匹配完成的。因此这个也就要求代码很规范。这个插件相对来讲会有些麻烦,具体的可以参见:SublimeTextctags的配置.
SublimeLinter插件
SublimeLinter是前端编码利器——SublimeText的一款插件,用于高亮提示用户编写的代码中存在的不规范和错误的写法,支持JavaScript、CSS、HTML、Java、PHP、Python、Ruby等十多种开发语言。这篇文章介绍如何在Windows中配置SublimeLinter进行JSCSS校验。
比如写例如像lua这样的弱语言脚本代码,有这个可以规避掉很多不该有的低级错误吧?当然这也需要你SublimeLinter安装完毕之后再安装一个SublimeLinter-lua即可。具体的使用可以参见:借助SublimeLinter编写高质量的JavaScriptCSS代码
SideBarEnhancements插件
SideBarEnhancements是一款很实用的右键菜单增强插件;在安装该插件前,在SublimeText左侧FOLDERS栏中点击右键,只有寥寥几个简单的功能;安装了就相当于给其丰了大胸一般。
更强大的是,该插件还能让我们自定义快捷键呼出某个浏览器以预览页面!这样就不用到项目目录下寻找和拖动到特定浏览器中预览了。
安装此插件后,点击菜单栏的preferences-packagesetting-sidebar-KeyBuilding-User,键入以下代码:
[
{"keys":["ctrl+shift+c"],"command":"copy_path"},
//chrome
{"keys":["f2"],"command":"side_bar_files_open_with",
"args":{
"paths":[],
"application":"C:\\Users\\jeffj\\AppData\\Local\\Google\\Chrome\\Application\\chrome.exe",
"extensions":".*"
}
}
]
这里设置按Ctrl+Shift+C复制文件路径,按F2即可在Chrome浏览器预览效果(如果需要的话,也可以根据自己的需要为Firefox,Safari,IE,Opera等加上),当然你也可以自己定义喜欢的快捷键,最后注意代码中的浏览器路径要以自己电脑里的文件路径为准。
HTML-CSS-JSPrettify
一款集成了格式化(美化)html、css、js三种文件类型的插件,即便html,js写在PHP文件之内。插件依赖于nodejs,因此需要事先安装nodejs,然后才可以正常运行。插件安装完成后,快捷键ctrl+shift+H完成当前文件的美化操作。插件对html、css文件的美化不是非常满意,但还可以,后面将说明如何修改css美化脚本。本人用起来超级爽的,鉴于篇幅,就不赘述,可以参见这篇介绍。
CSScombCSS属性排序:
有时候看看自己写的CSS文件,会不会觉得属性很乱查找不易维护难?CSScomb可以按照一定的CSS属性排序规则,将杂乱无章的CSS属性进行重新排序。选中要排序的CSS代码,按Ctrl+Shift+C,即可对CSS属性重新排序了,代码从此简洁有序易维护,如果不款选代码则插件将排序文件中所有的CSS属性。当然,可以自己自定义CSS属性排序规则,打开插件目录里的CSScomb.sublime-settings文件,更改里面的CSS属性顺序就行了。因为这个插件使用PHP写的,要使他工作需要在环境变量中添加PHP的路径,具体请看github上的说明。
SublimeTmpl快速生成文件模板
一直都很奇怪为什么sublimetext3没有新建文件模板的功能,像html头部的DTD声明每次都要复制粘贴。用SublimeTmpl这款插件终于可以解脱了,SublimeTmpl能新建html、css、javascript、php、python、ruby六种类型的文件模板,所有的文件模板都在插件目录的templates文件夹里,可以自定义编辑文件模板。
SublimeTmpl默认的快捷键:
ctrl+alt+hhtml
ctrl+alt+jjavascript
ctrl+alt+ccss
ctrl+alt+pphp
ctrl+alt+rruby
ctrl+alt+shift+ppython
如果想要新建其他类型的文件模板的话,先自定义文件模板方在templates文件夹里,再分别打开Default(Windows).sublime-keymap、Default.sublime-commands、Main.sublime-menu、SublimeTmpl.sublime-settings这四个文件照着里面的格式自定义想要新建的类型,这里就详细介绍了,请各位自己折腾哈~
Javascript-API-Completions:
支持Javascript、JQuery、TwitterBootstrap框架、HTML5标签属性提示的插件,是少数支持sublimetext3的后缀提示的插件,HTML5标签提示sublimetext3自带,不过JQuery提示还是很有用处的,也可设置要提示的语言。
看此文章
1、首先打开sublimetext,在操作界面中点击输入:PackageControl:InstallPackage,回车确定。
2、然后在弹出来的界面中可以会看到默认的时候color的颜色显示方式为下划线,需要进行修改,选中"ha_style"掘闹闷:"Filled"进弯洞行复制。
3、然后将"ha_style":"Filled"粘贴到下图的位置,进行判弯保存。
4、然后输入代码,就可以看到字体有颜色了。
1、双击桌面的sublimetext3快捷方式打开它。
2、点击菜单栏的“编辑”选项,在出现的子菜单中点击“注释”选项,可以开启/关闭注释或者是开启/关闭区段注释。
3、点击菜单栏的“编辑”选项,然后在出现的子菜单中点击“代码折叠”选项,可以折叠和展开代码。
4、点击菜单栏的“查找”选项,然后在出现的子菜单中点击“查找”选项,可以根据需要查找信息内容。
5、也可以按下菜单栏的“查找”谨搏镇选项银消,输入要查找的内容以及要替换的内容,然后点击替换即可,这个祥粗是在当前文件中查找替换的。
1、打开sublimetext3编辑器。启动。
2、会发现代码会自动换行,
3、接下缺隐来我们开始设置自动换行。点击菜单栏“view”,取消打勾“wordwrap”。
4、然后这样代码就不会自动换行了,
5、当然你也可以指定每行代码的字符数再换行。点击菜单栏“view”——“wordwrapcolumn”伏搜厅——“100”(数值自己选择哈),就能指定每行字符数了。
6、漏颤如图,可以看到代码每行指定字符数后,代码才自动换行。
本文到这结束,希望上面文章对大家有所帮助
本文暂时没有评论,来添加一个吧(●'◡'●)