SublimeText3系列(1)

Easter79
• 阅读 655

工欲善其事,必先利其器!
对于程序猿们来说,一个方便、快捷、跨平台的代码编辑器能够大大提高工作效率。
在前端开发中,SublimeText是使用较为广泛的编辑器。小伙伴们目前使用的版本主要为SublimeText2与SublimeText3。SublimeText2我们不提,文中针对的版本是SublimeText3,使用的是Windows版本。

1.SublimeText3的安装

可到SublimeText的官方网站下载安装包,有Mac OSX、Ubuntu、与Windows版本。各个系统版本安装都不困难,Windows版本的安装与其他软件安装差不多,自己选好安装目录,“下一步”就OK!
这里有个小技巧,在安装好SublimeText3后,先不捉急打开Sublime程序,先在安装目录下新建一个Data文件夹,这样之后安装的插件就会放在Data文件夹中,而不是放在默认的%APPDATA%/SublimeText3/Packages中。这样以后我们换机器、重装系统只需要把SublimeText3安装目录的文件直接Copy就可以,避免了重复安装配置。

2.常用设置

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 全屏模式

4.SublimeText3插件

各种插件都可以到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 elseopen(os.path.join( ipp, pf), 'wb' ).write(by)

PackageControl可能会出问题,大家可以参考这里的解决办法。

4.2 侧边栏增强工具SideBarEnhancements

SublimeText3的侧边栏原始功能是比较少的,右键菜单只有新建,删除,重命名几个基本的功能,SideBarEnhancements增加了“放入回收站”,“浏览器打开”等实用功能。
可使用Ctrl+Shift+P打开命令面板,输入Install Package使用PackageControl进行安装。
SublimeText3系列(1)
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:\\Users\\jeffj\\AppData\\Local\\Google\\Chrome\\Application\\chrome.exe",
                "extensions":".*"
            }
     }
]

这里设置按Ctrl+Shift+C复制文件路径,按F2即可在Chrome浏览器预览效果(如果需要的话,也可以根据自己的需要为Firefox,Safari,IE,Opera等加上),当然你也可以自己定义喜欢的快捷键,最后注意代码中的浏览器路径要以自己电脑里的文件路径为准。

4.3 ZenCoding语法支持Emmet

安装同上使用PackageControl进行安装。Emmet使用CSS的语法简化了HTML/CSS代码的编写,是猿类提高效率的好朋友。
Emmet的完整语法可以参考这里

4.4 括号高亮工具BracketLighter

安装同上使用PackageControl进行安装。
对括号、html标签进行高亮显示。
SublimeText3系列(1)

4.5 颜色显示工具Color Highlighter

安装同上使用PackageControl进行安装。
对颜色代码进行高亮显示。
SublimeText3系列(1)

4.6 颜色拾取Color Picker

安装同上使用PackageControl进行安装。
安装后,使用快捷键Ctrl+Shift+C可以调出取色板
SublimeText3系列(1)

有了上面的设置和插件,基本SublimeText已经可以玩的起来了,插件这东西少了不方便,多了机子卡,其实得不偿失。
后面文章会介绍一些其他的插件

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
3年前
java将前端的json数组字符串转换为列表
记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
5个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Souleigh ✨ Souleigh ✨
3年前
前端性能优化 - 雅虎军规
无论是在工作中,还是在面试中,web前端性能的优化都是很重要的,那么我们进行优化需要从哪些方面入手呢?可以遵循雅虎的前端优化35条军规,这样对于优化有一个比较清晰的方向.35条军规1.尽量减少HTTP请求个数——须权衡2.使用CDN(内容分发网络)3.为文件头指定Expires或CacheControl,使内容具有缓存性。4.避免空的
Stella981 Stella981
3年前
Linux下Python编程
linux下python编程可以使用sublimetext3来作为编辑器,很方便,而且linux默认就是有python2和python3环境安装的,我们只要安装sublimetext3即可进行python编程sudoupdatealternativesinstall/usr/bin/pythonpython/usr/bin/p
Easter79 Easter79
3年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
铁扇公主 铁扇公主
1年前
Sublime Text 4 Dev 注册中文版:Mac电脑强大的代码编辑器
SublimeText4Dev是SublimeText编辑器的开发版本,它是SublimeText3的后续版本。SublimeText是一款流行的跨平台文本编辑器,被广泛用于编程和文本编辑任务。以下是SublimeText4Dev的一些主要特点和功能:多平
Easter79
Easter79
Lv1
今生可爱与温柔,每一样都不能少。
文章
2.8k
粉丝
5
获赞
1.2k