前端学习笔记之页面制作(二)——开发环境Sublime Text2(持续更新)
来源:互联网 发布:cad迷你看图软件 编辑:程序博客网 时间:2024/05/19 18:10
摘要
sublime text2 已经用过很久了,合理利用这款编辑器还是能够很好地提高开发效率的,这里总结一下使用心得以及一些资源链接。
快捷键(常用)
- Go to anything(
Ctrl + P
)- 直接输入模糊匹配的内容,能定位并打开相应文件;
:
+行数: 定位到具体的一行(Ctrl+G
)@
+符号(js函数名,css类名):定位到某一个符号处(Ctrl+R
)#
+关键字:定位到关键字(Ctrl+;
)
- 命令面板(
Ctrl+Shift+P
):搜索并模糊匹配相关命令,免去寻找功能的麻烦 - 多行选择
- 先选中一个字符串,然后
Ctrl+D
即可依次向下选择相同的内容,可以同时对这些内容编辑Ctrl+D
过程中可以通过(Ctrl+K
)来跳过某一项继续下一项ALt+F3
,选中所有要被Ctrl+D
的内容
Ctrl+Shift+L
:选中一个段落,再按此快捷键将在每一行最后添加输入符,使用户可以多行编辑
- 先选中一个字符串,然后
- 其他
Ctrl+[
: 左缩进一格,(可以选择多行一起缩进)Ctrl+]
: 右缩进一格Ctrl+/
: 注释所在行或者注释所选内容Ctrl+Enter
: 在本行下新建一行输入Ctrl+Shift+Enter
: 在本行上新建一行输入
插件
- 安装Package Control(安装差插件的工具)
- 使用快捷键
Ctrl+`
进入sublime text命令行,输入下面代码,重启软件即可使用 - 使用:
Ctrl+Shift+P
打开命令面板,输入pcip
即可模糊匹配到Package Control: Install Package
命令,即可通过模糊匹配搜索插件来开始安装插件了
- 使用快捷键
import urllib2,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')
emmet:提高前端工程师开发效率必备利器
使用最多的插件,写html的速度真的会快很多
- 笔者bb:emmet可以通过缩写代码来生成html内容,可以快速生成大段HTML文档并再也不用被标签所困扰
- 使用方法:输入缩写代码,使用快捷键
Tab
或Ctrl+E
即可生成html内容 - 推荐资源:
- Emmet:HTML/CSS代码快速编写神器: 覆盖面更广,内容更精炼,更加实用,还有动态示例,很清晰
- Emmet使用手册:主要针对HTML,很详细,可以作为参考手册使用
- 使用技巧:Tricks的集合
- 官网:没使用过,按惯例推荐一下
- Tricks:
- 缩写代码:
!
,可以直接生成一个基本的Html5页面框架; - 没指定标签时默认是
div
;
- 缩写代码:
DocBlockr
- 笔者bb: 一个为函数或变量添加格式标准的注释的插件,并没有很多功能,但很精致,标准化的注释让代码逼格提升不少
- 使用:再要添加注释的内容前一行输入
/**
然后回车或者Tab
,即可得到格式化的注释 - 官网:详细的使用方法和注释
Terminal
- 用sublime text在当前文件夹中打开命令行
- 使用:右键侧边栏要打开命令行的文件夹,选择相应选项
- 未完待续。。。
Snippets:代码片段
- 笔者bb:之前一直都不知道这种东西,看了视频教程算是长见识了,snippets就是用来存储那些会被重复使用的代码片段的,用来省去一直复制粘贴的麻烦
- 使用教程
之前的折腾:
- Ubuntu下Sublime安装以及中文乱码的解决
- 别人整理的插件和快捷键:
- Sublime常用插件设置
- Sublime快捷键和插件安装
- Mac豪的游戏:资源丰富,覆盖面广,值得一看
- 最后贴一下以前写过的一篇关于sublime的博客,简直不忍直视=_= : 年少时犯过的二
0 0
- 前端学习笔记之页面制作(二)——开发环境Sublime Text2(持续更新)
- Html5系列(二十九)前端开发工程师必备编辑器:Sublime Text2
- 【持续更新】iOS开发之C语言学习笔记(二)
- 前端学习笔记之页面制作(三)——HTML
- 前端学习笔记之页面制作(一)——PS切图
- [持续更新]JavaScript学习笔记(二)
- [持续更新]HTML5学习笔记(二)
- sublime text2 搭建scala开发环境(windows)
- Web前端开发之有用的网站(持续更新)
- GNU开发笔记--开发环境基础(持续更新)
- sublime text2 使用技巧总结(二)
- python学习之--配置Sublime Text2的python运行环境
- 游戏开发流程与思想学习笔记(持续更新)
- Python开发实战学习笔记(持续更新)
- 玩儿转Swift——学习笔记(持续更新)
- Sublime Text2 配置 Mac 下 Quick-Cocos2d-x 环境 (1)Sublime Text2 设置
- js前端页面常用字段验证(持续更新)
- 学习笔记之ListView优化(持续更新)
- YT02-简单数学课后题-1001 FatMouse' Trade-(5.31日-烟台大学ACM预备队解题报告)
- 浅谈声明与定义的区别
- JQuery动态添加Select的Option元素
- 第十三周阅读程序4
- 左值、右值、左值引用、右值引用
- 前端学习笔记之页面制作(二)——开发环境Sublime Text2(持续更新)
- css选择器,背景渐变
- Oracle基础(五):多表查询
- XML解析
- linux下 C程序 参数和内存
- C++ cin 输入检测——vector数组循环赋值
- C语言结构体里的成员数组和指针
- AOP 那点事儿(续集)
- Magento 优化