搁浅被注册了

图样 图森破 、

@搁浅被注册了2年前

05/12
17:02
利器

Sublime Text 3 调教你的私人利器(下)

接上一篇:Sublime Text 3 调教你的私人利器(上)

AutoPrefixer 调教:

AutoPrefixer 插件的修改并不需要使用 PackageResourceViewer ,其配置文件都保存在 Packages 文件夹。

Package Settings – AutoPrefixer  – Settings-User 加入:

{
  "browsers": ["last 5 versions"],
  "cascade": true,
  "remove": true
}

兼容各浏览器最新的5个版本,使用冒号对齐,移除已有旧内容(?)关于浏览器版本的兼容配置请自行谷歌,个人觉得这个通用配置基本足够。

AutoPrefixer

当然也可以配置快捷键使用,工具栏 Preferences – key Bindings-User ,加入以下代码:

{ "keys": ["ctrl+alt+c"], "command": "autoprefixer" },

 

Emmet LiveStyle 简介及演示:  (已过时,新版可使用独立APP。推荐使用 gulp 的 browser-sync 插件,只单向)
双向修改无刷新预览,你真的知道我在说什么吗?

Emmet LiveStyle

有没有很流弊?默认配置即可使用。

除了安装 LiveStyle 插件,还需要相应的 Chrome 插件 Emmet LiveStyle 。连接被重置? 呵呵,你一定是在逗我,自寻出墙路吧少年(迷茫的少年用力戳这里)。另外,好像还有 Firefox 和 Safari 对应的插件,恩,好像是有。

 

FileHeader  调教:

FileHeader 是一个文件模板插件,可以定制各种文件模板和文件头部信息,保存时可以自动更新文件的修改时间。

FileHeader 的配置文件也都保存在 Packages 文件夹,template 中的 body 对应文件模板,header 对应文件头部,使用文件对应的格式命名,修改起来很简单,下面的动态图示例CSS自动更新文件修改时间。

FileHeader

这个功能对 程序猿 来说相当实用。

 

Side​Bar​Enhancements 调教:

让我使用侧边栏,其实一开始我是拒绝的,自从用了 Side​Bar​Enhancements 侧边栏增强插件,就像加了特效一样。Duang~  ctrl+k 再 ctrl+b 切换自如。

首先你需要新建 Project ,打开一个ST窗口并开启侧边栏,把你的项目文件夹拖进去,然后Save Project As 就行,会在目录下生成两个文件,记录着你上次关闭项目时打开着的文件等信息。

Side​Bar​Enhancements

Open With 可以设置快捷键程序打开,比如使用各浏览器打开的对应的快捷键,自行谷歌。

Edit Preview URLs ,编辑项目路径及对应URL前缀(好像均不支持中文),用于配置默认打开的域名路径设置。

{
//
    "本地项目路径":{
        "url_testing":"测试环境地址",
        "url_production":"正式环境地址"
    },
//以上内容删除,包括本行,下面是示例
    "D:/xampp/htdocs/example/":{
        "url_testing":"http://localhost/example/",
        "url_production":"http://www.baidu.com/example/"
    }
}

还需要设置默认浏览器,Package Settings – Side Bar – Settings-User 加入:

{
  "default_browser": "chrome",
}

然后设置快捷键 Preferences – key Bindings-User 加入:

{ "keys": ["f12"],
  "command": "side_bar_open_in_browser" ,
  "args":{"paths":[], "type":"testing", "browser":""}
},

这里的 “type”:”testing” 对应的就是上面的“测试环境地址”。你也可以指定 “production” 打开“正式环境地址”。

设置完成之后,使用 F12 就可以在本地测试环境下打开文件,非常方便。

 

其他推荐调教配置:

插件固然强大,但是插件装多了,难免出现快捷键互相冲突问题。而且有些插件的快捷键甚是鸡肋,极容易造成误操作。而有的插件为了可定制性,把快捷键都省略了,只在 README 里提到。

通过前面的插件配置,对于快捷键的配置问题也有一定的涉及。据我所见的情况,快捷键配置无非两种。

1. 工具栏 Preferences – key Bindings-User 添加快捷键。

2. 直接修改插件配置文件。

方法1,可以参照 Clipboard Manager 和 AutoPrefixer 配置,最主要的是 command 的值。这个一般能在插件的README 里找到。不知道 README 在哪? Open Resource 找到对应插件,你就能看到了。或者去插件的GitHub主页(如果有的话 …

方法2,以 ConvertToUTF8 插件为例,它解决了ST3原生不支持中文编码文件的问题。但是,它有个默认的快捷键 ctrl+shift+c 经常导致误按我也是醉了。

调教方法:打开 Packages 文件夹找到插件目录(不在 Packages 文件夹的插件请用 Open Resource ),可以看到几个 .sublime-keymap 的文件,找到对应你所使用操作系统名的文件,用 ST3 打开它,接下来你就懂了。

开源无国界,作为一个没过四级的苦逼小前端,只能帮你到这了

Sublime Text 3 调教你的私人利器(下)