前端开发利器 Sublime Text 3 使用技巧和总结笔记

时间:2022-12-24 07:49:33

这篇文章是本人在使用该工具进行前端开发的自我总结,思路也许不是很清楚,不过还是希望对读者的你有所帮助,千万别把这边文章收藏起来发霉哦,无论背多少次快捷键,还不及自己多实际操作几次。

  1. 目前官方版正式版 Sublime Text 2 Build 2221,而 Sublime Text 3 为测试阶段,建议下载正式版  注册机SublimeTextKeygen下载
  2. 打开注册机,先点中间 “Patch key” 打开 “sublime_text.exe” 文件确认,再随意修改下 “Name” 然后 “Generate”,复制好里面的 License。(注:请按步骤做,否则不成功!此时请不要关掉注册机,不要辅助虚线部分文字~)
  3. 打开 Sublime Text 2,到 Help–Enter license 粘贴点击确认,完成~
  4. 如果手头银子充足,请支持正版软件,不过 sublimetext 售价不便宜,USD $70~
  5. Sublime Text 3 正式版已发布。请支持正版!

######## Sublime Text 3 使用快捷键 ########

  1. Ctrl+Alt+f 可以整理JS代码的格式,需要选中后使用。(需插件支持:format)
  2. Ctrl+Ait+p 调出强大的命令面板。
  3. Ctrl+P 快捷功能-
  4. Ctrl+R 调出 @ 功能 可以迅速定位 function 函数名称
  5. Ctrl+G 调出 :功能可以迅速定位行号,调试修改样式的时候常用。
  6. Ctrl+~ 调出控制带
  7. Ctrl+D和Alt+F3前者“连续按住可以选择向下选择相同字符串”,后者“自定义选择文本,按下就可以一次性选择所有相同文本”。
  8. Ctrl+/ 注释整行。 Ctrl+Shift+/ 注释选择的部分。
  9. 更多快捷键请查看以下图片!

前端开发利器 Sublime Text 3 使用技巧和总结笔记

######## Sublime Text 3 使用技巧效率 ########

  1. 鼠标选中多行,按下 Ctrl+Shift+L (Command+Shift+L) 即可同时编辑这些行;
  2. 鼠标选中文本,反复按 CTRL+D (Command+D) 即可继续向下同时选中下一个相同的文本进行同时编辑;
  3. 鼠标选中文本,按下 Alt+F3 (Win) 或 Ctrl+Command+G(Mac) 即可一次性选择全部的相同文本进行同时编辑;
  4. Shift+鼠标右键 (Win) 或 Option+鼠标左键 (Mac) 或使用鼠标中键可以用鼠标进行竖向多行选择;
  5. Ctrl+鼠标左键(Win) 或 Command+鼠标左键(Mac) 可以手动选择同时要编辑的多处文本

######## sublime text 3 美化 ########

  • 皮肤的切换标签换成直角的,不喜欢默认的圆润,这套皮肤的名字叫:Theme – Nil,当时看了木木木木木博客的一篇文章(突然发现我跟他的审美观如此匹配~)
  • 代码的配色方案,Color schemes for hackers — Base16   地址:https://github.com/chriskempson/base16
  • 另外一套主题:spacegray,项目地址:http://kkga.github.io/spacegray/,这套主题集成了base16配色方案,也是现在我用的主题,界面预览请看本篇文章的首图

######## sublime text 3 插件技巧 ########

  1. sublime text 插件删除步骤:“Ctrl+Shift+P”—“Remove Package”—“找到需要删除的插件,并点击即可删除”
  2. 解决GBK和GB2312乱码问题:安装插件 “ConvertToUTF8”
  3. 更多资料:Sublime Text 2 – 性感无比的代码编辑器!程序员必备神器!跨平台支持Win/Mac/Linux

######## 我常用的插件列表 (2014年10月1日更新)########

  1. package Control:这是为了方便管理插件的一个工具,所以最好就是先装这个插件了,使用快捷键Ctrl+Shift+P 调用,官方地址:https://packagecontrol.io/
  2. YUI Compressor:压缩JS和CSS文件,按F7键后,若压缩当前文件(demo.js),则压缩后的文件(demo.min.js)保存在该文件的同级目录,需要安装java的JDK。使用方法:sublime text 插件:YUI Compressor
  3. JsFormat:有压缩当让也可以格式化,这个就是格式化JS用的,快捷键Ctrl+Alt+F。
  4. ConvertToUTF8:Sublime 只支持utf8编码,该插件可以显示与编辑多种非utf8编码的文件
  5. Emmet:也就是大名鼎鼎的 ZenCoding ,新版把名字更改为“蚂蚁”的英文单词Emmet,这可是前端开发的超级利器,可以超快速编写HTML/CSS/JS,当然这个插件还支持多种编译环境, 如常见的:Eclipse/Aptana、Coda、Notepad++、Adobe Dreamweaver、TextMate等,使用方法:官方网站
  6. jQuery和CSS3:前端开发必备。
  7. Clipboard History:剪切板历史,仅支持Sublime Text 2
  8. BracketHighlighter:高亮显示匹配的括号、引号和标签等,甚至是自定义的标签,当看到密密麻麻的代码分不清标签之间包容嵌套的关系时,这款插件就能很好地帮你理清楚代码结构,快速定位括号,引号和标签内的范围,当然它也是前端必备。
  9. CSScomb:它可以按照一定的 CSS 属性排序规则,将杂乱无章的 CSS 属性进行重新排序。选中要排序的 CSS 代码,按 Ctrl+Shift+C,即可对 CSS 属性重新排序了,代码从此简洁有序易维护,如果不款选代码则插件将排序文件中所有的 CSS 属性。当然,可以自己自定义 CSS 属性排序规则,打开插件目录里的 CSScomb.sublime-settings 文件,更改里面的 CSS 属性顺序就行了。因为这个插件使用 PHP 写的,要使他工作需要在环境变量中添加 PHP 的路径,具体请看 CSScomb官方网 上的说明。

    插件下载地址https://github.com/csscomb/CSScomb-for-Sublime

  10. alignmentSublime集成的代码格式化插件,可以代替JsFormat、CSS Format 部分功能。

前端开发利器 Sublime Text 3 使用技巧和总结笔记的更多相关文章

  1. 前端开发神器sublime Text

    实用的sublime插件集合 – sublime必备插件 前言 入前端领域开始,就学着使用sublime,一直用起来很顺手,速度是我最欣赏的,快的没有编辑器可以匹敌.还是废话不多扯,入正题.好多有多少 ...

  2. Web前端开发:Sublime Text 常用插件

    在安装这些插件之前,确保你已经安装了Package Control.   安装Package Control方法:   通过菜单栏View->Show Console 或者快捷键Ctrl+` 打 ...

  3. 学习web前端之神器sublime text 3

    第一次在博客园写博客,以前都是看别人写的技术在自己慢慢的学习.现在想自己把每天学习的东西理解并记录下来,加深下印象以后可以做个回顾.不知道自己能否坚持每周至少写2篇博文. 古话说的好:工欲善其事,必先 ...

  4. 前端开发利器—FIDDLER 转

    http://www.cnblogs.com/yuzhongwusan/archive/2012/07/20/2601306.html 前端开发利器—FIDDLER 1.Fiddler相对其他调试工具 ...

  5. 前端开发工具(安装及常用技巧)——sublime text 3

    安装 官方下载地址:http://www.sublimetext.com Sublime Text 3 一大优势就是跨平台(Windows.Linux.OS X 都有):portable versio ...

  6. 前端开发利器webStorm

    这里推荐一个前端开发工具webStorm.用了大概快半年了,发现所有其他工具无出其右的.目前最新版本已经到4.0.2,半年前还是2.X 相比aptana.dreamweaver.sublime和vim ...

  7. 前端开发利器 Emmet 介绍与基础语法教程

    在前端开发的过程中,编写 HTML.CSS 代码始终占据了很大的工作比例.特别是手动编写 HTML 代码,效率特别低下,因为需要敲打各种“尖括号”.闭合标签等.而现在 Emmet 就是为了提高代码编写 ...

  8. 前端开发利器 livereload -- 从此告别浏览器F5键

    各位从事前端开发的童鞋们,大家每天coding && coding,然后F5 && F5,今天推荐一个静态文件在浏览器中自动更新的扩展 livereload,不同手动刷 ...

  9. 结合cocos2d-x开发配置sublime text

    开发cocos2d-x前端的非核心开发人员对于编辑器的选择,多数的选择有两个,一个是传统的ultraedit,另外的就是现在很流行的sublime text.以前我是比较喜欢用ultraedit的,但 ...

随机推荐

  1. iOS 程序员 6 级考试(答案和解释)

    iOS 程序员 6 级考试(答案和解释)   我是前言 1. 下面的代码分别输出什么? @implementation Son : Father- (id)init { self = [super i ...

  2. Kafka - SQL 引擎分享

    1.概述 大多数情况下,我们使用 Kafka 只是作为消息处理.在有些情况下,我们需要多次读取 Kafka 集群中的数据.当然,我们可以通过调用 Kafka 的 API 来完成,但是针对不同的业务需求 ...

  3. pyqt小例子 音乐盒

    源代码1: # -*- coding: utf-8 -*- import sys,time,os import ctypes from PyQt4 import QtCore, QtGui,Qt fr ...

  4. PlSql复制角色、权限和添加角色权限

    一.登录你想要复制数据库的用户

  5. HDoj-2084-号码塔-dp

    号码塔 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submis ...

  6. 常用的JavaScript字符串处理函数及用法

    最近参加了几次前端实习生招聘的笔试,发现很多笔试题都会考到字符串的处理,比方说去哪儿网笔试题.淘宝的笔试题等,如果你经常参加笔试或者也是一个过来人,相信你也跟我一样,发现字符串的处理是前端招聘过程中最 ...

  7. 使用python制作ArcGIS插件(4)界面交互

    使用python制作ArcGIS插件(4)界面交互 by 李远祥 插件界面部分,除了一开始在设计器中设计的这些界面元素之外,还可以与操作系统进行一些输入输出的交互,这部分的实现全部在pythonadd ...

  8. [转]JAVA自动装箱和拆箱

    http://www.cnblogs.com/dolphin0520/p/3780005.html 1.Java数据类型 装箱和拆箱之前,我们先来了解一下Java的基本数据类型. 在Java中,数据类 ...

  9. 08: CORS实现跨域请求

    目录: 1.1 cors跨域请求介绍 1.2 使用tornado实现 复杂请求 1.3 Django中使用django-cors-headers解决跨域问题 1.1 cors跨域请求介绍返回顶部 1. ...

  10. ibernate 配置数据库方言

          在开发hibernate的程序时,需要进行SessionFactory的配置,简单地说,也就是建立与数据库之间连接的配置,在hibernate中一般使用xml文件来进行配置,但是在该文件的 ...