为什么要选择Sublime Text3?
为什么要选择Sublime Text3?
- Sublime Text3 自动保存,打开图片
- 跨平台启动快!!!!多行游标,太好用。
- 插件,简直选不过来。
- 代码片段
- VIM兼容模式
菜单栏基础功能介绍
File
:文档相关,新建文件,打开文件或文件夹等。Edit
:文件编辑相关,复制,剪切等(CVS大法好)。除此之外还有一些强大的功能。Selection
:选择相关,帮助选择代码。Find
:查找替换相关。这个和其它编辑器区别好像不大。Ctrl+F
查找、Ctrl+H
替换等。
View
:对Sublime_Text编辑器本身的一些配置。SideBar
:开启侧边栏Ctrl+k,b
Show console
:打开控制台窗口,安装package control需要使用.
Goto
:快捷导航:下面介绍。Goto Anythingtools
:工具,一些命令。new Snippet
:自定义代码片段,保存到user下
Project
: 项目相关,用的少。Preferences
:对于sublime_text进行一些个性化定值。Help
:如同名字。注册在这里
快捷键
line
相关:Ctrl+Shift+D
:复制当前行Ctrl+Shift+K
:删除当前行Ctrl+j
合并一行Ctrl+Enter
:在当前行下添加新行。AfterCtrl+Shift+Enter
:在当前行上添加新行。BeforeCtrl+Shift+上、下
:移动当前行
Comment
注释:Ctrl+/
:行注释。Ctrl+Shift+/
:块注释
Ctrl+Shift+P
:调用命令面板,快速查找,例如:改变语法模式等。- 模糊匹配,可以减少对快捷键的记忆。
Shift+Alt+1,2,3,4,5
:开启对应数字的多栏编辑
Ctrl+P
:Goto Anything
Ctrl+P
: 查找项目中的文件:- 直接输入名称:在不同文件中切换,支持级联的目录模式
:
:+ 行号:Ctrl+G
定位到具体的行。@
:+ 符号:Ctrl+R
定位到具体的符号,例如:JS函数名,CSS选择器名。#
:+ 关键字:Ctrl+;
匹配到具体的匹配的关键字。主要是模糊匹配。
多行游标
Ctrl+D
:选中当前光标所在位置的单词。连续使用时,进行多光标选择,选中下一个同名单词。Ctrl+K
:配合Ctrl+D
可以跳过下一个同名单词。Ctrl+L
:选择当前光标所在位置的行。连续使用时,继续选中下一行。Ctrl+Shift+L
:在多行选中后,在所有选中的行后产生游标。Alt+F3
:选中文档中所有的同名单词。Shift+鼠标右键
:向下拖动,产生多个光标。
设置
使用 View
–>Show console
,快捷键: Ctrl+` 调出console面板输入sublime.log_commands(True)
,可以得到当前使用的命令面板进行设置的值。方便进行快捷键的绑定。
下面这些都可以通过命令面板快捷查找
Settings-User
:个人对于sublime_text的定制。使用JSON格式,会直接覆盖掉Settings-Default
默认设置中的内容。
1 |
// User/Preferences.sublime-settings |
key - Bindings-User
:个人对于快捷键的设置。同样会覆盖默认的设置。例如:
1 |
//自动改变缩进格式 |
构建系统实现快捷调用浏览器
构建系统可以让您通过外部程序来运行文件,并可以在Sublime Text查看输出。
tools
:工具下的Build System
选择新建一个选项后(Build System
–>New Build System
),进行如下设置(注意后缀),保存到user目录下:
1 |
//这样设置。。地址是你的浏览器位置 |
之后再进入刚刚的的地方,选择第一个Automatic
,修改内容后按Ctrl+B
,可以看到自动调用chrome
并且是修改后的内容。在sublime Text
的console
中可以看到输出的信息。更多功能请查看这里
上面是一些基础功能的介绍
插件的安装与使用
安装package control
。
这里我使用的是sublimeText 3
,2 的话上官网查询代码。
首先打开package control
的官方网站。
复制下面这一段代码:
1 |
import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by) |
在上面说的View
–>Show console
,快捷键: Ctrl+` 打开控制台窗口,粘贴上面的代码,回车,然后就是等待安装了,需要一定的时间。安装完成后重启 。
使用Ctrl+Shift+P
,打开控制面板,输入PC
,效果如下:说明安装成功了。
安装主题
- 按照上面的步骤,打开图片中的安装插件就行了,其实默认配色真的挺好看的
- 推荐在安装前,先去官方网站查看样式。的样式,以及设置方法,说明文档。一般安装成功后,会自动弹出。
- 以
Theme - Spacegray
为例:
先使用Ctrl+Shift+P
输入PCI,回车选择 Install Package
。需要等待一会加载时间,输入Theme-Spacegray
。其实不输入完也会模糊匹配出来的。
- 回车等待安装就好,成功后会弹出一个使用设置的页面,把其中的如下代码拷贝到
Settings-User
,保存,你会发现,默认的主题已经变成了刚刚我们查看过的主题了。
1 |
"color_scheme": "Packages/Theme - Spacegray/base16-eighties.dark.tmTheme", |
当然,你也可以通过菜单栏,进行主题的选择。会有相同的效果。它会自动在Settings-User
进行设置。
2016-04-6 更新
安利两款主题:
两款主题都有侧边栏图标显示:我在这里说不清到底谁好谁差,全凭个人的喜好吧!
- Material:
- Seti_UI:
安装方法还是和上面一样,最好是根据它的README
描述来进行设置。
个人常用插件及使用方法:
NO.1 AdvancedNewFile
:快速新建文件。
- 假设有文件夹
file
。我们正在输入代码,又想在新的子目录下新建html文件的话用传统方式得很多步,新建目录,新建文件,保存等等等。 - 但是有了该插件之后,事情就变得简单了许多,只需要按下
Ctrl+Shift+N
,输入文件夹以及文件名,你就会看到如下效果:(回车,你会发现已经子目录下的文件已经新建完成了!)
NO.2 Nettuts+ Fetch
:管理类库。
安装成功后输入Ctrl+Shift+P
打开命令面板,输入Fetch
,可以看到以下:
选择file
可以看到设置的文件。选择下载
配合刚刚上面的插件使用,简直完美..
NO.3 Sidebar Enhancements
:增强侧边栏。
必装插件,无比强大,就不过多介绍了。可以在浏览器中打开,还可以配置不同文件的打开方式。
单单下面这一个功能就必须安装了!快捷在不同浏览器打开:
配置设置:
1 |
[ |
- 可选
SyncedSideBar
:每次打开文件,侧边栏都会同步显示该文件所在目录树中的位置
NO.4 DocBlockr
:代码块注释。
可以快速的对函数进行注释。保持代码规范。支持多种语言。(个人觉得brackets
的这个插件比Sublime Text
做得好多了。)
/*
:回车创建一个代码块注释/**
:回车在自动查找函数中的形参等等。
它会生成 JSDoc
格式的注释。如果你从没有使用过类似的工具,DocBlockr
会让你觉得以前没有它是如何写代码的。帮助你创造你的代码注释,通过解析功能,参数,变量,并且自动添加基本项目。
NO.5 SublimeLinter-jshint
:语法校验
- 需先安装
SublimeLinter
。 - 需先安装
Node.JS
及npm
。 - 在cmd输入
npm install -g jshint
,等待安装成功就好了。
安装成功后,重启就可以测试代码的风格了。
当然还可以自定义校验规则,在该目录下使用Ctrl+Shift+N
创建文件.jshintrc
,在其中使用JSON格式配置校验风格。
例如:
1 |
//建议使用===,不使用时会有提示。 |
并且在左下角会有错误提示。需要注意的是内容有更改时,才会立即生效。
详细自定义规则:自定义Hint校验
NO.6 Git
:版本控制
可视化的操作:帮助你与你的Git repo协议进行交互。它支持很多命令像init
,push
, pull
, branch
, stash
,等等。了解更多关于你在Sublime Text
里面究竟能使用哪些Git功能,以提高您的工作流程。
使用参考
GitGutter
:
Sublime Text 有了 Git 插件之后,GitGutter 更好的帮助开发者查看文件之前的改动和差异,提升开发效率。(其实我是冲着这个来的)
NO.7 Emmet
:不解释。
中文文档:地址
NO.8 JsFormat
:代码格式化 使用 HTML-CSS-JS Prettify,下面介绍:
JsFormat
:代码格式化- JsFormat 基于
JS Beautifier
,可以帮助你自动格式化JavaScript
和 JSON。这对于阅读代码是非常有用的。 - 快捷键:
Ctrl + Alt + f
或者,你也可以使用菜单栏。 - 可定制喜欢的格式:在 SublimeText 3 中 Preferences -> Package Settings -> JsFormat -> Settings - Default 可以调整这些配置。
NO.10 jQuery
:jQuery的API代码片段
我知道目前在很多地方 jQuery
看似已经落伍了,但是如果你不是建立一个交互性很强的网站或者你只是想在已有应用上添加功能,它仍然是非常有用的。
比如,输入$.a
就可以让我选择$.ajax()
,然后自动扩展成以下代码:
1 |
$.ajax({ |
NO.11 BracketHighlighter
:符号高亮
该插件提供行数列高亮的各种配对的语法符号,显示在行号上。效果如下:
配置方法参考sublime text3下BracketHighlighter的配置方法
NO.12 JavaScript Next
:完美支持ECMAScript 6
- JavaScript Next 提供了比默认JavaScript Package更好的语法高亮,而且他完美支持ECMAScript 6。
- 建议完全使用 JavaScript Next代替JavaScript Package。
NO.13 CSS3
:CSS3语法高亮
- 默认安装的Sublime Text对CSS3的支持让人抓狂,帧动画?别开玩笑了你只会看到一片白色的纯文本一样的代码。
- 事实上不光CSS3,我建议用CSS3 Package完全替代原来的CSS Package来完成语法高亮。把原来的禁用了吧
NO.14 Color Highlighter
:CSS颜色高亮
- 这个插件我等了很久了(在使用breakets的时候发现 的,好用到爆),我最早用Sublime Text写CSS时候就在想“这堆颜色码谁知道是什么颜色”。。
- 还是brackets的牛逼
- Color Highlighter这个插件会检测CSS文件中的颜色码,不论是Hex码或者RGB码都能很好的显示。
- Color Highlighter能够设置成用背景色或者边框提示颜色,我一般在Settings里做这样的设置:
1 |
{ |
效果如下:
NO.15Colorpicker
:使用一个取色器改变颜色
使用方法: ctrl + shift + c
,快捷键有冲突,需修改。可以通过ctrl+shift+p
:搜索Colorpicker
调用
NO.16 Markdown Editing
和 Markdown Preview
,实现预览MD
- 当在 Sublime Text 中编写 markdown 文件时,在浏览器中打开全是乱码,因为还没有将 markdown 文件解析成相应的 HTML.
- 这两个插件的功能就是可以用浏览器浏览 Sublime Text 中编写的 markdown文件。
- 配置:
打开 Preferences->Package Settings->Markdown Preview->Setting User 将下面这句话粘贴进去。
1 |
{ |
直接按F6
就可以打开浏览器预览markdown
,并且它们的安装还会让编写markdown
时支持一些快捷键。
不进行这些配置的话,因为我们在前面 构建系统 使用了一些操作,按ctrl+b
,就会在当前文件目录下,创建一个同名的html
文件。
选中该htnl
文件,再次按ctrl+b
可以达到同样的预览效果,不过还是F6简单不是吗?
2016-04-06 更新
我知道你们都忍不了那默认的白色背景,丑爆了好吗? 现在我们找到preference
–>package Settings
–>MarkdownEditing
–>Markdown GFM Settings-users
,把下面这个复制进去:
1 |
{ |
然后你就会发现世界又回到了春天-。-(这里使用的我上面介绍的Material
),更多的设置就举一反三啦!
NO.17AutoFileName
:文件路径自动提示
这个直接安装就可以用了,挺方便的。
NO.18 Terminal
:在Sublime Text直接打开命令行
2016-04-06 更新
默认快捷键 Ctrl+Shift+T
。
在windows
下默认会打开Windows PowerShell
,那界面简直丑到不行好吗!!
根据上面的经验同样找到preference
–>package Settings
–>Terminal
–>Terminal Settings-users
:进行下面的设置:
1 |
{ |
然后人生就焕发了第二春 -。-(强烈建议大家去搜索使用被我注释掉的Cmder
,这才是一个shell
的样子嘛!)
NO.19 CSScomb
: CSS属性排序
NO.20 JavaScript Completions
和JavaScript & NodeJS Snippets
。输入提示,代码补全
- 看个人喜好咯,不用代码补全,可以锻炼英语!!
NO.21 SyncedSidebarBg
:自动同步侧边栏底色为编辑窗口底色。
有人反映说安装主题后侧边栏颜色不更改,其实有两个方法,一个在\Data\Packages\主题
修改主题配置。
比较麻烦,就不说了,直接安装这个插件就好了,记得重启刷新。
2016-04-06 更新
NO.22 HTML-CSS-JS Prettify
: HTML-CSS-JavaScript 代码格式化
其实有了这个代码格式化插件,就可以删除上面的代码格式化插件了。因为功能确实强大!
其实我把官网的配置趴下来之后就改了两个地方:
"selector_separator_newline": false
: 不需要每个CSS选择器单独占一行"allowed_file_extensions": ["..这是老的,新增在-->","vue"],
:将vue
的组件当成html
来进行格式化- 默认快捷键:
Ctrl+Shift+H
更多的个性化定制大家自己去实现吧!
NO.23 better-completions
: 涵盖了html
, jquery
,javascript
,Bootstrap
的代码片段。
官网介绍的很详细。
这个插件要是包含的类型多,当然在每一种语言上的匹配肯定是不如上面介绍。不过为了少按几个插件,还是用了它,把上面的几个代码片段插件删了。
不过它也是支持加载自定义代码片段的,如果有需要的话,那就自己编写吧^_^。
图片查看
ImagePaste
其他:
liveReload
:浏览器即时刷新!(这里有很多坑,以后填吧)IMESupport
:输入法不跟随时安装FileHeader
:自动更新保存时间,文件模板QuoteHTML
:把HTML拼接成js插入字符串CSS Format
:CSS格式化AutoPrefixer
:浏览器私有属性前缀补全 (Node.js依赖)ConvertToUTF8
:GBK编码兼容Vue Syntax Highlight
:vue
文件的语法高亮
为什么要选择Sublime Text3?的更多相关文章
- Sublime Text3使用总结
写在前面的话:平时做项目中在用eclipse和vs,但是对于一些小项目,感觉没有必要搞那么大的一个工具使用,比如写个小微商城,搞个小脚本了什么,所以就一直在用Sublime Text,界面清新简洁,没 ...
- 一个前端程序猿的Sublime Text3的自我修养
来源于:http://guowenfh.github.io/2015/12/26/SublimeText/ 详细设置 && 20+插件 本文章会在本人有插件或者设置更新时,进行不定时更 ...
- 【编程工具】Sublime Text3的安装和常用插件推荐
本人刚刚学习 HTML,曾经上网找过一些编写 HTML 的软件,但感觉都不太好,经过三挑四选下,最终我决定选择 Sublime Text3 这款软件来作为学习工具,上网找到了许多实用的插件,在这里给大 ...
- Sublime Text3配置在可交互环境下运行python快捷键
安装插件 在Sublime Text3下面写代码感觉很不错,但是写Python的时候遇到了一些问题. 用Sublime Text3打开python文件,或者在Sublime Text3下写好pytho ...
- sublime text3 常用插件安装
1.Package Control 按Ctrl+~调出console(或者view>show console) 粘贴以下代码到底部命令行并回车: import urllib.request,os ...
- Sublime Text3的安装
作为一名前端开发小白,使用Sublime两年多了,从当初的Sublime Text 2到如今的Sublime Text 3,非常喜欢这款轻量级编译器,它不像Dreamweaver那样动辄几百M,只有仅 ...
- Sublime Text3下的markdown插件的安装及配置
Sublime Text3下的markdown插件的安装及配置 安装准备--安装Package Control 安装MarkdownEditing 安装Markdown Preview或OmniMar ...
- sublime text3好用的插件
1.安装package control sublime text3 的安装方法,ctrl+`,调出控制台输入 import urllib.request,os; pf = 'Package Contr ...
- 如何优雅使用Sublime Text3(Sublime设置豆沙绿背景色和自定义主题)
♣Sublime Text3软件的下载 ♣设置字体的大小 ♣设置背景色和关键字颜色(Color Scheme 生成器) ♣快速生成html头文件 1.Sublime Text3软件的下载地址和包含的文 ...
随机推荐
- composer 安装使用
首先开启 php.ini ssl配置. 然后通过如下地址下载对应安装包安装即可:http://www.phpcomposer.com/ 当然如果安装失败,也可以下载 composer.phar 包 命 ...
- VPN各种常见状态码及修复方法
1.633错误 :由于Windows系统本身的问题,在PPTP协议连接多次并断开之后,后导致一直出现633错误.参见微软的官方解决方案:http://support.microsoft.com/kb/ ...
- 解决linux crontab PHP fgetcsv 读取中文数据为空问题
公司一台服务器每天定时拉取媒体报告数据,发现每次获取的中文数据为空,发现下载下来的csv文件中文是正常的,手动再次执行一次发现是正常的 现在发现linux的默认地区是 "en_US.UTF- ...
- Python Shell 解释器下使用Django Model
sys.path.append('E:/Projects/DjangoProjects/myFirstSite') os.environ.setdefault('DJANGO_SETTINGS_MOD ...
- php随机密码函数的实例代码
php随机密码函数的入门例子 时间:2015-12-16 20:42:48来源:网络 导读:php生成随机密码的函数实例,php生成随机密码的函数,生成数字.大小写字母与特殊字符组合的随机密码. ...
- ArcGIS应用——四种计算图斑面积的方法
ArcGIS中有多种方法可计算出图斑面积,本文总结了四种方法,是否可堪称史上最全? 1.计算几何 本人认为这是最适合非专业人士的方法,直接利用ArcGIS中的计算几何功能进行计算. a.首先添加一do ...
- .Net魔法堂:AssemblyInfo.cs文件详解
一.前言 .net工程的Properties文件夹下自动生成一个名为AssemblyInfo.cs的文件,一般情况下我们很少直接改动该文件.但我们实际上通过另一个形式操作该文件.那就是通过在鼠标右键点 ...
- 汇编学习:float与double速度问题
X86处理器包含两种类型的浮点数寄存器.第一种使用8个浮点寄存器组成浮点寄存器栈,另一种为向量寄存器(XMM,YMM),它们对于单双精度的处理是不同的.本文将讨论两种模式下的浮点数计算速度问题. 一. ...
- 【转】Bloom Filter布隆过滤器的概念和原理
转自:http://blog.csdn.net/jiaomeng/article/details/1495500 之前看数学之美丽,里面有提到布隆过滤器的过滤垃圾邮件,感觉到何其的牛,竟然有这么高效的 ...
- WebApi中跨域解决办法
在做Web开发中,常常会遇到跨域的问题,到目前为止,已经有非常多的跨域解决方案.由于时间有限,本文不会深入. 笔者遇到的问题是Js调用WebAPI中的数据进行跨域的场景.涉及若干跨域方案: 方案1:j ...