sublime 使用技巧

视频教程来源youtube

已经弄到 B站 https://www.bilibili.com/video/av14098574/

多行编辑

command 按住点击多处可以同时编辑
command +d 可以在鼠标所在的单词上的时候标亮这个单词再按一次 command+d 标记下一个不区分大小写比如鼠标在cat 上 command+d 就会先选择cat 再次按下 command+d 就会继续筛选出下一个cat

command + k 可以跳过本选择的继续下一个如果已经一个轮回去掉的将是最后一个

还可以按住option 键拖拽多行一样实现多行编辑

引用

鼠标选中多行，按下 Ctrl Shift L (Command Shift L) 即可同时编辑这些行；

鼠标选中文本，反复按 CTRL D (Command D) 即可继续向下同时选中下一个相同的文本进行同时编辑；

鼠标选中文本，按下 Alt F3 (Win) 或 Ctrl Command G(Mac) 即可一次性选择全部的相同文本进行同时编辑；【重要】

Shift 鼠标右键 (Win) 或 Option 鼠标左键 (Mac) 或使用鼠标中键可以用鼠标进行竖向多行选择；

Ctrl 鼠标左键(Win) 或 Command 鼠标左键(Mac) 可以手动选择同时要编辑。

command shift L 编辑多行选择之后直接right键可以编辑多行的最后在ubuntu 中选择fn + left/right 可以到最前或者最后【重要】

复制删除移动

ctrl + shift + w 用来在选择的字段加html标签 pc alt + shift + w 立即输入可以修改标签的内容默认是p 可以修改成div 如果选择多行编辑然后ctrl shift w 可以多行
ctrl command + arrow key 将一样和上面一行对换 pc 是 ctrl + shift +arrow key 【重要】
复制一行 cmd shift d 【重要】
删除一行 ctrl shift k 【重要】

indention 格式化

indention 格式化单行的缩进 tab 键只能对区块对单行没有效果 command + 【或这】进行缩进 pc是ctrl +【/】
如果有大量的html 需要indent 可以先选择区块然后使用 edit->line->reindent 直接 shift command p 可以呼出命令搜索直接 indent 就能找到
复制的到已经reindent 内容中可能复制进去的文件不是格式化过的使用command shift v 可以格式化复制进去

项目

可以通过terminal打开文件夹 vi ~/.bash_profile alias sublime="/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl"
command + P 直接打开搜索面板可以查看文件输入内容就可以查找在基础上加@方法名就可以查找文件和方法如果加上#可以查看html 标签中对应的内容比如 index#next 就会查找到 <li><a href="#">Next</a></li> # 用来查找文件里面的内容
: 可以确定第几行在一个文件中 command+p 直接输入@ 直接查方法或者类 【重要】
对一个文件修改之后右击之后"show Unsaved Changes" 就可以查看到没有保存的改变

命令面板

shift command p 打开面板 sublime里面的命令都可以在这里面找到比如 edit->line->redent 这个命令一样快速 reverse 翻转多行 sort line 行排序 html special character 转换都可以设置文件标识默认是text在sublime 右下角可以看到鼠标也可以点击选择 cmd+shift+p 直接输入 set syntax : html

install pagckage 安装第三方包

ctrl + ` 打开面板直接复制进 package controll 代码就可以安装百度搜索代码

sinpper

只要输入前面几个单词按下tab 就可以补充完成比如fun 在js 中补充完成 function name（$param）{} 多按几次tab 就可编辑下面一个在html a tab 直接是个a标签 div 一样 arti 直接建立一个 article 标签里面竟然有laravel blade 的snipper cool 【重要】

Emmet 包很牛逼

简述：*(个数) +(并列) >(上下层关系) $(表示序列化数字) $$$表示从001开始

ul>li tab 就可以在html中创建 ul 标签下面带一个 li 标签

#demo:

ul.col>li.col>span.cool tab 之后
<ul class="col">
    <li class="col"><span class="cool"></span></li>
</ul>
多个使用*10 就有十个

还可以生成下面的
ul>li.item-$*3>a
<ul>
    <li class="item-1"><a href=""></a></li>
    <li class="item-2"><a href=""></a></li>
    <li class="item-3"><a href=""></a></li>
</ul>

ul>li.item-$$$*3>a
<ul>
    <li class="item-001"><a href=""></a></li>
    <li class="item-002"><a href=""></a></li>
    <li class="item-003"><a href=""></a></li>
</ul>

ctrl + w wrapped 代码将一段代码包装好在下面的输入框中可以修改标签，以及class
+ 可以用来连接多个区块

demo:
<header class="site-header">
    <h1></h1>
    <nav>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </nav>
</header>
<div class="site-body">
    <div class="main"></div>
    <aside class="sidebar"></aside>
</div>
<footer class="site-footer">
    <p></p>
</footer>

上面只要 (header.site-header>h1+nav>ul>li*5>a)+(div.site-body>div.main+aside.siderbar)+(footer.site-footer>p) tab 就可以了 cool

还有一个例子 span*10>div.class tab 之后

<span>
<div class="myclass"></div>
</span>
<span>
<div class="myclass"></div>
</span>
<span>
<div class="myclass"></div>
</span>

span>div.myclass*3 tab 之后

<span>
    <div class="myclass"></div>
    <div class="myclass"></div>
    <div class="myclass"></div>
</span>

在css 里面也有这样的设置比如 bc 就会变成background-color h10 -> height:10px 对于数字的还可以使用option 按住再按住上下微调 command+ alt + arrow key 可以上下10间隔波动

创建自己的snipper

在Tools>Developer>new snipper 里面设置

<snippet>
    <content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <!-- <tabTrigger>hello</tabTrigger> -->
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <!-- <scope>source.python</scope> -->
</snippet>

上面是一个例子在python里面直接输入hello 就会出现一串 hello [ 去掉 tabtrigger 标签注释和 scope 注释 ]

.banner|c 变成下面 c 就是comment 添加了comment 这个|c 可以任意使用

<div class="banner"></div>
<!-- /.banner -->

自定义快捷键

在perference 里面 key bindings 可以设置新的key 比如 reindent 命令 {"key":["ctrl+shift+i"],"command":"reindent"}

想知道sublime 里面的命令的command 方法1 google 第二种方法 ctrl + ` 打开面板run sublime.log_commands(True)就可以查看到便捷的历史继而知道操作的命令的名字比如TitleCase 命令的command 就是"title_case"
{"key":["ctrl+shift+u"],"command":"title_case"}

Macro

相当于记住我们的习惯动作 24.比如先在css 中

.banner {
    
}
#干了三件事 在banner 后面添加了空格 然后创建了一个{} 然后一个换行
如果要重复这个动作 
首先 在执行之前 ctrl+q 开始记录 
执行完成之后 ctrl+q 结束记录
这个时候可以使用ctrl+shift+q 执行上面的同样操作
关键是可以保存起来 

保存之后可以添加快捷键 贼溜
{"key":["alt+enter"],"command":"run_macro_file","args":{"file":"Packages/User/new-curly-line.sublime-macro"}}


最后是一个THEME package 安装package Controller 就可安装
如下

补充

1. 回到上一个编辑的位置 alt+ -

2 回到后一个编辑的位置 shitf + alt + -

牛逼的地方时甚至你跳转到了另外的文件上面，也能通过快捷键回到刚才你编辑的地方

快捷键可能平台不一样可以通过菜单栏 GOTO -> Jump Back/Jump Forward 来确定

慢慢沉淀自己