久等了 各位 最近在研究Sublime Text 3 网上有很多博文,资料 。但很多 要么就是转载 要么就是资料不全。 博主还是东拼西凑的整合了一下。 希望供大家参考使用。
首先 国际惯例一段话简介Sublime Text
-------------------------------------我是分隔线-------------------------------------
Sublime Text是一个很小巧 简单 又强大的编辑器 。 本体非常功能虽然少 但可以通过安装插件来补充需要的功能。非常适合编写web页面。 Sublime Text的有Sublime Text2版本,2011推出Sublime Text3 。推荐使用新版本。
-------------------------------------我是分隔线-------------------------------------
不得不提的是 我的第一个编辑器是Dreamweaver 所以很多习惯还是以Dreamweaver为主。 而且博主也是刚学 很多东西希望大家留言一起研究
这篇文章适合：
刚学web还没有好的开发工具的初学者
喜欢使用Dreamweaver的编程的开发人员
没接触过Sublime Text 3 的同学
那么开始吧！ 我以故事方式介绍Sublime Text 3
-------------------------------------我是分隔线-------------------------------------
小明是一个大学生。以前在学校他只会用DW 现在他刚买了台新电脑准备开始web编程之旅
1. 他安装了QQ 然后他安装了腾讯电脑管家(我是tx的托..).
在管家软件管理里他搜索 Sublime Text 3 ,下载该软件 并且安装在d盘 一路next结束安装。
这时候右键打开任意文件时候会多出 open with Sublime Text 这个选项 。然后选择这个打开
提示英文 大致意思是叫你更新新版本 。更新完毕。第一步完成
FAQ:
q: 为什么 会有 Open with Sublime Text这个选项
a: 原因是你安装的时候选择了menu 写入注册表
q:为什么 你的open with Sublime Text选项有图标 我也想要
a:编辑注册表就行。 命令行->regedit->HKEY_CLASSES_ROOT->*->Open with Sublime Text。
找到这个文件夹 然后右键新建字符串值 名称是icon 图标是启动exe
-------------------------------------我是分隔线-------------------------------------
2 小明用 Sublime Text 打开了个xxx.html. 习惯DW的小明 看到了 白字 黑底 一团黑的界面 求小明的心里阴影(笑~)..。
首先上面几个菜单有点英文基础的应该能理解 不行去找度娘 。 选择prefrences此时下方 没有 package settings 和package control 2个选项 。莫慌 。ctrl+` 调出命令行
然后去 复制Sublime Text 3插件管理器的安装命令 一串英文 copy过来。(希望各位还是有点英文基础 )
ctrl+v扔进命令行 回车。 开始安装插件管理器 会切换到一个英文很多的页面。还会弹出个miss警告 大致意思叫你从启下Sublime Text。 从启完 还是选择prefrences
查看下方有没有 package settings 和package control 2个选项 有说明安装成功。
有了插件管理器 干吗用呢？ 当然安装插件用啊。 这里可以选择tools ->command palette(快捷键 ctrl+shift+p); 输入缩写PCIP 。过会会出现插件列表
这里我们使用 Emmet 做为例子 不懂他是什么 没关系他就是偷懒神器 看下去就懂了。
输入Emmet 回车。这时候左下角会有安装进度提示 装完切换到一个英文很多的页面。提示安装成功 。返回html页面 输入 div#lovelive>ul>li.love$*5>a 按下tab 瞬间就出来
很神奇吧 还有很多操作方式 可以参考官网演示 playdemo
会了安装插件 那么如何卸载插件呢 很简单 ctrl+shift+p 调出面板 输入 pcrp 这里有你的刚才安装的插件 选择emmet 回车 左下角有卸载进度提示。 完成后输入 div#lovelive>ul>li.love$*5>a 按下tab 这时候不会产生偷懒效果
好吧 小明觉得还是偷懒比较好 还是再装回去 第二步完成
FAQ:
q:我的键盘坏了怎么办
a: 请从新购买键盘 或者用鼠标在prefrences 下方prefrences control 执行可视化安装 卸载
q: 这个网站我打不开 下不了
a: 因为网站是国外网站 使用vpn 。如果没有的话只能找度娘了 2手的东西可能不靠谱
q: 插件可以更新吗
a: 当然可以 输入pcup 面板里命名方式都是以英文首字母 所以英文要好哦
-------------------------------------我是分隔线-------------------------------------
3:小明表示 终于可以愉快些代码了 可是他发现 自己还是习惯DW一些 "习惯" 比如代码补全 报错 。于是找度娘 查了很多相关插件补充功能 。
这里还是要打断下 强调下Sublime Text的插件机制
这是博主的插件配置图
prefrences下面的package settings 是你安装的插件配置 是的。只记录配置 但不一定所有的插件都有配置 有些插件安装完你都感觉不到 只有卸载那里才看的到你装了哪些插件 比如jquery插件
配置基本上就是个巨大的json 对json比较熟悉的改起来比较方便 一般配置有2种 default setting(默认配置) 和user setting(用户配置) 。user setting 会覆盖 default setting。 但user setting一般是空的 所以要copy份default setting里的东西进去 然后修改里面的值 。如果不明白就相当 boss的本体可以产生多个分身 我们操作的是boss的分身 当然也可以直接修改boss本体的技能 分身的技能也很会一起改 。但不推荐 除非这个boss没有分身 (确实有这种插件存在)
key-bindings就是快捷键意思 当然这种东西都是比较熟悉这个编辑器操作的 就是把手动操作的东西变成一键完成 博主还不是很懂这方面东西 。
另外配置完后 部分插件需要从新启动才会有效果。 总之配置很烦 但必须要懂！
让我们切换小明 由于小明习惯了代码提示 比如输入get 补上getElementById 或者 jquery animate补上代码 他找到了很多有用的类似dw的插件
安装方法在2 大同小异 这里只列举插件的名字和功能
tools ->command palette(快捷键 ctrl+shift+p); 输入缩写PCIP 显示现插件列表 输入以下插件名
emmet
功能：代码缩写神器 比如 bg就是background. div#lovelive就是<div id="lovelive"></div>
jquery
功能：jquery 代码补全 类似 add就会匹配add有关东西 并自动补全 经常使用 animate ajax功能这块很方便
javascript Completions
功能： 原生js的补全 类似 输入inner 就会匹配 innerHTML
CovertToUTF8
功能： 因为Sublime Text是老外写的 不支持gbk之类的编码 安装后就不会出现中文乱码 。另外file下会多出set file encoding to的选项
SublimeLinter
功能：代码报错 比如少打分号啦 少括号啦 可以设置在写代码时候自动检测 或者保存后检测
注意点：此插件安装不同 比较复杂 需要nodejs的npm环境 不懂先找度娘 以下东西适合懂 npm的人
打开命令行-》cmd
输入node -v检查是否安装过node
安装jshint:
npm install -g jshint 安装csslint: npm install -g csslint安装完 切换到Sublime 安装插件
SublimeLinter（报错管理器）
SublimeLinter-jshint(js报错)
SublimeLinter-csslint(css报错)
安装完后这时候已经有效果了 进行配置 在tool里下 找到SublimeLinter
必选 lint-mode 显示为了save only 保存后检测
可选 toogle linter 需要禁用哪些检测 这里就要强调分离这个东西了 。所以尽量css js html分开写 以免检测到不是错误的错误！
可选 show errors on save 比较人性化的功能 当保存完后显示你写的代码出错点
SideBarEnhancement
功能：F12 预览功能 并且右边菜单栏功能增强
注意点：此功能只对文件夹有效 单个文件无效 。
安装完后会自动关联你的游览器 然后在 sideBar->key bindings-user 复制以下(键位可以自己改）
[
{ "keys": ["f12"], "command": "side_bar_open_in_browser" , "args":{"paths":[], "type":"testing", "browser":"chrome"} }, { "keys": ["ctrl+f12"], "command": "side_bar_open_in_browser", "args":{"paths":[], "type":"production", "browser":"ie"} }, { "keys": ["ctrl+t"], "command": "side_bar_new_file2" }, { "keys": ["f2"], "command": "side_bar_rename" }, ]第三步完成
FAQ:
q:插件太多了 我不知道装哪些?
a:请根据自己的个人爱好安装 我的文章是类似dw风格
q: 只有js css的插件吗
a: 没有 还有php等插件 不过配置更为复杂 以后再讲
q: 我乱装了很多插件 想卸载了
a: 请看2 并且理解插件机制 合理安装
-------------------------------------我是分隔线-------------------------------------
4:之后小明写了很多文件 html js啊 css啊 images啊。但管理起来好麻烦 直接用C：文件夹分类 小明觉得不高大上 所以想在编辑器里利用项目分类
项目通俗来说 就是对文件夹在进行分类。 为以后方便找到和管理文件。 Sublime Text的项目功能非常简单。每个项目建立后会自动生成
xxxx.project和xxxx.workspace2个文件。
project:记录项目中的文件夹 名字 属性 路径等等
workspace:记录界面当前的环境 如开打开几个文件 光标在第几行 等等
首先先显示右边的侧边栏 view->side Bar->Show Side Bar
如何新建项目
菜单栏->project->save project as -> 你的项目名
然后给项目新增对应的文件夹 project->Add Folder to project
这样你文件夹就会显示在项目里
接下来就是 switch(切换） edit(修改） close(关闭)项目 等日常行为 养成好习惯也是很重要的
FAQ:
q:我给项目添错文件夹了 怎么办
a:找到那个错误的文件夹 右键 project->remove folder form project
q: 如何删除项目
a: 只能物理删除 请找到xxxx.project和xxxx.workspace 手动删除
第四步完成
小明的故事先到此结束。。 能完成前4步的同学 恭喜你 Sublime Text你已经入门了 。他的功能的远远还有更多！！ 如果你有兴趣可以留言和博主交流
一个好的编辑器对开发来说很重要！ 虽然相比dw是麻烦多了 但有亲手打造 何乐而不为呢？
-------------------------------------我是分隔线-------------------------------------
最后感谢坚持看到这行的同学们 送个福利
哈 下次送福利哈
备注:
ctrl+鼠标滚轮 可以控制字体的放大和缩小
部分系统可能出现中文标题变成方块。 目前没有很好的解决方法 这里有个临时方法 修分辨率 但高分辨率电脑比如1920*1080 里文字会显示很小。
preferences->Setting User->输入
{
"dpi_scale": 1 //分辨率倍率：1}