前端神器-神级代码编辑软件Sublime Text下载、使用教程、插件推荐说明、全套快捷键…

Sublime Text 是一个代码编辑器,也是HTML和散文先进的文本编辑器。Sublime Text是由程序员Jon Skinner于2008年1月份所开发出来,它最初被设计为一个具有丰富扩展功能的Vim。 
Sublime Text具有漂亮的用户界面和强大的功能,例如代码缩略图,Python的插件,代码段等。还可自定义键绑定,菜单和工具栏。Sublime Text 的主要功能包括:拼写检查,书签,完整的 Python API , Goto 功能,即时项目切换,多选择,多窗口等等。Sublime Text 是一个跨平台的编辑器,同时支持Windows、Linux、Mac OS X等操作系统。 
Notepad++之类的无可比拟,前端必备的敲码工具,大量便捷的快捷键跟丰富神器的插件

Sublime Text 特点

1、Sublime Text 是一款跨平台代码编辑器,在Linux、OS X和Windows下均可使用。

2、Sublime Text 是可扩展的,并包含大量实用插件,我们可以通过安装自己领域的插件来成倍提高工作效率。

3、Sublime Text 分别是命令行环境和图形界面环境下的最佳选择,同时使用两者会大大提高工作效率。

4、Sublime Text 为收费软件,建议有能力的人付费使用,以支持开发者。不过不购买也可以一直使用。

安装Sublime Text 3

官网: http://www.sublimetext.com/3

file

注册码(学习目的,请支持正版):

选择对应的版本安装。完事后,要安装一个基础的、必备的包管理:Package Control,用来以后安装插件用的。

安装指导:https://sublime.wbond.net/installation

打开ST3,点击菜单 View -> Show Console,会在底部出现一个命令输入框,然后将上面的命令拷贝到输入框中,回车,等待,安装成功。

如果在Perferences->中看到package control这一项,则安装成功。 

file

常用插件安装

学习Sublime Text扩展插件的安装前,让我们来先了解一下它的插件官方网站:https://packagecontrol.io/ 

file

当我们在搜索框中输入插件的关键字,相关的插件就会在下面实时显示出来,我们就可以选择自己想要的插件进行了解。 

file

经过上面安装了Package Control后,我们就可以通过快捷键 Ctrl+Shift+P 打开 Package Control 来安装插件了。在打开的输入框中输入 install ,会根据你的输入自动提示,选择 Install Package。 

插件安装

等待,然后又会弹出一个输入框,让你输入你要安装的插件。

ConvertToUTF8

我们要安装支持非UTF8编码的一个插件,只需要在输入框中输入 convert,自动匹配后,选择 ConvertToUTF8 插件,回车,等待,安装完毕,这样,ST就支持显示如 GBK 等编码的内容了。 

file

ChineseLocalizations

一种让sublime汉化的插件 

file

Emmet(原名 Zen Coding)

一种快速编写html/css的方法 

file

BracketHighlighter

类似于代码匹配,可以匹配括号,引号等符号内的范围。 

file

Autoprefixer

CSS3 私有前缀自动补全插件,显然也很有用哇 

file

HTML-CSS-JS Prettify

功能说明:HTML、CSS、JS格式化。 
插件地址:https://github.com/victorporof/Sublime-HTMLPrettify 
安装方法:安裝这个套件前必须先安裝node.js,指定 node.exe 的执行档所在位置。进而安装HTML-CSS-JS Prettify。 
使用方法一:View -> Show console 或者使用快捷键(Ctrl + ),在命令列的地方輸入:view.run_command(“htmlprettify”),然后按下Enter。 
快捷键:ctrl+shift+h

Colorpicker

使用一个取色器改变颜色 
快捷键:ctrl+shift+c 

file

SyncedSidebarBg

自动同步侧边栏底色为编辑窗口底色 

file

DocBlockr  

DocBlockr 可以自动生成 PHPDoc 风格的注释。它支持的语言有 Javascript, PHP, ActionScript, CoffeeScript, Java, Objective C, C, C++

这个插件改进了侧边栏,增加了许多功能,如按F12调用浏览器查看页面

Themr  

主题管理,切换主题的时候,不用自己修改配置文件了,用这个可以方便的切换主题

JsFormat

格式化 js 代码

Goto-CSS-Declaration

安装后按快捷键 win 键 +Alt+. 跳转到 css 文件该 class 的声明处,方便修改查看,注意对应的css文件要同时打开才行.

Prettify Code

格式化 Html/CSS/JavaScript,一键让代码变整齐。

Sublimeinter

自动提示补齐代码,支持 JavaScript、Python、PHP 等等常用语言。

View In Browser 插件

功能说明:Sublime Text保存后网页自动同步更新。 
插件地址:https://github.com/adampresley/sublime-view-in-browser 
使用方法:在打开的文档任一处点右键,选择“View In Browser”,就会用默认的浏览器自动打开该文件。 

file 
如果你电脑装有多个浏览器,你想换其它的作为此操作的默认浏览器,你可以按以下方法设置: 
file 
打开“View In Browser.sublime-settings”,写入以下代码: 

file 
这样你就把它默认设置为“Chrome”浏览器了,当然你还可以改成“Firefox”、“Safari”等等,前提是你的电脑事先已安装好了这些浏览器。

### LiveReload 插件 
功能说明:调试网页实时自动更新。 
使用说明:快捷键 Ctr+Alt+V 
插件地址:https://github.com/dz0ny/LiveReload-sublimetext2 

file 
同时Chrome浏览器也要安装LiveReload 的扩展插件。 
file

TortoiseSVN 插件(win下需要安装有TortoiseSVN客户端支持)

功能说明:版本控制工具。 
插件地址:https://github.com/dexbol/sublime-TortoiseSVN

Theme-Soda 插件

功能说明:最受欢迎的 Sublime Text 主题之一。 
插件地址:https://github.com/buymeasoda/soda-theme 
安装完成后,点菜单 Preferences—>Settings – User,根据需要的主题效果,添加如下代码。 
Soda 亮色主题请添加: 

file 
Soda 暗色主题请添加:

file

要达到图中的效果,你还需要下载与之搭配的 color scheme。下载地址:http://buymeasoda.github.com/soda-theme/extras/colour-schemes.zip,如果你喜欢 Soda Dark 和 Monokai,我建议你使用 Monokai Extended。这个 color scheme 是 Monokai Soda 的增强,再配合 Markdown Extended ,将大大改善 Markdown 的语法高亮。 

file 
如果加代码 “soda_classic_tabs”:true,文件标签页形状会如下显示: 
file 
如果不添加此行代码,文件标签页形状会如下显示: 
file

插件列表

快捷键 Ctrl+Shift+P,在对话框中输入“list”,选择“Package Control:List Packages”。 

file 
会列出所有已安装的插件。这样可以很方便地了解自己已经安装了哪些插件。 
file

移除插件

有时候我们需要移除自己不想要的插件,具体操作如下:快捷键 Ctrl+Shift+P,在对话框中输入“remove”,选择“Package Control: Remove Packages”。 

file 
然后在出现的插件列表中点选你要移除的插件。 
file

主要快捷键列表

掌握基本的代码编辑器的快捷键,能让你打码更有效率。刚开始可能有些生疏,只要花一两个星期坚持使用并熟悉这些常用的快捷键,今后就能解放鼠标了,省心省力又省时,何乐而不为呢。

以下是个人总结不完全的快捷键总汇,祝愿各位顺利解放自己的鼠标。

选择类

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 自动读取图片宽高。

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


一路走来数个年头,感谢RDIFramework.NET框架的支持者与使用者,大家可以通过下面的地址了解详情。

RDIFramework.NET官方网站:http://www.rdiframework.net/

RDIFramework.NET官方博客:http://blog.rdiframework.net/

同时需要说明的,以后的所有技术文章以官方网站为准,欢迎大家收藏!

RDIFramework.NET框架由专业团队长期打造、一直在更新、一直在升级,请放心使用!

欢迎关注RDIFramework.NET框架官方公众微信(微信号:guosisoft),及时了解最新动态。

扫描二维码立即关注 

前端神器-神级代码编辑软件Sublime Text下载、使用教程、插件推荐说明、全套快捷键...

文章知识点与官方知识档案匹配,可进一步学习相关知识Python入门技能树首页概览209242 人正在系统学习中 相关资源:PPT中FLASH插入软件.rar-Flash文档类资源-CSDN文库

来源:weixin_34146410

声明:本站部分文章及图片转载于互联网,内容版权归原作者所有,如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢!

上一篇 2018年6月16日
下一篇 2018年6月16日

相关推荐