摘要:可使用打开命令面板,输入使用进行安装。对括号标签进行高亮显示。颜色显示工具安装同上使用进行安装。安装后,使用快捷键可以调出取色板有了上面的设置和插件,基本已经可以玩的起来了,插件这东西少了不方便,多了机子卡,其实得不偿失。
工欲善其事,必先利其器!
对于程序猿们来说,一个方便、快捷、跨平台的代码编辑器能够大大提高工作效率。
在前端开发中,SublimeText是使用较为广泛的编辑器。小伙伴们目前使用的版本主要为SublimeText2与SublimeText3。SublimeText2我们不提,文中针对的版本是SublimeText3,使用的是Windows版本。
可到SublimeText的官方网站下载安装包,有Mac OSX、Ubuntu、与Windows版本。各个系统版本安装都不困难,Windows版本的安装与其他软件安装差不多,自己选好安装目录,“下一步”就OK!
这里有个小技巧,在安装好SublimeText3后,先不捉急打开Sublime程序,先在安装目录下新建一个Data文件夹,这样之后安装的插件就会放在Data文件夹中,而不是放在默认的%APPDATA%/SublimeText3/Packages中。这样以后我们换机器、重装系统只需要把SublimeText3安装目录的文件直接Copy就可以,避免了重复安装配置。
SublimeText3的默认设置也可以,不过自己配置下,可以让自己的眼睛舒服一点,下面是我的配置,大家可以参考。打开Preference->Setting-User可以进行用户自定义设置
{ "ignored_packages": [ "Vintage" ], // 设置字体 /*"font_face": "Microsoft Yahei",*/ "font_size": 16, // 使光标闪动更加柔和 "caret_style": "phase", // 高亮当前行 "highlight_line": true, // 高亮有修改的标签 "highlight_modified_tabs": true, // 焦点丢失后自动保存 "save_on_focus_lost": true, // 显示当前文件的编码 "show_encoding": true, // 设置tab键的大小 "tab_size": 2, // tab转换为空格 "translate_tabs_to_spaces": true, // 保存的时候把无用的空格去掉 "trim_trailing_white_space_on_save": true, // 自动换行 "word_wrap": false, // 拼写检查 "spell_check": false, // 要不要滚过头 "scroll_past_end": true, // 加粗文件夹名称 "bold_folder_labels": true, // 宽度指导线 "rulers": [80], // 显示全路径 "show_full_path": true, //禁用 Emmet 的 tab 键功能(请使用 ctrl+e) "disable_tab_abbreviations": true }3.SublimeText3常用快捷键
Ctrl+D 选词 (反复按快捷键,即可继续向下同时选中下一个相同的文本进行同时编辑)
Ctrl+G 跳转到相应的行
Ctrl+J 合并行(已选择需要合并的多行时)
Ctrl+L 选择整行(按住-继续选择下行)
Ctrl+M 光标移动至括号内开始或结束的位置
Ctrl+T 词互换
Ctrl+U 软撤销
Ctrl+P 查找当前项目中的文件和快速搜索;输入 @ 查找文件主标题/函数;或者输入 : 跳转到文件某行;
Ctrl+R 快速列出/跳转到某个函数
Ctrl+K Backspace 从光标处删除至行首
Ctrl+K+B 开启/关闭侧边栏
Ctrl+KK 从光标处删除至行尾
Ctrl+K+T 折叠属性
Ctrl+K+U 改为大写
Ctrl+K+L 改为小写
Ctrl+K+0 展开所有
Ctrl+Enter 插入行后(快速换行)
Ctrl+Tab 当前窗口中的标签页切换
Ctrl+Shift+A 选择光标位置父标签对儿
Ctrl+Shift+D 复制光标所在整行,插入在该行之前
ctrl+shift+F 在文件夹内查找,与普通编辑器不同的地方是sublime允许添加多个文件夹进行查找
Ctrl+Shift+K 删除整行
Ctrl+Shift+L 鼠标选中多行(按下快捷键),即可同时编辑这些行
Ctrl+Shift+M 选择括号内的内容(按住-继续选择父括号)
Ctrl+Shift+P 打开命令面板
Ctrl+Shift+/ 注释已选择内容
Ctrl+Shift+↑可以移动此行代码,与上行互换
Ctrl+Shift+↓可以移动此行代码,与下行互换
Ctrl+Shift+[ 折叠代码
Ctrl+Shift+] 展开代码
Ctrl+Shift+Enter 光标前插入行
Ctrl+PageDown 、Ctrl+PageUp 文件按开启的前后顺序切换
Ctrl+Z 撤销
Ctrl+Y 恢复撤销
Ctrl+F2 设置/取消书签
Ctrl+/ 注释整行(如已选择内容,同“Ctrl+Shift+/”效果)
Ctrl+鼠标左键 可以同时选择要编辑的多处文本
Shift+鼠标右键(或使用鼠标中键)可以用鼠标进行竖向多行选择
Shift+F2 上一个书签
Shift+Tab 去除缩进
Alt+Shift+1(非小键盘)窗口分屏,恢复默认1屏
Alt+Shift+2 左右分屏-2列
Alt+Shift+3 左右分屏-3列
Alt+Shift+4 左右分屏-4列
Alt+Shift+5 等分4屏
Alt+Shift+8 垂直分屏-2屏
Alt+Shift+9 垂直分屏-3屏
Ctrl+Shift+分屏序号 将当前焦点页分配到分屏序号页
Alt+. 闭合当前标签
Alt+F3 选中文本按下快捷键,即可一次性选择全部的相同文本进行同时编辑
Tab 缩进 自动完成
F2 下一个书签
F6 检测语法错误
F9 行排序(按a-z)
F11 全屏模式
各种插件都可以到Package Control上去搜索
4.1 管理插件的插件PackageControl第一个要安装的插件就是Package Control,这是一个管理SublimeText3的插件,有了它,安装、更新、删除其他插件都变得简单。
安装方法PackageControl网站已经给出,大家可以戳这里
其实就是使用Ctrl+`快捷键打开SublimeText3的命令行窗口,然后复制下面的代码,回车即可。
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)
PackageControl可能会出问题,大家可以参考这里的解决办法。
4.2 侧边栏增强工具SideBarEnhancementsSublimeText3的侧边栏原始功能是比较少的,右键菜单只有新建,删除,重命名几个基本的功能,SideBarEnhancements增加了“放入回收站”,“浏览器打开”等实用功能。
可使用Ctrl+Shift+P打开命令面板,输入Install Package使用PackageControl进行安装。
SideBarEnhancements插件可以自定义快捷键打开浏览器预览页面,免去了自己去文件目录打开浏览器测试的麻烦,这个功能太好太强大~~~这里要感谢 jeffjade童靴的分享
可通过preferences->package setting->side bar->Key Bindings-User,键入以下代码:
[ { "keys": ["ctrl+shift+c"], "command": "copy_path" }, //chrome { "keys": ["f2"], "command": "side_bar_files_open_with", "args": { "paths": [], "application": "C:UsersjeffjAppDataLocalGoogleChromeApplicationchrome.exe", "extensions":".*" } } ]
这里设置按Ctrl+Shift+C复制文件路径,按F2即可在Chrome浏览器预览效果(如果需要的话,也可以根据自己的需要为Firefox,Safari,IE,Opera等加上),当然你也可以自己定义喜欢的快捷键,最后注意代码中的浏览器路径要以自己电脑里的文件路径为准。
4.3 ZenCoding语法支持Emmet安装同上使用PackageControl进行安装。Emmet使用CSS的语法简化了HTML/CSS代码的编写,是猿类提高效率的好朋友。
Emmet的完整语法可以参考这里
安装同上使用PackageControl进行安装。
对括号、html标签进行高亮显示。
安装同上使用PackageControl进行安装。
对颜色代码进行高亮显示。
安装同上使用PackageControl进行安装。
安装后,使用快捷键Ctrl+Shift+C可以调出取色板
有了上面的设置和插件,基本SublimeText已经可以玩的起来了,插件这东西少了不方便,多了机子卡,其实得不偿失。
后面文章会介绍一些其他的插件
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/115024.html
摘要:可使用打开命令面板,输入使用进行安装。对括号标签进行高亮显示。颜色显示工具安装同上使用进行安装。安装后,使用快捷键可以调出取色板有了上面的设置和插件,基本已经可以玩的起来了,插件这东西少了不方便,多了机子卡,其实得不偿失。 工欲善其事,必先利其器!对于程序猿们来说,一个方便、快捷、跨平台的代码编辑器能够大大提高工作效率。在前端开发中,SublimeText是使用较为广泛的编辑器。小伙伴...
摘要:对于不同的代码文本,可以使用不同的代码检查工具进行检查。本文中介绍代码检查插件,与代码检查插件。默认为,设置为表示只对文件的根目录有效,设置为表示禁止文件的查找。效果如下黄色代表警告,红色代表错误。 1.什么是linter? linter是用来检查代码是否符合规则的工具,例如检查Javascript代码的jshint工具,你可以设置其规则eqeqeq:true,那么如果在你的代码文件中...
摘要:对于不同的代码文本,可以使用不同的代码检查工具进行检查。本文中介绍代码检查插件,与代码检查插件。默认为,设置为表示只对文件的根目录有效,设置为表示禁止文件的查找。效果如下黄色代表警告,红色代表错误。 1.什么是linter? linter是用来检查代码是否符合规则的工具,例如检查Javascript代码的jshint工具,你可以设置其规则eqeqeq:true,那么如果在你的代码文件中...
阅读 1211·2021-11-24 09:39
阅读 362·2019-08-30 14:12
阅读 2571·2019-08-30 13:10
阅读 2393·2019-08-30 12:44
阅读 933·2019-08-29 16:31
阅读 816·2019-08-29 13:10
阅读 2411·2019-08-27 10:57
阅读 3141·2019-08-26 13:57