当前位置: 移动技术网 > IT编程>网页制作>CSS > Sublime功能拓展及插件介绍

Sublime功能拓展及插件介绍

2017年12月25日  | 移动技术网IT编程  | 我要评论
Sublime基础功能及拓展 中文支持 ubuntu16.04中subline text3的中文输入法支持

sudo apt-get update && sudo apt-get upgrade
git clone https://github.com/lyfeyaj/sublime-text-imfix.git
cd sublime-text-imfix && ./sublime-imfix

通过命令行输入subl打开subline再lock到lancher上就可以输入中文了。

有时lancher上打开总是不能输入中文,也不知为何,只能通过terminal输入subl打开才能输入中文。

[解决ubuntu16.04下的sublime text3不能使用中文输入法的问题]

[解决Ubuntu下Sublime Text 3无法输入中文]

Sublime Text 3打开txt中文乱码的解决方法

Sublime Text是一个非常强大的编辑器,可是对中文的支持并不好,在Sublime Text 2 时,可以通过命令行的方式安装编码包来解决,但Sublime Text 3不能通过这样的方式解决。

在安装完Sublime Text 3后要下载一个ConvertToUTF8包,sublime中preference - browse packages打开目录将包放入(如win: C:\Users\用户名\AppData\Roaming\Sublime Text 3\Packages; linux: ~/.config/sublime-text-3/Packages)。重新启动Sublime Text,打开乱码文件后按 Ctrl + Shift + C 即可。[ConvertToUTF8包下载地址]

系统实现快捷调用浏览器">快捷调用浏览器

构建系统可以让您通过外部程序来运行文件,并可以在Sublime Text查看输出。

tools -> Build System –>New Build System,进行如下设置(注意后缀),保存到user目录下:

{
"cmd" :["/usr/bin/firefox","$file"],
"selector":["text.html"]
}

打开html文本,修改内容后按Ctrl+B,可以看到自动调用chrome并且是修改后的内容。在sublime Text的console中可以看到输出的信息。

自定义sublime代码片段

功能:编辑文档中输入sublime自定义字符+tab键,自动生成自定义代码或者文字什么的。

我们在开发中有很多代码是需要重复编写的,每一次都去复制粘贴显然是一件效率极其低下的事情,sublime的自定义代码片段功能就很好的解决了这个问题。

菜单栏-Tools ->developer -> New Snippet可以看到新建一个xml类型的描述文件,如下:

            hello -->        source.python -->

注释已经非常详细了,content 里面就是代码模版:${序号:默认值} 。

关于序号:序号相同的地方光标会同时停在那可以多处同时编辑。序号大小就是 tabindex。在实际使用代码的时候,可以使用 tab 切换光标位置。

以hexo新建一篇博客头部为例:

                        hexoH        source.md -->        hexo博客头部生成

设置完毕,保存代码片段,保存到sublime的文件目录\Packages\User,文件名任意,但文件后缀必须为.sublime-snippet。

现在在文档中输入hexoH+tab键。文档中自动输入:

title: 标题
date: 2015-12-26 15:26:17
tags: [标签]
categories: [分类]

某小皮



Sublime Text 插件

插件使用方法:Ctrl+Shift+P 调用命令面板,一些以“Package Control:”开头的命令,常用的是 Install Package (安装扩展)、List Packages (列出全部扩展)、Remove Package (移除扩展)、Upgrade Package (升级扩展)

配置插件来扩展 Sublime 的功能

点击Sublime Text 3 官方获取用于安装的代码。依次点击 View > Show Console 打开 ST3 的控制台。在控制台中粘贴刚才的代码,然后点击回车。最后重启 ST3。
通过快捷键 cmd+shift+P 打开 Package Control 来安装其他的插件了。输入 install 然后你就能看见屏幕上出现了 Package Control: Install Package,点击回车然后搜索插件。
相关命令:
List Packages 显示所有已安装的插件
Remove Packages 移除一个指定的插件
Upgrade Package 更新一个指定的插件
Upgrade/Overwrite All Packages 更新所有已安装的插件

安裝格式化插件HTML-CSS-JS Prettify

安装html-css-js prettify

Ctrl+Shift+P or Cmd+Shift+P in Linux/Windows/OS Xtype install, select Package Control: Install Packagetype prettify, select HTML-CSS-JS Prettify

安裝其依賴node.js

下载[Download for Linux (x64)]

tar -xf node-v6.10.0-linux-x64.tar.xz

修改hcj-prettify对应的nojs路径

sudo mkdir /usr/bin/nodejs

sudo mv node-v6.10.0-linux-x64/* /usr/bin/nodejs/

确认Node.js安装路径,鼠标右键HTML/CSS/JS Prettify > Set Plugin Options保证插件路径与Node.js安装路径一致, "linux": "/usr/bin/nodejs/bin/node"

快捷键ctrl+shift+H 或者鼠标右键HTML/CSS/JS Prettify > pretty code 完成当前文件的美化操作

[HTML-CSS-JS Prettify]

[使用Sublime Text 3的HTML-CSS-JS Prettify插件格式化代码]

[一个前端程序猿的Sublime Text3的自我修养]

其它插件推荐 WebInspector

在 JavaScript调试方面,这是一个令人惊讶的工具,Sublime上的完整的代码检查工具。
功能:使用绝对路径储存在用户设置中的项目断点,控制台,分步和断点调试器,栈追踪。这些都能够很棒的工作!而且Mozilla还提供了一个插件Fireplay让你连接到Firefox 开发工具和最简单的调试器JSHint。视频

Emmet

编辑器中最流行的插件之一。Emmet,前身Zen Coding也是web开发者提高生产力最有效的方法之一。按下Tab键,Emmet就能把一个缩写展开成一个HTML和CSS代码块,我想提一下Hayaku-集合了方便的层叠样式表缩写。

包含最棒的技巧的视频,来自项目作者。Git

这个插件的实质,看一下它的名字就知道了–它提供了使用我们的最爱的编辑器直接和Git协同工作的机会。使用这种方式与Git协同工作会节省您大量的时间。首先:您不需要时常的在Sublime和终端间相互切换。另外:它具有tag自动补全功能,写add就足够了,而不是git add -A。第三点:它具有快速提交功能(quick),一个命令添加所有变化并全部提交。

如果你只是想利用Git来获取远程仓库的内容,我推荐使用Nettuts+ Fetch.

有个叫Glue的插件,会在界面下方显示一个小窗口,你可以在那里写Shell脚本。这样一来,你的编辑器就不仅仅局限于使用Git了。

GitGutter&Modific

这些插件可以高亮相对于上次提交有所变动的行,换句话说是实时的diff工具。

1

BracketHighlighter

好极了!打开和折叠代码的某一部分就应该是这个样子的。

2

EditorConfig

3

EditorConfig帮助开发者在不同的编辑器,IDE之间定义和维护统一的编程风格。EditorConfig工程包含一个文件,定义了编程风格,文本编辑器插件集合,让编辑器可以读取该文件并依照它来定义风格。例如.editorconfig文件:

  # top-most EditorConfig fileroot = true# Unix-style newlines with a newline ending every file[*]end_of_line = lfinsert_final_newline = true# 4 space indentation[*.py]indent_style = spaceindent_size = 4# Tab indentation (no size specified)[*.js]indent_style = tab# Indentation override for all JS under lib directory[lib/**.js]indent_style = spaceindent_size = 2# Matches the exact files either package.json or .travis.yml[{package.json,.travis.yml}]indent_style = spaceindent_size = 2 Sublimall

一个简洁的插件,可以让你在不同的Sublime Text 编辑器间同步所有的配置(设置,插件,打开的文件等等)所有的一切都是免费的,你只需要创建一个账户即可。是BufferScroll的一个更简约的替代品。

4

译者注:现在暂时无法注册

>Max registration reach

I’m sorry about that, don’t forget that it’s a beta version of Sublimall.

Registrations will been soon re-opened!

Geoffrey.

AllAutocomplete

传统的Sublime Text自动补全插件仅仅在当前文件下工作。AllAutocomplete 可以搜索全部打开的标签页,这将极大的简化开发进程。当然,还有一个插件叫CodeIntel,实现了一些IDE的功能并且为一些语言提供了“代码情报”: JavaScript, Mason, XBL, XUL, RHTML, SCSS, Python, HTML, Ruby, Python3, XML, Sass, XSLT, Django, HTML5, Perl, CSS, Twig, Less, Smarty, Node.js, Tcl, TemplateToolkit, PHP.

5

SublimeREPL

对开发者来讲这个可能是最有用的插件之一了。SublimeREPL 可以直接在编辑器中运行一个解释器,支持很多语言:

Clojure, CoffeeScript, F#, Groovy, Haskell, Lua, MozRepl, NodeJS, Python, R, Ruby, Scala, shell

6

DocBlockr

DocBlockr会成为你编写代码文档的有效工具。当输入/**并且按下Tab键的时候,这个插件会自动解析任何一个函数并且为你准备好合适的模板

12

Floobits

7

SublimeText, Vim, Emacs, IntelliJ IDEA极佳的扩展工具,它使得开发者可以在从不同的编辑器合作编写代码。

AutoFileName

自动补全文件路径-非常方便。没有废话。

8

ColorPicker

通常,如果我们需要一个调色盘的时候,我们习惯使用Photoshop或是Gimp。但是一个完整的选色工具可以直接在你的编辑器中使用-Ctrl/Cmd + Shift + C。还有两个插件GutterColor和ColorHighlightergutter可以在gutter中显示很棒的色彩高亮,简化了色彩代码的定位。

13

Colorcoder

高亮所有变量,因此可以极大的简化代码定位。尤其是对那些有阅读障碍的程序员非常有帮助。

9

PlainTasks

杰出的待办事项表!所有的任务都保持在文件中,所以可以很方便的把任务和项目绑定在一起。可以创建项目,贴标签,设置日期。有竞争力的用户界面和快捷键。

10

MarkdownEditing

可能是Markdonw最好的插件了:语法高亮,缩略词,自动补全,配色方案。你也可以尝试使用MarkdownPreview作为替代解决方案。

11

其它

Sublime SFTP

CTags– 让Sublime Text支持CTags.

SideBarEnhancement– 为侧边栏添加很多额外的功能.

ActualVim– Vim in Sublime – 两个最爱的编辑器合二为一.

SublimeLinter– 行内语法检测插件,支持: C/C++, Java, Python, PHP, JS, HTML, CSS, etc.

CSScomb– CSS代码风格格式化.

FixMyJS,JsfmtandJsFormat– JS/JSON代码风格格式化.

AStyleFormatter– C/C++/C#/Java 代码风格格式化.

SVG-Snippets– 一套 SVG 代码片段.

Inc-Dec-Value– 增加或减少数字, 日期, 十六进制彩色值等等。

Trailing Spaces– 高亮空白结尾并快速删除它们

Alignment– Package Control作者写的简单到极致的多行选择和多行选择对齐插件

Placeholders– 带有文本,图片,列表,表格等的占位用代码片段

ApplySyntax– 快速语法检测

StylToken– 允许以不同的颜色高亮特定的一段文本 (类似和notepad++ 的Style token功能).

EasyMotion– 快速跳转到任何当前激活视图而已看到区域的字符

ZenTabs和Advanced?New?File– 改进默认tab样式和文件创建.

EncodingHelper– 猜测文本的编码方式,在状态栏显示,从不同的编码形式转换到UTF-8

Gist– 同步GitHub Gist和Sublime (ST2).

Clipboard History(ST2) – 为的剪切板保存历史记录

主题和配色方案

Soda

Spacegray

Flatland

Tomorrow

Base 16

Solarized

Predawn

itg.flat

其他所有的配色方案和主题.

[推荐!Sublime Text 最佳插件列表]

from: http://blog.csdn.net/pipisorry/article/details/78868409

ref:[一个前端程序猿的Sublime Text3的自我修养]

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网