https://www.cnblogs.com/figure9/p/sublime-text-complete-guide.html
入门
简单介绍
一款具有代码高亮
、语法提示
、自动完成
且 反应快速
的编辑器软件,不仅具有华丽界面
,还支持插件扩展
机制,用她来写代码,绝对是一种享受。
安装插件
插件推荐
插件备份
定快捷键
个性主题
实用技巧
插件管理
插件查找
https://packagecontrol.io
插件安装
方式1:
可直接下载安装包解压缩到Packages目录(可通过菜单->preferences->browser packages
查看Packages目录位置)
方式2:
按Ctrl+
调出console(注:安装有QQ输入法的这个快捷键会有冲突的,输入法属性设置-输入法管理-取消热键切换至QQ拼音)。并粘贴以下代码到底部命令行并回车:
(在插件官网上找到插件时,一般都有介绍如何安装)
插件备份
插件是不可缺少的存在,而插件的备份就显得非常的重要(譬如:各平台同步;更换系统/电脑,迅速使用已安装的插件)。这事儿也很简单,只需将Packages
(Preferences > Browse Packages)中内容拷贝一份,同步云端即可;至于存储何处,云盘,Github,皆无不可。
管快捷键
查快捷键
reference->key bindings
设快捷键
reference->key bindings
选区色块
按Ctrl + Alt +方向键上(↑)
按Ctrl + Alt +方向键下(↓)
常用插件
基础
#格式美化
HTML-CSS-JS Prettify是一款集成了格式(美化)html、css、js
三种文件类型的插件,即便html,js写在PHP文件之内。
有时候看看自己写的CSS文件,会不会觉得属性很乱查找不易维护难?CSScomb可以按照一定的CSS属性排序规则,将杂乱无章的CSS属性进行重新排序
。选中要排序的CSS代码,按Ctrl+Shift+C,即可对CSS属性重新排序了,代码从此简洁有序易维护,如果不款选代码则插件将排序文件中所有的CSS属性。当然,可以自己自定义CSS属性排序规则,打开插件目录里的CSScomb.sublime-settings文件,更改里面的CSS属性顺序就行了。
格式jsx
不得不吐槽一下,花了一天的时间,终于找到一个能够实现的解决方案(找了N个)。
安装
# steps-01:安装jsfmt
# Open your command palette -> Package Control: Install Package -> jsfmt
# 或
ctrl+shift+p
pcip
jsfmt
# steps-02:安装
# 切换目录
cd ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/jsfmt/
# 即 steps-01安装的jsfmt所在的目录
# 安装依赖
npm i esformatter@latest esformatter-jsx@latest
配置
# steps-03:添加配置
{
"extensions":
[
"js",
"jsx",
"sublime-settings"
],
"options": {
"plugins": [
"esformatter-jsx",
],
"jsx": {
"formatJSX": true,
// change these to your preferred values
// refer to https://github.com/royriojas/esformatter-jsx#best-configuration for more options
"attrsOnSameLineAsTag": false,
"maxAttrsOnTag": 1,
"firstAttributeOnSameLine": false,
"alignWithFirstAttribute": true
}
// other esformatter options
}
}
命令
# steps-04:设快捷键
Go to Preferences -> Key Bindings - User
{ "keys": ["ctrl+alt+f"], "command": "format_javascript" },
参考
https://github.com/royriojas/esformatter-jsx/wiki/Usage-with-jsfmt
https://github.com/ionutvmi/sublime-jsfmt
sublime-jsfmt内部使用 esformatter-jsx工具, esformatter-jsx内核使用js-beautify格式化jsx。而esformatter-jsx是esformatter的插件,所以上面也安装了esformatter。
进阶
#文件模板
SublimeTmpl
能新建
html、css、javascript、php、python、ruby六种类型的文件模板,所有的文件模板都在插件目录的templates文件夹里,可以自定模板
。
如果想要新建其他类型的文件模板的话,先自定义文件模板放在templates文件夹里,再分别打开Default (Windows).sublime-keymap、Default.sublime-commands、Main.sublime-menu、SublimeTmpl.sublime-settings这四个文件照着里面的格式自定义想要新建的类型
#时间记录
WakaTime
可以做到精确地统计到你花在某个项目上的时间;WakaTime针对不同的IDE,拥有不同的插件,在Sublime上安装着插件,就能统计到我使用Sublime进行的所有项目的行为。可以高效管理和知晓自己code时间。
#代码注释
DocBlockr: 可以快速的对函数进行注释。保持代码规范。支持多种语言,有 JavaScript (including ES6), PHP, ActionScript, Haxe, CoffeeScript, TypeScript, Java, Apex, Groovy, Objective C, C, C++ and Rust.
-
/*
:回车创建一个代码块注释 -
/**
:回车在自动查找函数中的形参等等。
它会生成 JSDoc 格式的注释。如果你从没有使用过类似的工具,DocBlockr 会让你觉得以前没有它是如何写代码的。帮助你创造你的代码注释,通过解析功能,参数,变量,并且自动添加基本项目;如果你愿意其更为便捷,不妨再结合AutoHotKey
,高效注释,由此开启。
#版本控制
sublime-text-git: 可视化的操作:帮助你与你的Git repo协议进行交互。它支持很多命令像init,push, pull, branch, stash,等等。
#代码提示
Javascript-API-Completions:支持Javascript、JQuery、Twitter Bootstrap框架、HTML5标签属性提示的插件,是少数支持sublime text 3的后缀提示的插件,HTML5标签提示sublime text3自带,不过JQuery提示还是很有用处的,也可设置要提示的语言。
定制主题
http://tmtheme-editor.herokuapp.com/#!/editor/theme/Monokai
SublimeText 她不仅仅是作为性感无比,强大可大编辑器的存在;要知道在如今这么靠脸吃饭的时代,她的美者这方面怎么可能不臻至完美呢?Mac和Windows都默认十多种不同风格的主题,想必会有您喜欢😍的。即便没有也没关系,我们可以自己定制自己喜欢的风格主题。在线制作专属Sublime Text主题。这个网址可以轻松按照自己的意愿制作喜欢的主题。完毕之后将生成的xx.sublime.theme文件,点开Preferences -> Browsr Packages这个,放在这个直属目录之下,即可在Theme处选择这个主题了
运行脚本
首先安装nodejs:
当然你可以使用其它诸如jsc之类的环境来运行js, 本文使用的是nodejs. 首先确保你的电脑已经安装好nodejs, 并已将其添加到环境变量中。
添加build system:
在sublime text中依次打开Tools -> Build System -> New Build System… 粘贴以下代码后保存(如Node.sublime-build), 然后把Build System设成Automatic
{
'cmd': ['node', '-use-strict', '–harmony', '$file'],
'selector': 'source.js'
}
附加说明:
在以上的build文件中(Node.sublime-build), node是执行命令, –harmony和–use-strict是执行参数, $file是当前文件名, 所以一次build操作实际上相当于在命令行中执行了node –use-strict –harmony filename
. –harmony表示启用ES Harmony features, 而这些features目前只能在strict模式下运行, 所以需要同时添加use-strict参数(详见what-is-extended-mode).
具体使用:
在sublime test中新建一个test.js文件, 然后输入你的测试代码, 比如:
for (let i = 0; i < 3; i++) {
console.log('i:', i);
}
执行命令
ctrl + b
命令集录
浏览器看
https://jingyan.baidu.com/article/ca41422f0e24731eaf99ed58.html
参考:https://www.sublimetext.com/docs/3/build_systems.html
更换图标
在Dribbble上有大量重新设计的Sublime Text精美图标。更换方法(按如下操作并没有成功!!!):
1. 下载一个图标,有`.icns`格式的最好。如果没有,用[iConvert](https://iconverticons.com/)转换之。
2. 终端执行:`open /Applications/Sublime\ Text.app/Contents/Resources/`
3. 替换`Sublime Text 3.icns`或`Sublime Text 2.icns`文件。
我用的另一方法。。。
英文检查
选择Preferences > Settings – User菜单,添加以下代码:
“spell_check”: true,
专题
设置
Sublime Text has many different settings to customize its behavior(有何作用
). Settings are changed by editing text files(配置方式
): while this is a little trickier than using a GUI, you're rewarded with a flexible system.
Settings are accessed via thePreferences >Settings
menu item(查看配置
). The left-hand pane contains all of the default settings(默认设置
), along with a description of each. The right-hand pane is where customization can be saved(自定配置
).
配置分类
The settings in Sublime Text are organized into three categories. The default settings file organizes the settings into sections for easier distinction.
Editor Settings
: These settings affect the behavior and functionality presented when editing text in a file. Examples include the font_face
, tab_size
and spell_check
. These settings are presented in the first section of the default settings file.——其编辑器
User Interface Settings
: These settings affect the general user interface, across all open windows. Examples include the theme
, animation_enabled
and overlay_scroll_bars
. These settings are presented in the second section of the default settings file.——用户界面
Application Behavior Settings
: These settings affect the behavior of the application, across all open windows. Examples include the hot_exit
, index_files
and gnored_packages
. These settings are presented in the third section of the default settings file.——应用行为
The User Interface Settings and Application Behavior Settings are global to the entire application (应用级别配置
)and can not be controlled by a syntax specific settings file, nor the settings key in a .sublime-project.
配置文件
Settings files are consulted in this order(读取顺序
):
1、Packages/Default/Preferences.sublime-settings
2、Packages/Default/Preferences (<platform>).sublime-settings
3、Packages/User/Preferences.sublime-settings
4、<Project Settings>
5、Packages/<syntax>/<syntax>.sublime-settings
6、Packages/User/<syntax>.sublime-settings
7、<Buffer Specific Settings>
In general, you should place your settings in Packages/User/Preferences.sublime-settings(存放位置
), which is opened in the right-hand pane when selecting the menu item Preferences>Settings
. If you want to specify settings for a certain file type(指定语言
), for example, Python, you should place them in Packages/User/Python.sublime-settings
. This can be accessed via the right-hand pane when a Python file is open, and the menu item Preferences>Settings – Syntax Specific
is selected.——右键菜单
内容辨别
Settings may be specified on a per-syntax basis. Common uses for this are to have different indentation settings(内容缩进
) or the color scheme (指定颜色
)vary by file type.
You can edit the settings for the syntax of the current file by selecting the Preferences>Settings – Syntax Specificmenu
item.——"辨别语法"
Note that only Editor Settings
can be specified in syntax specific settings.
工程配置
Settings can be set on a per-project basis(工程级别配置
), details are in the Project Documentation.
Note that only Editor Settings
can be specified in syntax specific settings.
通过快捷方式改变配置
steps-01:按键绑定
toggle_setting
command can be used to toggle a setting. For example, to make a key binding that toggles the word_wrap
setting on the current file, you can use (in Preferences> Key Bindings
):
{
"keys": ["alt+w"],
"command": "toggle_setting",
"args":
{
"setting": "word_wrap"
}
}
the set_setting
command can be used to set a setting to a specific value.
steps-02:用快捷键
alt+w
The settings modified here are buffer specific settings
(临时缓存专性配置): they override any settings placed in a settings file, but apply to the current file only.
冲突解决
As settings can be specified in several different places(为何发生
), sometimes in can be helpful to view the applied setting that's actually being used by the current file(查看配置
). You can do this by using the console:
//steps-01:开控制台
ctrl + `
//steps-02:输入命令
view.settings().get('font_face')
//steps-03:按下回车
enter
简单示例
/************************设置字体**************/
//steps-01:打开文件
Preferences > Settings
//steps-02:修改内容
"font_face": "Courier New",
"font_size": 10
//steps-03:保存内容
ctrl + s
/************************缩进设置**************/
/************************拼写检查**************/
"spell_check": true,
"dictionary": "Packages/Language - English/en_US.dic"
/************************构建命令**************/
缩进设置
Indentation settings determine the size of the tab stops, and control whether the tab key should insert tabs or spaces. In addition to the automatic detection, they can be customized globally, per-file type, or per-file.
参数选项
读写顺序
1、Packages/Default/Preferences.sublime-settings——默认级-最最基础
2、Packages/Default/Preferences (<platform>).sublime-settings——默认级-某一平台
3、Packages/User/Preferences.sublime-settings——用户级-最最基础
4、Packages/<syntax>/<syntax>.sublime-settings
5、Packages/User/<syntax>.sublime-settings——用户级-某一文件类型
模块
https://packagecontrol.io/docs/usage
快捷键集
Ctrl+Shift+P:打开命令面板
Ctrl+P:搜索项目中的文件
Ctrl+G:跳转到第几行
Ctrl+W:关闭当前打开文件
Ctrl+Shift+W:关闭所有打开文件
Ctrl+Shift+V:粘贴并格式化
Ctrl+D:选择单词,重复可增加选择下一个相同的单词
Ctrl+L:选择行,重复可依次增加选择下一行
Ctrl+Shift+L:选择多行
Ctrl+Shift+Enter:在当前行前插入新行
Ctrl+X:删除当前行
Ctrl+M:跳转到对应括号
Ctrl+U:软撤销,撤销光标位置
Ctrl+J:选择标签内容
Ctrl+F:查找内容
Ctrl+Shift+F:查找并替换
Ctrl+H:替换
Ctrl+R:前往 method
Ctrl+N:新建窗口
Ctrl+K+B:开关侧栏
Ctrl+Shift+M:选中当前括号内容,重复可选着括号本身
Ctrl+F2:设置/删除标记
Ctrl+/:注释当前行
Ctrl+Shift+/:当前位置插入注释
Ctrl+Alt+/:块注释,并Focus到首行,写注释说明用的
Ctrl+Shift+A:选择当前标签前后,修改标签用的
F11:全屏
Shift+F11:全屏免打扰模式,只编辑当前文件
Alt+F3:选择所有相同的词
Alt+.:闭合标签
Alt+Shift+数字:分屏显示
Alt+数字:切换打开第N个文件
Shift+右键拖动:光标多不,用来更改或插入列内容
鼠标的前进后退键可切换Tab文件
按Ctrl,依次点击或选取,可需要编辑的多个位置
按Ctrl+Shift+上下键,可替换行
选择类
Ctrl+D 选中光标所占的文本,继续操作则会选中下一个相同的文本。
Alt+F3 选中文本按下快捷键,即可一次性选择全部的相同文本进行同时编辑。举个栗子:快速选中并更改所有相同的变量名、函数名等。
Ctrl+L 选中整行,继续操作则继续选择下一行,效果和 Shift+↓ 效果一样。
Ctrl+Shift+L 先选中多行,再按下快捷键,会在每行行尾插入光标,即可同时编辑这些行。
Ctrl+Shift+M 选择括号内的内容(继续选择父括号)。举个栗子:快速选中删除函数中的代码,重写函数体代码或重写括号内里的内容。
Ctrl+M 光标移动至括号内结束或开始的位置。
Ctrl+Enter 在下一行插入新行。举个栗子:即使光标不在行尾,也能快速向下插入一行。
Ctrl+Shift+Enter 在上一行插入新行。举个栗子:即使光标不在行首,也能快速向上插入一行。
Ctrl+Shift+[ 选中代码,按下快捷键,折叠代码。
Ctrl+Shift+] 选中代码,按下快捷键,展开代码。
Ctrl+K+0 展开所有折叠代码。
Ctrl+← 向左单位性地移动光标,快速移动光标。
Ctrl+→ 向右单位性地移动光标,快速移动光标。
shift+↑ 向上选中多行。
shift+↓ 向下选中多行。
Shift+← 向左选中文本。
Shift+→ 向右选中文本。
Ctrl+Shift+← 向左单位性地选中文本。
Ctrl+Shift+→ 向右单位性地选中文本。
Ctrl+Shift+↑ 将光标所在行和上一行代码互换(将光标所在行插入到上一行之前)。
Ctrl+Shift+↓ 将光标所在行和下一行代码互换(将光标所在行插入到下一行之后)。
Ctrl+Alt+↑ 向上添加多行光标,可同时编辑多行。
Ctrl+Alt+↓ 向下添加多行光标,可同时编辑多行。
编辑类
Ctrl+J 合并选中的多行代码为一行。举个栗子:将多行格式的CSS属性合并为一行。
Ctrl+Shift+D 复制光标所在整行,插入到下一行。
Tab 向右缩进。
Shift+Tab 向左缩进。
Ctrl+K+K 从光标处开始删除代码至行尾。
Ctrl+Shift+K 删除整行。
Ctrl+/ 注释单行。
Ctrl+Shift+/ 注释多行。
Ctrl+K+U 转换大写。
Ctrl+K+L 转换小写。
Ctrl+Z 撤销。
Ctrl+Y 恢复撤销。
Ctrl+U 软撤销,感觉和 Gtrl+Z 一样。
Ctrl+F2 设置书签
Ctrl+T 左右字母互换。
F6 单词检测拼写
搜索类
Ctrl+F 打开底部搜索框,查找关键字。
Ctrl+shift+F 在文件夹内查找,与普通编辑器不同的地方是sublime允许添加多个文件夹进行查找,略高端,未研究。
Ctrl+P 打开搜索框。举个栗子:1、输入当前项目中的文件名,快速搜索文件,2、输入@和关键字,查找文件中函数名,3、输入:和数字,跳转到文件中该行代码,4、输入#和关键字,查找变量名。
Ctrl+G 打开搜索框,自动带:,输入数字跳转到该行代码。举个栗子:在页面代码比较长的文件中快速定位。
Ctrl+R 打开搜索框,自动带@,输入关键字,查找文件中的函数名。举个栗子:在函数较多的页面快速查找某个函数。
Ctrl+: 打开搜索框,自动带#,输入关键字,查找文件中的变量名、属性名等。
Ctrl+Shift+P 打开命令框。场景栗子:打开命名框,输入关键字,调用sublime text或插件的功能,例如使用package安装插件。
Esc 退出光标多行选择,退出搜索框,命令框等。
显示类
Ctrl+Tab 按文件浏览过的顺序,切换当前窗口的标签页。
Ctrl+PageDown 向左切换当前窗口的标签页。
Ctrl+PageUp 向右切换当前窗口的标签页。
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+K+B 开启/关闭侧边栏。
F11 全屏模式
Shift+F11 免打扰模式
update
Ctrl+k+2 折叠注释和方法
Ctrl+k+3 折叠if
Ctrl+k+4 折叠switch