自用笔记:本文属于自用笔记,不做详解,仅供参考。在此记录自己已理解并开始遵循的前端代码规范。What How Why
编辑器的选择(Editor Choices)
Sublime Text是一款跨平台代码编辑器(Code Editor),从最初的Sublime Text 1.0,到现在的Sublime Text 3.0,Sublime Text从一个不知名的编辑器演变到现在几乎是各平台首选的GUI编辑器。官网地址
从初学编程到现在,我用过的编辑器有EditPlus、UltraEdit、Notepad++、Vim、TextMate和Sublime Text,如果让我从中推荐,我会毫不犹豫的推荐Vim和Sublime Text,原因有下面几点:
- 跨平台:Vim和Sublime Text均为跨平台编辑器(在Linux、OS X和Windows下均可使用)。作为一个程序员,切换系统是常有的事情,为了减少重复学习,使用一个跨平台的编辑器是很有必要的。可扩展:Vim和Sublime Text都是可扩展的(Extensible),并包含大量实用插件,我们可以通过安装自己领域的插件来成倍提高工作效率。互补:Vim和Sublime Text分别是命令行环境(CLI)和图形界面环境(GUI)下的最佳选择,同时使用两者会大大提高工作效率。
- 优点:自动保存代码,代码高亮、语法提示、自动完成且反应快速。少用鼠标,多用键盘。
编辑器(Editor) vs 集成开发环境(Integrated Development Environment,下文简称IDE)
我经常看到一些程序员拿编辑器和IDE进行比较,诸如Vim比Eclipse强大或是Visual Studio太慢不如Notepad++好使之类的讨论比比皆是,个人认为这些讨论没有意义,因为编辑器和IDE根本是面向两种不同使用场景的工具:
编辑器面向无语义的纯文本,不涉及领域逻辑,因此速度快体积小,适合编写单独的配置文件和动态语言脚本(Shell、Python和Ruby等)。IDE面向有语义的代码,会涉及到大量领域逻辑,因此速度偏慢体积庞大,适合编写静态语言项目(Java、C++和C#等)。
我认为应当使用正确的工具去做有价值的事情,并把效率最大化,所以我会用Eclipse编写Java项目,用Vim编写Shell,用Sublime Text编写JavaScript/HTML/Python,用Visual Studio编写C#。
前言到此结束,下面进入正题。
界面
1、概况:
- 从上到下:标题栏Title、菜单栏Menu、标签栏Tab、编辑区Editing Area、控制台Console、状态栏Status Bar。
- 从做到右:侧边栏(可关闭、文件、文件夹视图)、编辑区(代码编辑)、MiniMap(缩略图)。
- 菜单栏:
各种命令,各种设置。文件File:编辑Edit:选择Selection:查找Find:视图View:转到Goto:工具Tools:项目Project:首选项Preferences:个性化定制。帮助Help:
- 标签栏:
文件名的缩略图,文件编辑未保存,右上角有个小圆点,提示保存。如果未保存关了也不用害怕,自动保存。
- 状态栏:
ASCII编码、Line 6-Column 53(当前行列号)、Tab Size:4(Tab格式等信息)、HTML(当前语言)。
- 控制台:
使用Ctrl+`调出,它既是一个标准的Python REPL,也可以直接对Sublime Text进行配置。
- 编辑区:
这是我们主要的工作区域,ST2支持代码自动缩进,代码折叠功能。
2、常见的功能:
- 自动完成:
自动完成的快捷键是Tab,如果在html文件中,输入cl按下tab,即可自动补全为class=””;加上zencoding后,更是如虎添翼,后面再讲到- 多列编辑:
按住ctrl点击鼠标,会出现多个闪烁的光标,这时可同时修改多处,或者按住鼠标中键拖拽,- 代码注释功能:ctrl+/、ctrl+shift+/分别未行注释和块注释,再按一下就能去掉注释,ST2能够自动识别是html、css还是js文件,给出不同类型的注释。
- 行操作:
ctrl+alt+↑、ctrl+alt+↓向上或者向下交换两行,ctrl+enter,光标后插入空行,ctrl+d选择相似,可以参考后面的快捷键列表。- 右键功能:
前3个,大家都知道,第4个,show unsaved changes,显示未保存的修改,红色减号表示删去的内容,绿色加号表示新增的内容
Open Containing Folder…,打开包含此文件的文件夹,这个很方便找到相关的文件
Copy File Path,复制文件路径,方便我们复制路径到浏览器中查看
Auto-Format Tags on Selection 格式化选中的文档,方便我们更清晰的查看代码结构,虽然ST2有自动缩进功能,但是当我们粘贴进一段没有格式化过的代码,就需要这个能了,这个功能要安装了Tag这个插件才会出现。- 人性化设计:
ST2虽然还是beta版中,但是有很多设计细节还是值得称赞的,比如点击一个标签或者括弧,会在起始处显示下划点线,方便看清代码结果,每一层嵌套代码间都有竖线,起到视觉辅助的作用。
设置
自定制,数据被保存在Preferences.sublime-settings,Default或User,user可以覆盖default。在配置文件,直接设置
配置文件在:preferences-setting user。
下面是一些可能有用但我很少用到的功能:
宏(Macro):Sublime Text支持录制宏,但我在实际工作中并未发现宏有多大用处。
其它平台(Other Platforms):本文只介绍了Windows平台上Sublime Text的使用,不过Linux和OS X上Sublime Text的使用方式和Windows差别不大,只是在快捷键上有所差异,请参考Windows/Linux快捷键和OS X快捷键。
项目(Projects):Sublime Text支持简单的项目管理,但我一般只用到文件夹。
Vim模式(Vintage):Sublime Text自带Vim模式。
构建(Build):通过配置,Sublime Text可以进行源码构建。
调试(Debug):通过安装插件,Sublime Text可以对代码进行调试。
快捷键
若稍有英文基础,则更建议打开Preferences->KeyBindings–Default,这里面是详细的快捷键配置。
快捷键设置,ST2的快捷键很多,改的时候注意不要覆盖了。
因为快捷键众多,所以有下面这种组合快捷键,先按下ctrl+k,松开k,再按下j就可以展开全部代码了。
快捷键列表(Shortcuts Cheatsheet)
我把本文出现的Sublime Text按其类型整理在这里,以便查阅。
1 | ### 通用(General) |
总结:
多行游标:
1 | 方法一:利用查找替换功能:Ctrl + H |
Goto anything:(模糊匹配)
1 | Ctrl+P:跳转到指定文件,输入文件名后可以: |
命令快捷执行:
1 | Ctrl+Shift+P:输入set syntax JavaScript进行文件类型更改。 |
快速添加新行
1 | Ctrl + Enter可以在当前行下新建一行。 |
最后购买:
Sublime Text2或者3都没关系,3也只是作为2的beta版本,所以还是推荐3吧,支持新版嘛。2和3在使用方法功能上也有差异~
你可以去官网下载对应版本,但可能需要输入序列号什么的。访问下载 2.x 版本。或从下载 3.x 版本。
注册码(仅供个人非商业应用):
1 | ----- BEGIN LICENSE ------ |
1 | ----- BEGIN LICENSE ----- |
搜索3114注册码
1 | —– BEGIN LICENSE —– |
汉化:
可以网上找些中文包放进去就行了。
Sublime Text 全程指南:
插件:
插件的选择:
主题:blackboard
SideBarEnhancements(侧边栏增强,添加浏览器)
Zen Coding
advanceNewfile
SyncedSideBar
tag
JsFormat(javascript格式化)
ColorPicker (调色盘)
GBK to UTF8
GBK Encoding Support(GBK中文编码)
SublimeLinter(代码错误提示) 总体架构
snippets(自定制代码补齐机制)
快捷代码:
- 跳到行首行尾的快捷键
1
2
3
4
5[
//跳到行首行尾的快捷键
{ "keys": ["ctrl+k", "ctrl+h"], "command": "move_to", "args": {"to": "bol", "extend": false} },
{ "keys": ["ctrl+k", "ctrl+e"], "command": "move_to", "args": {"to": "eol", "extend": false} }
]
先按ctrl+k,然后按ctrl+h(home首字母)光标移动到行首;先按ctrl+k,然后按ctrl+e(end首字母)光标移动到行尾。
设置Setting
1 | //Set Update false |
延伸阅读(Further Reading):
1、书籍(Books)
Mastering Sublime Text:我读过的唯一一本关于Sublime Text的书籍,书中介绍的插件很实用,但对编辑技巧介绍不全。
Instant Sublime Text Starter:另外一本关于Sublime Text的书,我没有读过。
2、链接(Links)
官方文档:
官方论坛:
Stack Overflow的Sublime Text频道:
sublimetext
sublimetext2
sublimetext3
非官方文档: 甚至比官方文档还要全面!
Package Control: 大量的Sublime Text插件和主题。
3、视频(Videos)
Getting Started with SublimeText:
Sublime Text Pefect Workflow: