Sublime Text工具

Mac Sublime3--工欲善其事必先利其器(一)

2016-08-31  本文已影响1716人  simuty

目录

1. Subline3下载地址;
2. 安装Subline3插件管理工具;
3. 对文件操作(新建/更名等);
4. 多行操作快捷键;
5. 快速启动浏览器并打开;
6. 添加常规设置.
7. 插件推荐.
8. jade相关

第一步: Subline3下载地址;

废话不多说, 直接上下载地址--sublimetext官网

第二步: Subline3插件管理工具

没有对应的插件, 那还叫软件么! 那叫神器!
给Subline3插上翅膀吧!

2.1 安装插件管理工具

点击顶部菜单View -> Show Console*(或者使用快捷键 command + ` )。如下图

4A943CAE-A33E-41B1-A09F-4FAA5062BD39.png

复制下边代码进去, Enter--下载即可

import urllib.request,os,hashlib; h = 'df21e130d211cfc94d9b0905775a7c0f' + '1e3d39e33b79698005270310898eea76'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

来英文吧, 嘿嘿

  1. Click the **Preferences > Browse Packages… ** menu
  2. Browse up a folder and then into the Installed Packages/ folder;
  3. Download Package Control.sublime-package and copy it into the Installed Packages/ directory
  4. Restart Sublime Text

2.2 举例子安装插件

CMD + shift + P 弹出 Package Control 来安装插件,

选择Install Package, 然后在输入Emmet, 进行下载.

7FDD4F16-8F0A-4744-99A6-8C6E4A34E4E3.png

1.插件管理中Emmet的介绍
2.Emmet能干啥?

为啥以它为例子? 看看下图吧

html头.gif
  1. 使用 >运算符可以用来生成彼此嵌套的元素;
  2. 使用+运算符可以用来生成彼此相邻的元素.
  3. 使用^运算符,可以让你的代码返回上一层。当你使用>嵌套元素时,想让后面的回到上一层,那么这个方法很适用。
  4. 使用乘法运算符*, 可以i一次性生成多个相同的元素;

例子一: 输入section>div>(p>a)+p的效果如下图:

section>div>(p>a)+p

例子二: 输入ul>li5*的效果如下图:

4e58995a015d6732d7ab5e0638d8bb7a.gif

CSS 相关

1.输入w100,即可生成:

width: 100px;

后边跟上如下代码的表示

p 表示%
e 表示 em
x 表示 ex

2.输入m10-20, 表示

margin: 10px 20px;

总结

  1. E 代表HTML标签。
  2. E#id 代表id属性。
  3. E.class 代表class属性。
  4. E[attr=foo] 代表某一个特定属性。
  5. E{foo} 代表标签包含的内容是foo。
  6. E>N 代表N是E的子元素。
  7. E+N 代表N是E的同级元素。
  8. E^N 代表N是E的上级元素。

**图很炫, 用法很吊, 但是, 怎么也用不起来! **苦思幂想. 终于找到了方法!

Paste_Image.png

千方百计的找到说是只支持可识别的文件类型, what !

第三步 对文件操作(新建/更名等)

3.1 新建文件,地球人都知道 ** cmd + N**;
3.2 CMD + S 保存的时候改一下名字, 很疑惑为何要这样....

再试试Emmet那几个语法吧!
然而, 问题是一个接一个, 多创建几个文件, 又找不到创建那几个了.....

按着 CMD + K + B 折叠左侧列表, 试试吧,

CMD + K + B

第四步 多行操作快捷键

4.1鼠标滑动多行选中操作

multiple-cursor-fast.gif

4.2按住CMD 一个个选中操作

multiple-cursor2.gif

4.3复制当前行, 选中并按下CMD-SHIFT-D

copy-line2.gif

第五. 快速启动浏览器并打开;

上边已经了解过了如何安装插件, 在此不再累述; 网上有些说直接操作第二步, 但是试了试不行, 以下两步可以成功.

5.1 找插件SideBarEnhancements并安装.

ctrl+shift+p—> Install Package—> 找到SideBarEnhancements

5.2 配置快捷键
preferences > package setting > side bar > Key Building-User--输入相关内容

[
    // Chrome
    { "keys": ["command+4"], "command": "side_bar_files_open_with",
        "args": {
            "paths": [],
            "application": "/Applications/Google Chrome.app",
            "extensions":".*"
        }
    },
]

注释

1. keys: 表示快捷键, 根据自己爱好更改;
2. application: 表示安装路径. 

其余的自己可以延伸.

在html文件中按下 CMD + 4试试, 很方便吧.

第六步 添加常规设置

悲剧又出现了, 调用到浏览器了, 但是, 没有内容, 看了看文件, 里边原来没有代码, 我明明写了的! 是因为没有保存---最直接的CMD + S 保存, 如果每次这样不把人累死!!!

添加设置: Preferences —> Key Bindings - User --输入如下内容:

{

//字体大小
    "font_size": 15,
    "ignored_packages":
    [
        "Vintage"
    ],
//焦点丢失后自动保存
    "save_on_focus_lost": true,
//显示当前文件的编码
    "show_encoding": true,
//加粗文件夹名称
    "bold_folder_labels": true,
//显示全路径
    "show_full_path": true,

}


第七. 插件推荐.

1.上边提过的插件Emmet;
2.上边提过的插件--快速启动SideBarEnhancements就不说了;
3.代码格式化--Sublime-HTMLPrettify配置使用步骤如下:

1.`Ctrl+Shift+P` or `Cmd+Shift+P` in Linux/Windows/OS X
2.select Package Control: `Install Package`
3.select `HTML-CSS-JS Prettify`;
4.选中所需要的代码---` CMD +SHIFT + H `
 一睹芳容吧;

4.CSScomb

1. 该插件也需要系统已安装Node.js环境
2. 打开css文件Ctrl + shift + p > Run CSScomb 即可格式化css文件
3. 右击 -> Run CSScomb 或者 Ctrl + shift + c

ef60aaa0ef4af936be439ee760681897_articlex.gif

5.代码提示工具----SublimeCodeIntel;


  1. jade相关
    8.1 jade高亮: package install -> jade 选择第一个(jade);

然而, 插件很多, 快捷键很多, 但要明白自己需要什么, 再补充

参考

1.Sublime Text 3 中提高工作流程的有用快捷键
2.Sublime Text 3 for Mac 安装和插件配置说明
3.Web 前端利器Emmet 的HTML用法总结
4.知乎网友
5.HTML/CSS 速写神器:Emmet

更多精彩内容请关注“IT实战联盟”哦~~~


IT实战联盟.jpg
上一篇 下一篇

猜你喜欢

热点阅读