谷歌浏览器web开发教程之开始篇:使用sublime
你的代码编辑器是主要的开发工具;你使用它去编辑和保存代码段。你可以通过学习编辑器快捷键和以及安装关键插件来好而快的写出代码。
目录
- 安装sublime文本编辑器
- 为什么使用包管理器?
- 安装插件
摘要
- 选择一个编辑器,定制快捷键,并安装插件来帮助你写出更好的代码。
- 利用软件包管理器,使其更容易发现、安装和更新插件。
- 安装插件,有助于提高你编辑代码的效率;从本指南中的建议的插件开始。
安装sublime编辑器
Sublime是一个伟大的编辑器,拥有很多强大的,可定制的功能,这增添了你编写代码的乐趣。您可以安装一个包管理器,它可以很容易地安装插件,并添加新的功能。
现在有两个版本选择可以供你使用,版本2或者版本3.版本3是相当稳定的并且可一提供很多版本2无法使用的软件包,但你会发现版本2要更可靠一些。
注:
- 萝卜德森的博客会告诉你如何获取以及爱上Sublime编辑器,它给了很多常用功能参考。这些参考与任意的编辑器都相关,不仅仅只是Sublime。这是中文翻译版本:http://www.cnblogs.com/laiqun/p/5638519.html
为什么使用包管理器?
利用软件包管理器,使其更容易发现、安装和更新插件。
你可以安装Sublime的包管理器通过下面的指导https://sublime.wbond.net/installation.
你只需要这样做一次,之后你会在下面看到我们推荐的插件集合。
安装插件
插件可以帮你你提高编辑效率。是什么会让你离开编辑器,去使用其他工具?
提示:这里有一个插件的示例。显示那些修改还还没有提交,你可以在编辑器中整合一个其他工具,比如GitHub到你的浏览器中。这样你就不要离开编辑器,使用其他工具了,是不是很方便呐?O(∩_∩)O~
包管理器让你更容易的发现,安装和更新插件:
- 在Sublime编辑器中,打开你的包管理者,通过快捷键(ctrl+shift+p)。
- 输入'Install Package'---安装软件包
- 输入你想安装的插件(软件包)名字,或者浏览所有的插件,挑出想要的。
这个网站可以提供很多插件的完整介绍,https://sublime.wbond.net/browse。接下来是我们喜欢病推荐你安装的插件,因为他们可以帮助你提高编辑速度。
Autoprefixer --- 自动浏览器前缀补全
如果你想快速的在你的CSS中增加浏览器开发商的前缀,你可以用这个方便的插件来实现。
书写CSS,先不考虑各种浏览器厂商前缀,当你想要添加他们的时候,使用快捷键ctrl+shift+p
并输入 Autoprefix CSS
.
你也可以在最后的构建过程中自动执行该操作,教程如下:We cover how you can automate this in your build process。这样可以让你的CSS保持苗条的身材并且你不需要记得敲击快捷键ctrl+shift+p
ColorPicker颜色拾取
从颜色盘中拾取颜色并添加到你的CSS。快捷键:ctrl+shift+c。
Emmet --- 彗星发射
可以给你的编辑器添加一些快捷键和一些代码片段。关于它能做什么,请查看Emmet.io中的视频中的介绍(个人最喜欢的的功能是“快速注释--Toggle Comment”命令)。
快捷键:
- Expand Abbreviation – Tab or Ctrl+E 展开缩写
- Interactive “Expand Abbreviation” — Ctrl+Alt+Enter
- Match Tag Pair Outward – ⌃D (Mac) / Ctrl+, (PC)
- Match Tag Pair Inward – ⌃J / Shift+Ctrl+0
- Go to Matching Pair – ⇧⌃T / Ctrl+Alt+J
- Wrap With Abbreviation — ⌃W / Shift+Ctrl+G
- Go to Edit Point — Ctrl+Alt+→ or Ctrl+Alt+←
- Select Item – ⇧⌘. or ⇧⌘, / Shift+Ctrl+. or Shift+Ctrl+,
- Toggle Comment — ⇧⌥/ / Shift+Ctrl+/ 打开/关闭注释
- Split/Join Tag — ⇧⌘' / Shift+Ctrl+`
- Remove Tag – ⌘' / Shift+Ctrl+;
- Update Image Size — ⇧⌃I / Ctrl+U
- Evaluate Math Expression — ⇧⌘Y / Shift+Ctrl+Y
- Reflect CSS Value – ⇧⌘R / Shift+Ctrl+R
- Encode/Decode Image to data:URL – ⇧⌃D / Ctrl+'
- Rename Tag – ⇧⌘K / Shift+Ctrl+'
HTML-CSS-JS prettify---HTML-CSS-JS格式美化
这个扩展插件帮助你使用命令来美化你的HTML,CSS和JS的格式。你可以在保存时美化。使用Ctrl+Shift+H
(or Cmd+Shift+H
如果你用的苹果系统).
Git Gutter左侧显示每一行的变化情况
在编辑器的最左边显示一个提示,显示你修改了那一行。
Gutter Color左侧颜色提示
提示: 这个只能在Sublime 版本3中使用。
左侧栏颜色提示显示了一个颜色点,与你的css颜色值最相近的那个。
这个插件需要ImageMagick软件。如果你使用的是苹果 MAC OS X系统,我们推荐你从CactusLabs来下载安装(安装完后你可能需要重启你的机器来让它工作)。
All AutoComplete 智能补全
Sublime Text 默认的 Autocomplete 功能只考虑当前的文件,而 AllAutocomplete 插件会搜索所有打开的文件来寻找匹配的提示词。
谷歌浏览器web开发教程之开始篇:使用sublime的更多相关文章
- [051] 微信公众平台开发教程第22篇-怎样保证access_token长期有效
为了使第三方开发人员能够为用户提供很多其它更有价值的个性化服务,微信公众平台开放了很多接口,包含自己定义菜单接口.客服接口.获取用户信息接口.用户分组接口.群发接口等,开发人员在调用这些接口时.都须要 ...
- EnjoyingSoft之Mule ESB开发教程第三篇:Mule message structure - Mule message结构
目录 1. 探索Mule Message结构 2. Mule Message的Payload 3. Mule Message的Property 4. Mule Message的Attachment 5 ...
- EnjoyingSoft之Mule ESB开发教程第四篇:Mule Expression Language - MEL表达式
目录 1. MEL的优势 2. MEL的使用场景 3. MEL的示例 4. MEL的上下文对象 5. MEL的Variable 6. MEL访问属性 7. MEL操作符 本篇主要介绍Mule表达式语言 ...
- EnjoyingSoft之Mule ESB开发教程第六篇:Data Transform - 数据转换
目录 1. 数据转换概念 2. 数据智能感知 - DataSense 3. 简单数据转换组件 3.1 Object to JSON 3.2 JSON to XML 3.3 JSON to Object ...
- 勤拂拭软件 java web 开发教程(1) - 开发环境搭建
勤拂拭软件系列教程 之 Java Web开发之旅(1) Java Web开发环境搭建 1 前言 工作过程中,遇到不少朋友想要学习jsp开发,然而第一步都迈不出,连一个基本的环境都没有,试问,如何能够继 ...
- Twisted web开发教程
最近在网上看到一篇twisted web开发文章,将它实践了一下,twisted 提供基本的url路由 和 控制器,模板与模型需要外部扩展 1.目录浏览 2.get请求 3.url路由 4.接受带参数 ...
- java web 开发教程(1) - 开发环境搭建
勤拂拭软件系列教程 之 Java Web开发之旅(1) Java Web开发环境搭建 1 前言 工作过程中,遇到不少朋友想要学习jsp开发,然而第一步都迈不出,连一个基本的环境都没有,试问,如何能够继 ...
- [置顶] Java Web开发教程来袭
Java Web,是用Java技术来解决相关web互联网领域的技术总和.web包括:web服务器和web客户端两部分.Java在客户端的应用有java applet不过现在使用的很少,Java在服务器 ...
- Play Framework Web开发教程(33): 结构化页面-组合使用模板
和你编写代码相似,你编写的页面也能够由多个小的片段组合而成,这些小的片段本身也能够由更小的片段构成.这些小片段一般是能够在其他页面反复使用的:有些部分能够用在全部页面,而有些部分是某些页面特定的.本篇 ...
随机推荐
- 安卓android:scaleType属性
ImageView.ScaleType.CENTER|android:scaleType="center" 以原图的几何中心点和ImagView的几何中心点为基准,按图片的原来si ...
- ZOJ 1926 Guessing Game
#include<cstdio> ],s2[]; ]; ]; int bz; int main() { int n,i; while(~scanf("%d",& ...
- iOS开发传感器相关
手机里面内置了很多的传感器,例如:光传感器,湿度传感器,温度传感器,距离传感器等等 //开发传感器相关的东西必须使用真机 //在螺旋仪和加速计所有两种方式push和pull的方式,push的方式是时时 ...
- qt 汉化 国际化
两种方法. 1. 使用 QTextCodec setcodeforname 设置编码, 然后在程序中对于需要处理的字符使用 fromLocal8Bit . 2. 使用 Linguist. 首先把文件 ...
- Nginx 搭建反向代理服务器过程详解
1.1 反向代理初印象 反向代理(Reverse Proxy)方式是指以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的结果返回给internet ...
- shell脚本学习(三)
1.在grep中, ^标记着单词的开始, $ 标记着单词的结束. 查看一个单词是否在linux自带的词典中,脚本如下: #bin/sh #文件名:checkword.sh word=$1 grep & ...
- 打开"我的电脑"等特殊文件夹ShellExecute
procedure TForm2.btn10Click(Sender: TObject); begin ShellExecute(handle,'open','mailt', nil,nil,SW_S ...
- TFS 2012使用简介
为什么使用TFS 2012进行源代码管理——TFS 2012使用简介(一) 来源:雪雁 http://www.cnblogs.com/codelove/archive/2013/03/16/2963 ...
- ZIP文件解压
public class DZip { /// <summary> /// 压缩为ZIP文件 /// </summary> public void Zip(string dir ...
- php 正则表达式 数组
正则表达式 斜杠代表定界符 /^$/ $str = "好厉害18653378660了hi请勿嫁得好15165339515安徽dah矮冬瓜 拍行业大概啊好广东也欺负偶怕哈";$reg ...