sublime的注意事项

简介:

Sublime Text 是一款流行的文本编辑器软件。跨平台，可运行在Linux，Windows和Mac OS X。也是许多程序员喜欢使用的一款文本编辑器软件。目前版本是Sublime Text 3，该软件也是是PHP程序员学习和开发非常实用的工具

 

1.sublime的优点

跨平台

插件丰富

编辑环境好

 

2.sublime的插件

2.1要安装插件,必须先安装控制台PackageControl

快捷键Ctrl + `( 或者 View→Show Console menu) 打开Sublime的控制台，显示如图：

然后去 https://packagecontrol.io/ins... 网站把下图红框代码复制到上图输入框中

按下enter键，在Perferences→package settings中可以看到package control，则表明安装成功。完成前面操作后，每次安装插件时，先使用Ctrl+Shift+P（Tools→Command Palette...）打开控制面板，输入PackageControl显示如图：

选择Package Control:Install Package,回车。安装成功后如图所示，在输入框中输入插件名字选择插件回车即可安装插件。

2.2插件 emmet

 

介绍:前端开发必备，Write less , show more，使用Tab键触发。安装Emmet后，可以输入少量代码后摁Tab键，系统自动补全代码。

 

快捷键说明书可以查看 Emmet Documentation

 

 

2.3插件 BracketHighlighter

介绍:高亮显示[], (), {}, “”, ”, <tag></tag>符号，便于查看起始和结束标记。

 

2.4插件 ColorPicker

介绍:调色板，需要输入颜色时，可直接选取颜色。使用快捷键ctrl+shift+c即可打开调色板。PS:需要注意的是，这个快捷键可能会打不开调色板，原因是该快捷键被占用了，最直接的解决办法是直接在Preferences→Key Bindings-User中配置：“{ "keys": ["ctrl+shift+c"], "command": "color_pick"},”

 

2.5插件 JsFormat

介绍:JsForma可以自动帮助你格式化JavaScript代码，形成一种通用的格式，比如对压缩、空格、换行的js代码进行整理，使得js代码结构清晰，易于观看。在已压缩的JS文件中，右键选择jsFormat或者使用默认快捷键（Ctrl+Alt+F），如果该热键被占用了，可以在Preferences→Key Bindings-User中配置： { "keys": ["ctrl+shift+alt+j"], "command": "js_format","context": [{"key": "selector", "operator": "equal", "operand": "source.js,source.json"}]},

 

2.6插件Sidebar Enhancements

介绍:sub侧栏右键文件提供的功能很少，但在实际开发中，文件通常会有各种处理请求，而该插件增强侧栏文件右键功能，比如可以直接右键将文件移入回收站，在浏览器中浏览，将文件复制到剪切板等。详情查看sidebar文档

 

2.7插件 Alignment

介绍:对定义的变量进行智能对齐,一般是“=”号对齐，默认的快捷键是Ctrl+Alt+A，但这个热键和QQ截屏的热键冲突不能使用，需要自己重新设置，我通常设置成Ctr+Alt+Shift+A，以下粘贴到Key-Bindings-User里面：{ "keys": ["ctrl+alt+shift+a"], "command": "alignment" },

 

2.8插件CSS Format

介绍:CSS Format可以将任意的 CSS、SASS、SCSS、LESS 代码格式化为展开、紧凑、压缩的形式，选中需要格式化的样式代码，右键选中CSS Format，选择需要形成的格式即可。

 

2.9插件Trailing spaces

介绍:可以检测和一键删除代码的空格，保存时自动删除多余空格，让你的代码更加紧凑规范。功能入口：Edit→Trailing Spaces→Delete，也可以自己设置快捷键，我通常设置成ctrl+shift+alt+t，以下粘贴到Key-Bindings-User里面：{ "keys": ["ctrl+shift+alt+t"], "command": "delete_trailing_spaces" },

 

2.10插件 AutoFileName

介绍:快速列出你想引用的文件夹里面所有文件的名字，比如想引用test/img/1.png。只需要输入/img,该插件就会自动提示/img下面的所有文件名

 

 

3.sublime用浏览器打开

 

3.1安装插件

首先需要安装SideBarEnhancements插件

3.2设置浏览器

打开设置文件，输入内容如下：

{
  "default_browser": "chrome" //one of this list: firefox, aurora, chrome, canary, chromium, opera, safari
}

此处默认浏览器设置为chrome

 

3.3设置开启快捷键

打开快捷键配置文件，输入内容如下：

[
{
        "keys": ["alt+b"],
        "command": "side_bar_open_in_browser",
        "args": {
                    "paths": [],
                    "type": "testing",
                    "browser": ""
                }
    }
]

此处设置的快捷键是alt+b，可根据自己需要进行更改

3.4设置项目文件夹路径

打开配置文件Edit Preview URLs配置文件输入内容如下：

{
    "C:/xampp/htdocs/learning/":{
    "url_testing": "http://localhost:8081/learning/",
    "url_production": ""
    }
}

解析:

C:/xampp/htdocs/learning/是实际文件所在本地磁盘目录

"url_testing": "http://localhost:8081/learning/",本地服务器目录

"url_production": ""在线目录，因为我没有在线目录所以为空

 

4.  sublime的快捷键

4.1 选择类

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+↓ 向下添加多行光标，可同时编辑多行。

 

4.2 锚点锚点编辑类

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 单词检测拼写

 

4.3 锚点锚点搜索类

Ctrl+F 打开底部搜索框，查找关键字。

Ctrl+shift+F 在文件夹内查找，与普通编辑器不同的地方是sublime允许添加多个文件夹进行查找，略高端，未研究。

Ctrl+P 打开搜索框。举个栗子：1、输入当前项目中的文件名，快速搜索文件，2、输入@和关键字，查找文件中函数名，3、输入：和数字，跳转到文件中该行代码，4、输入#和关键字，查找变量名。

Ctrl+G 打开搜索框，自动带：，输入数字跳转到该行代码。举个栗子：在页面代码比较长的文件中快速定位。

Ctrl+R 打开搜索框，自动带@，输入关键字，查找文件中的函数名。举个栗子：在函数较多的页面快速查找某个函数。

Ctrl+： 打开搜索框，自动带#，输入关键字，查找文件中的变量名、属性名等。

Ctrl+Shift+P 打开命令框。场景栗子：打开命名框，输入关键字，调用sublime text或插件的功能，例如使用package安装插件。

Esc 退出光标多行选择，退出搜索框，命令框等。

 

 

4.4 锚点锚点显示类

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 免打扰模式

 

5.  emmet的快捷生成命令

5.1头部标签

html:5或者！可以生成html5的文档结构

meta:utf可以生成默认字符集标签

meta:vp可以创建当前视图缩放

meta:compat兼容ie8的标签

link:css 引用css文件

script:src 引用脚本

 

5.2 生成带类样式标签

p.info 生成<p class="info"></p>

div.red 生成<div class="red"></div>

 

5.3 生成带ID的标签

h2#header 生成<h2 id="header"></h2>

div#header

 

5.4 生成a标签

a:link 生成

a:mail 生成

完善a标签，生成连接时候同时生成链接地址

a[href="http://www.baidu.com"]{百度一下}

 

5.5 根据标签位置生成标签

h2.header+p.info 平行标签，兄弟标签

ul>li+li+li 后代标签，下线标签

h2>span^p.info 生成当前标签的父级，也是h2的兄弟标签

 

5.6 生成标签同时创建内部文本

a{PHP不错哦}

 

5.7 给标签输入属性

p[title="这是一段说明文字"]

 

5.8 重复生成功能

ul>li+li+li

改进

ul>li*20

 

5.9 快速生成八个菜单列表项导航

ul.list>li.item*8>a{导航}

 

5.10 如何给标签自动添加编号和排序

$,@

ul.list>li.item*8>a{导航$}

ul.list>li.item*8>a{导航$$}

ul.list>li.item*8>a{导航$@-}

ul.list>li.item*8>a{导航$@100}

 

https://www.emmit.io 官网更多详情学习