自用笔记:本文属于自用笔记,不做详解,仅供参考。在此记录自己已理解并开始遵循的前端代码规范。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
2Ctrl+Shift+P:输入set syntax JavaScript进行文件类型更改。
输入Minimap进行迷你地图切换。
快速添加新行1
2Ctrl + Enter可以在当前行下新建一行。
Ctrl + Shift + Enter可以在当前行上面添加一行。
最后购买:
Sublime Text2或者3都没关系,3也只是作为2的beta版本,所以还是推荐3吧,支持新版嘛。2和3在使用方法功能上也有差异~
你可以去官网下载对应版本,但可能需要输入序列号什么的。访问下载 2.x 版本。或从下载 3.x 版本。
注册码(仅供个人非商业应用):1
2
3
4
5
6
7
8
9
10
11
12
13----- BEGIN LICENSE ------
Alexander
Single User License
EA7E-814345
51F47F09 4EAB1285 7827EFF0 8B1207DC
A76A6EA3 E1A1CA7A DC1F2703 14,897,784
8EDC1C82 3F2A58B9 1C0C8B24 67686432
281245B3 6233DE5C ADC5C2F9 61FB8A04
171B63EF 86BA423F 6AC884FD 3273A7AA
5F50A6DB CE7859AE D62D2B37 AEEDD8C2
078A8A20 70EEA791 84F48C1E 8ABA7DEB
0B3907C0 C9A3523B 0091A045 6F67AED8
------ END LICENSE ------
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首字母)光标移动到行尾。
延伸阅读(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: