sublime text3 配置插件包记录

前言:

很多插件已经开始放弃支持ST2了,所以推荐使用ST3,大量的最新插件和最新功能已经不再支持st2了

下载地址戳这里:http://www.sublimetext.com/3

1、所有插件

易用性:
Monokai Extended 主题,推荐使用
HTML5,HTML5标签拓展
Js?Format,javascript格式化
CSS Format,CSS格式化
Tag,HTML格式化
Brackethighlighter,标签对标记
Side?Bar?Enhancements ,增强型侧边栏
BufferScroll,代码折叠状态保留
StyleToken , 标记颜色代码

功能:
Emmet,前端神器
TortoiseSVN,SVN你懂的
Quote?HTML,把HTML拼接成js插入字符串,神器
Clipboard Manager,增强型剪贴板,可访问历史剪贴板记录
FileHeader,文件模板 , 可自动更新修改时间
AutoPrefixer,浏览器私有属性前缀补全 (Node.js依赖)
ColorConvert,RGBA颜色转换,十六进制颜色转换为RGBA颜色
Better Completion,全能代码提示
LiveStyle,双向更改无刷新实时预览 , 包含chrome插件 Emmet LiveStyle
SFTP , 需要激活 ,看这里 http://mooring.iteye.com/blog/2067269
*jQuery,jQuery 代码提示(SublimeCodeIntel已可替代此插件)
*Sass以及SASS Build,使用Sass必备,ctrl+b执行编译
*yui compressor,JS和CSS压缩 (JRE依赖),ctrl+b执行编译

推荐使用面向未来的前端自动化工具(相对成熟的Grunt,以及后起之秀 Gulp ,还有百度 FIE),以上两个星标插件都可被自动化工具所取代。

其他:
ConvertToUTF8,GBK编码兼容
IMESupport,输入法不跟随时安装
TrailingSpaces,多余空格标记,强迫症患者福音
Hasher,符号转义,ctrl+shift+p 选择 Entity Encode
PackageResourceViewer,插件修改必备,ctrl+shift+p 调用 Open Resource

2、配置

1)用户配置

trim_trailing_white_space_on_save,自动移除行尾多余空格,处女座更安心了。

ensure_newline_at_eof_on_save,文件末尾自动保留一个空行,懂的人自然知道它的用处。

font_face 设置字体。Microsoft YaHei Mono 是一款混合字体,专为代码优化,看起来很舒服。当然你也可以使用你自己喜欢的字体,或者删掉本行,使用默认字体。

disable_tab_abbreviations 设置为 true ,禁用 Emmet 的 tab 键功能(请使用 ctrl+e),系统自带的 tab 功能还是可圈可点的。当然你也可以不设置它,以完全使用 Emmet 的 tab 补全功能。

translate_tabs_to_spaces 很明白就是把代码 tab 对齐转换为空格对齐,tab_size 配合设置空格数。这个需求因人而异了,不喜欢可以去掉。

draw_minimap_border,用于右侧代码预览时给所在区域加上边框,方便识别。

save_on_focus_lost,窗口失焦立即保存文件,嘛嘛再也不用担心你忘记保存了。

highlight_line,当前行高亮。word_wrap,设置自动换行。

fade_fold_buttons,默认显示行号右侧的代码段闭合展开三角号。

bold_folder_labels,侧边栏文件夹显示加粗,区别于文件。

highlight_modified_tabs,高亮未保存文件。

default_line_ending: “unix”, 使用 unix 风格的换行符。

auto_find_in_selection: true ,开启选中范围内搜索(而不是整个文档

Microsoft YaHei Mono 字体下载 sutep

2) 默认快捷键修改

3)  默认HTML补全修改

ST3自带了HTML代码补全机制,前面配置的 disable_tab_abbreviations 禁用了 Emmet 的 tab 功能,只是因为我觉得自带的HTML补全用起来更顺手。我就不再说一遍当然什么鬼的了…
ctrl+shift+p,输入 Open Resource,回车,选择HTML,回车,选择 html_completions.py ,回车即可修改。
替换如下内容(也许大约在第170行 :

("a\tTag", "a href=\"javascript:void(0);\">$0</a>"),
("iframe\tTag", "iframe src=\"$1\">$0</iframe>"),
("link\tTag", "link href=\"$1\" rel=\"stylesheet\" type=\"text/css\" />"),
("script\tTag", "script type=\"text/javascript\" src=\"$1\">$0</script>"),
("style\tTag", "style>$0</style>"),
("img\tTag", "img src=\"$1\" alt=\"$2\" />"),
("param\tTag", "param name=\"$1\" value=\"$2\">"),
("br\tTag", "br />"),
("input\tTag", "input type=\"$1\" />")

4)插件修改

而升级ST3后,插件的修改很大程度上依赖于 PackageResourceViewer ,使用 ctrl+shift+p,输入 Open Resource,回车以查看所有插件目录,下面的说明就不赘述这个步骤了。自行修改过的插件会在 Packages 文件夹里自动生成相应的文件。

使用 @keyframes 时 Emmet 的自动前缀并还在…  经过一番谷歌之后,在一篇英文讨论帖里看到 Emmet 的 @keyframes 使用的是 snippets (可以创建自己的snippets,对于常用的代码非常高效,请自行谷歌)。

Open Resource 选择 Emmet ,修改 emmet 文件夹里的 snippets.json 。找到 “@kf”,替换成如下内容:

"@kf": "@keyframes ${1:identifier} {\n\t${2:from} { ${3} }${6}\n\t${4:to} { ${5} }\n}",

  此后,在 CSS 里,输入 @k ,然后 ctrl+e 就可以生成标准的 @keyframes 代码块。后面的事情就交给 AutoPrefixer 了。

5)其他

1、双向修改无刷新预览

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

2、

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

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

3、 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/"
    }
}

  

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

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

3、其他

快捷键配置无非两种。

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 打开它 即可

时间: 2024-10-13 11:54:39

sublime text3 配置插件包记录的相关文章

sublime Text3配置及快捷键、插件推荐总结

一.基础 1.重要文档: sublime Text3官方文档中文版:http://feliving.github.io/Sublime-Text-3-Documentation/ sublime Text插件下载站点:https://sublime.wbond.net/ Sublime Text install package control:https://sublime.wbond.net/installation 非常好的參考文档:https://github.com/jikeytang/

SubLime Text3 常用插件总结

近来开始恶补前端知识,在一定的技能基础上,逐渐开始进阶的学习和使用.因此在这里罗列下,SubLime Text3 常用插件: 1.Emmet 提高HTML & CSS3编写速度. 2.Theme – Soda 一直用的一款皮肤 3.sideBarEnhancements 侧边栏右键增效插件,提高页面处理速度. 4.HTML5 Sublime Text3支持HTML5 5.Sass Sublime Text3支持Sass 6.Less Sublime Text3支持Less 7.SublimeCo

sublime text3 emmet插件 安装

sublime text3  emmet插件 百度云地址:http://pan.baidu.com/s/1kUvcYov 然后按下图来 安装就可以了 参考:http://www.cnblogs.com/tinyphp/p/3217457.html

Sublime Text3 配置Python3编译环境

Sublime Text3 配置Python编译环境 进入Sublime Text3 ,然后选择菜单:工具(T)==>编译系统(U)==>新编译系统... 把上面的代码换成如下代码: "cmd": ["C:/Python36-32/python.exe","-u","$file"], "file_regex": "^[ ]*File \"(...*?)\", lin

Sublime Text3 配置 NodeJs 环境

来源于:http://www.cnblogs.com/qiaojie/p/5560388.html 前言 大家都知道,Sublime Text 安装插件一般从 Package Control 中直接安装即可,当我安装 node js 插件时候,直接通过Package Control 安装,虽然插件安装成功了,但是找不到配置文件 Nodejs.sublime-build 来更改一些配置 .于是去 https://packagecontrol.io/packages/Nodejs 官网上查看,只提供

Sublime Text3 BracketHighlighter 插件设置

BracketHighlighter 插件能为Sublime Text提供括号,引号这类高亮功能,但安装此插件后,默认没有高亮,只有下划线表示,不是很醒目,需要配置: 1. 在Sublime Text中用package control安装 BracketHighlighter : 2. 安装完成后,打开Preferences -> package settings -> Bracket Highlighter -> Bracket Settings – User,然后添加如下代码: {

Sublime text3配置C/C++编译环境

安装sublime text3后,一直很喜欢使用它看代码(这个高亮配色真的很好看).它默认的运行环境就有C/C++,在写了一个hello world!后正常输出,但在加入scanf()输入后就不行了.在网上搜了一下,这个问题好像无解,可以自己安装gcc/g++,然后配置一下,通过调用命令窗口解决.这里简单记录一下配置过程. 一.准备工作 1.下载sublime text3,并安装 2.下载MinGW(包括gcc/g++),并安装 windows系统安装后,需要右键计算机->属性->高级系统设置

[前端学习笔记]Sublime text3配置

1,官网下载 Sublime 最新版本,目前我使用的是Sublime text 3,不收费,直接安装即可 2,安装"插件管理器",准备体验起飞. 安装有两种方式 自动安装: 打开控制台(命令面板)方法有 3 1. View > Show Console (英文界面) 2. 查看 > 隐藏/显示控制台 (中文界面) 3. ctrl + ` 这个是反引号,在Tab键上面那个键) 把这面这段代码复制粘贴过去执行 (这是给Sublime_text 3 用的,2可不行哦) impor

sublime text3 常用插件安装

1.Package Control 按Ctrl+~调出console(或者view>show console) 粘贴以下代码到底部命令行并回车: import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.req