Sublime Text3 使用总结

时间  2019-11-16
标签 sublime text3 text 使用 总结 栏目 HTML 繁體版
原文   原文链接

1、简介：

　　Sublime Text 3是一款强大而精巧的文本编辑器 [点击下载]。它的界面友好、功能非凡、性能极佳可令代码高亮、语法提示、自动完成更重要的是，它支持众多插件扩展——锦上添花、强之又强本文着重介绍Sublime Text 3可助力前端开发的优秀插件。javascript

2、Package Control插件管理

　　提到Sublime Text插件安装，就不得不提Package Control [官方文档]，简而言之，它是用来管理插件的插件，因此，首次使用前也是须要安装的，使用Ctrl+`（Esc键下方）快捷键或者经过View->Show Console菜单打开命令行php

打开命令行

将如下代码复制后粘贴到如上图中“<代码粘贴处>”，而后按Enter(回车)，稍等片刻css

import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

若是安装成功，就能够在Preferences菜单下看到Package Settings和Package Control两个菜单。html

最后重启Sublime Text 3前端

3、安装soda主题

Soda主题是sublime上一款很著名的清爽型主题，在install package中搜索html5

 安装后打开Preferences -> Settings-User，默认：java

 {node

　　"ignored_packages":
　　[
　　"Vintage"
　　]python

}git

添加"theme": "Soda Light3.sublime-theme",

{  

     "theme": "Soda Light 3.sublime-theme",  

    "ignored_packages":  

   [  

       "Vintage"  

   ]  

}  

保存后主题立马更改成soda light

另外还能够在此处配置一些其余内容，网上有人推荐以下配置(部分配置需安装对应插件才能生效)：

{
"caret_extra_bottom": 1, //光标样式 距离下一行设置
"caret_extra_top": 1, //光标样式 距离上一行设置
"caret_extra_width": 3,//光标样式 宽度
"color_scheme": "Packages/User/SublimeLinter/Monokai (SL).tmTheme",
"draw_white_space": "all", //显示空格字符
"font_size": 11,
"ignored_packages":
[
"Vintage"
],
"theme": "Soda Light 3.sublime-theme", //主题
"word_wrap": true //自动换行
}

4、配置高亮色彩

1. 在Sublime Text中用package control安装BracketHighlighter；

2. 安装完成后，打开Preferences-> package settings -> Bracket Highlighter -> Bracket Settings – User，而后添加以下代码：

{ 
"bracket_styles": { 
"default": { 
"icon": "dot", 
// "color": "entity.name.class", 
"color": "brackethighlighter.default", 
"style": "highlight" 
}, 

"unmatched": { 
"icon": "question", 
"color": "brackethighlighter.unmatched", 
"style": "highlight" 
}, 
"curly": { 
"icon": "curly_bracket", 
"color": "brackethighlighter.curly", 
"style": "highlight" 
}, 
"round": { 
"icon": "round_bracket", 
"color": "brackethighlighter.round", 
"style": "highlight" 
}, 
"square": { 
"icon": "square_bracket", 
"color": "brackethighlighter.square", 
"style": "highlight" 
}, 
"angle": { 
"icon": "angle_bracket", 
"color": "brackethighlighter.angle", 
"style": "highlight" 
}, 
"tag": { 
"icon": "tag", 
"color": "brackethighlighter.tag", 
"style": "highlight" 
}, 
"single_quote": { 
"icon": "single_quote", 
"color": "brackethighlighter.quote", 
"style": "highlight" 
}, 
"double_quote": { 
"icon": "double_quote", 
"color": "brackethighlighter.quote", 
"style": "highlight" 
}, 
"regex": { 
"icon": "regex", 
"color": "brackethighlighter.quote", 
"style": "outline" 
} 
} 
}

3. 找到Sublime text3安装目录下的Packages中的Color Scheme – Default.sublime-package

默认路径：C:\Program Files\Sublime Text 3\Packages\Color Scheme – Default.sublime-package

添加后缀名Color Scheme – Default.sublime-package.zip，双击此zip文件（注意不要解压），在压缩包软件内找到Monokai.tmTheme（颜色主题），选择编辑器进行修改

4.Monokai.tmTheme中添加以下代码：，和里面的dic标签t并列排便可。

 

<dict> 
<key>name</key> 
<string>Bracket Default</string> 
<key>scope</key> 
<string>brackethighlighter.default</string> 
<key>settings</key> 
<dict> 
<key>foreground</key> 
<string>#FFFFFF</string> 
<key>background</key> 
<string>#A6E22E</string> 
</dict> 
</dict> 

<dict> 
<key>name</key> 
<string>Bracket Unmatched</string> 
<key>scope</key> 
<string>brackethighlighter.unmatched</string> 
<key>settings</key> 
<dict> 
<key>foreground</key> 
<string>#FFFFFF</string> 
<key>background</key> 
<string>#FF0000</string> 
</dict> 
</dict> 

<dict> 
<key>name</key> 
<string>Bracket Curly</string> 
<key>scope</key> 
<string>brackethighlighter.curly</string> 
<key>settings</key> 
<dict> 
<key>foreground</key> 
<string>#FF00FF</string> 
</dict> 
</dict> 

<dict> 
<key>name</key> 
<string>Bracket Round</string> 
<key>scope</key> 
<string>brackethighlighter.round</string> 
<key>settings</key> 
<dict> 
<key>foreground</key> 
<string>#E7FF04</string> 
</dict> 
</dict> 

<dict> 
<key>name</key> 
<string>Bracket Square</string> 
<key>scope</key> 
<string>brackethighlighter.square</string> 
<key>settings</key> 
<dict> 
<key>foreground</key> 
<string>#FE4800</string> 
</dict> 
</dict> 

<dict> 
<key>name</key> 
<string>Bracket Angle</string> 
<key>scope</key> 
<string>brackethighlighter.angle</string> 
<key>settings</key> 
<dict> 
<key>foreground</key> 
<string>#02F78E</string> 
</dict> 
</dict> 

<dict> 
<key>name</key> 
<string>Bracket Tag</string> 
<key>scope</key> 
<string>brackethighlighter.tag</string> 
<key>settings</key> 
<dict> 
<key>foreground</key> 
<string>#FFFFFF</string> 
<key>background</key> 
<string>#0080FF</string> 
</dict> 
</dict> 

<dict> 
<key>name</key> 
<string>Bracket Quote</string> 
<key>scope</key> 
<string>brackethighlighter.quote</string> 
<key>settings</key> 
<dict> 
<key>foreground</key> 
<string>#56FF00</string> 
</dict> 
</dict> 

5. 而后再降修改完成的文件放到压缩包Color Scheme – Default.sublime-package.zip里边，最后更名Color Scheme – Default.sublime-package放回C:\Program Files\Sublime Text 3\Packages中；

效果图 ：

5、sublime插件推荐

Emmet插件

Emmet插件能够说是使用Sublime Text进行前端开发必不可少的插件

它让编写HTML代码变得极其简单高效

Emmet示例

基本用法：输入标签简写形式，而后按Tab键

关于Emmet的更多介绍，请查看官方文档

这份速查表，能够帮你快速记忆简写形式

JsFormat插件

这是一款将JS格式化的插件

一样使用Package Control安装JsFormat插件后

便可在JS文件中经过鼠标右键->JsFormat或键盘快捷键Ctrl+Alt+F对JS进行格式化

鼠标右键使用JsFormat

使用效果以下图

JsFormat使用效果

SideBarEnhancements插件

SideBarEnhancements是一款很实用的右键菜单加强插件

在安装该插件前，在Sublime Text左侧FOLDERS栏中点击右键

只有寥寥几个简单的功能

安装SideBarEnhancements前的文件夹右键菜单

经过Package Control安装SideBarEnhancements插件后

安装SideBarEnhancements后的文件夹右键菜单

能够看到，文件夹栏右键菜单立刻加强很多

安装此插件后配置方法为

重启Sublime text 3后

打开任意一个JS文件，按ctrl+shift+space

这时候第一次运行会去下载对应的类库

能够按ctrl+`（也就是调出控制台）来看进度

TrailingSpaces插件

有时候，在代码结尾打多了几个空格或Tab

并无任何显示效果

TrailingSpaces这款插件能高亮显示多余的空格和Tab

TrailingSpaces插件效果

SublimeCodeIntel

SublimeCodeIntel 做为一个代码提示和补全插件，支持 JavaScript、Mason、XBL、XUL、RHTML、SCSS、Python、HTML、Ruby、Python三、XML、Sass、XSLT、Django、HTML5、Perl、CSS、Twig、Less、Smarty、Node.js、Tcl、TemplateToolkit 和 PHP 等全部语言，是 Sublime Text 自带代码提示功能基础上一个更好的扩展，自带代码提示功能只可提示系统代码，而SublimeCodeIntel则能够提示用户自定义代码。SublimeCodeIntel支持跳转到变量、函数定义的功能，另外还有自动补全的功能，十分方便

CssComb插件

CssComb是为CSS属性进行排序和格式化插件 [官网]

使用Package Control安装CssComb插件后，你可能发现它并不能运行

它依赖于Node.js [官网]

若您的计算机已安装过NodeJS环境，可跳过此步骤

若您的计算机中还没有安装过Node.js环境

应该到Node.js官网中 [下载] 并安装相应版本的Node.js，以下图示

安装Node.Js示例

安装NodeJS后，便可使用CssComb插件

使用方法：菜单Tools->Run CSScomb或在CSS文件中按快捷键Ctrl+Shift+C

使用前，CSS可能杂乱无章

使用CssComb插件前的CSS代码

使用后，CSS属性按照做用类别出现

使用CssComb插件后的CSS代码

还能够选中一部分CSS代码进行排序

使用前，选中须要排序的CSS代码

使用CssComb插件前的CSS代码2

使用后，选中部分代码已排好序

使用CssComb插件后的CSS代码2

美中不足的是，CssComb彷佛不支持IE hark

Autoprefixer插件

这是一款CSS3私有前缀自动补全插件

该插件使用CanIUse资料库，能精准判断哪些属性须要什么前缀

与CssComb插件同样，该插件也须要系统已安装Node.js环境

使用方法：在输入CSS3属性后（冒号前）按Tab键，以下图示

Autoprefixer插件使用示例

Alignment

Aligment插件让开发者自动对齐代码，包括PHP、CSS、JavaScript语言。使得代码看起来更整齐美观，更具可读性。

6、sublime快捷键

Sublime Text 3很是实用，可是想要用好，一些快捷键不可或缺，因此转了这个快捷键汇总。

用惯了vim，有些快捷键也懒得用了，尤为是在win下面，还有图形界面，因此我的以为最有用的仍是搜索类，对于阅读和修改代码来讲，很是实用。

选择类

  • 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 打开搜索框。举个栗子：一、输入当前项目中的文件名，快速搜索文件，二、输入@和关键字，查找文件中函数名，三、输入：和数字，跳转到文件中该行代码，四、输入#和关键字，查找变量名。
  • 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 免打扰模式
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程