安装插件

http://www.jianshu.com/p/25cdc7d608bb

1.下载Sublime Text:http://www.sublimetext.com。终身免费。界面炫酷,简单小巧。

2.Sublime默认没有 Nodejs 语法高亮与自动补全,需要下载 Nodejs 插件:https://github.com/tanepiper/SublimeText-Nodejs。

执行命令:

gitclonegit://github.com/tanepiper/SublimeText-Nodejs.git~/Library/Application\Support/Sublime\Text\2/Packages/Nodejs

配置

Sublime Text->Preferences->Settings - User,推荐一些配置:

"translate_tabs_to_spaces": true开启自动将Tab替换为空格

"trim_trailing_white_space_on_save": true开启自动删除行末空格

"ensure_newline_at_eof_on_save": true开启保存文件时在文件末尾保留一个空行

"save_on_focus_lost": true开启文件失去焦点立即保存

"font_size": 18设置字体大小,默认10

"highlight_line": true开启光标所在行高亮

"bold_folder_labels": true开启侧边栏文件夹名显示加粗

插件

可以到官网查找自己喜欢的插件,下面推荐一下插件,欢迎大家编辑补充

Package Control

sublime包安装工具,安装方式:

view->show console

输入下方命令:

import urllib.request,os; pf = 'PackageControl.sublime-package';ipp=sublime.installed_packages_path();urllib.request.install_opener(urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf),'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

等待安装完成即可

All Autocomplete

扩展了sublime只在当前文件进行搜索匹配的自动补全提示,会在所有打开的文件中搜索匹配自动补全提示

AutoFileName

自动补全提示文件名字

Babel

es6语法高亮插件,具体设置参考这里,可配合Oceanic Next Color Scheme主题。

Bufferscroll

保存折叠行

Clipboard Manager

可以查看剪贴板历史纪录,Sublime Text->Preferences->Key Bindings - User,添加以下配置

{"keys": ["super+c"],"command":"clipboard_manager_copy"},{"keys": ["super+x"],"command":"clipboard_manager_cut"},{"keys": ["super+v"],"command":"paste_and_indent"},{"keys": ["super+shift+v"],"command":"clipboard_manager_choose_and_paste"}

查看剪贴板历史纪录快捷键:cmd+shift+v

CSS3

更好的CSS3语法高亮支持。

CSScomb

格式化css样式;选中css样式右键选中csscomb即可,还能在usersetting中自定义css格式化规则!

compare side-by-side

文件对比,打开要对比的文件,在title处单击右键选择对比即可

DocBlockr

像java等语言的块注释,使用方法,/**Tab就ok

EditorConfig

跨编辑器代码静态风格配置sublime插件,配置说明请参考这里

Emmet

Sublime Zen Coding插件,建议安装,可以用来快速编写html/css,具体用法

javascript completion

javascript api自动补全插件,它相比SublimeCodeIntel的优势是

轻量,只是用来补全javascript api

支持es5语法

有参数提示

自动纠错

Java​Script & Node​JS Snippets

js代码片段,快捷输入请参考这里

HTML-CSS-JS Prettify

HTML/css/js/json格式化,快捷键:cmd+shift+h

LESS

less文件代码高亮显示

Markdown Extend

markdown文件高亮扩展,文件中的代码块也会相应高亮。

Markdown Preview

markdown文件预览查看,编辑略卡,快捷键cmd+shift+p调用命令行窗口后,输入preview查找相关命令

Nodejs

Nodejs API 自动补全

SideBarEnhancements

侧边栏增强工具,建议安装,为侧边栏右键菜单增加剪贴,复制,粘贴,浏览器中打开等选项

SublimeLinter

Sublime代码检查工具。

SublimeLinter-eslint

SublimeLinter的ESLint插件,javascript代码质量检查工具对比可以参考这里,如何使用这个插件可以参考这里,ESLint的Rules可以查阅官网

SublimeTmpl

Sublime新建文件模板插件,支持快捷键新建,修改内置模板,增加自定义模版,具体可以参考这里

Terminal

终端快捷启动插件,快捷键:cmd+shift+t,会在终端直接cd到当前文件的父文件夹

主题

可以到colorsublime里查找自己喜欢的主题。下面推荐一些有特色的主题:

Oceanic Next Color Scheme

支持es6/react语法高亮,需要先安装babel-sublime语法高亮插件。

Material Theme for Sublime Text 3

Google Material风格主题,同时支持Oceanic Next Color Scheme color theme,不同文件类型会有相应的精美icon。

Spacegray

简约扁平配色看起来很舒服的主题。

在sublime中运行js

我们可以在浏览器的console里运行js,也可以在node的REPL里运行js,但是都不是很方便,其实在sublime里也是可以直接运行js的,能够很方便的帮助我们测试javascript api以及验证正则。

下面介绍三种在sublime里运行js的方法

JSC

JSC为Mac内置的javascript控制台程序。

Tools > Build System > New Build System

在打开的文件中添加如下代码

{"cmd":["/System/Library/Frameworks/JavaScriptCore.framework/Versions/A/Resources/jsc","$file"],"selector":"source.js"}

保存为JSC.sublime-build

Tools > Build System,选择刚才创建的JSC

打开js文件,cmd+b

注意用debug()替换console.log(),可支持到es5。

Node

首先确保已安装node

Tools > Build System > New Build System

在打开的文件中添加如下代码

{"path":"/Users/wangjinliang/.nvm/versions/node/v4.2.3/bin","working_dir":"${project_path:${folder}}","selector":"source.js","encoding":"utf-8","shell":true,"windows":{"cmd":["taskkill /f /im node.exe >nul 2>nul & node $file"]    },"osx":{"cmd":["killall node >/dev/null 2>&1; node $file"]    },"linux":{"cmd":["killall node >/dev/null 2>&1; node $file"]    }}

通过which node获取node的安装目录,添加到对应的path属性上

保存为node.sublime-build

Tools > Build System,选择刚才创建的node

打开js文件,cmd+b

对es6的支持情况视node版本而定。

Babal 5.x

首先确保已安装node,

npm install babel@5.x -g全局安装babel命令行模块

Tools > Build System > New Build System

在打开的文件中添加如下代码

{"path":"/Users/wangjinliang/.nvm/versions/node/v4.2.3/bin","working_dir":"${project_path:${folder}}","selector":"source.js","encoding":"utf-8","shell":true,"windows":{"cmd":["taskkill /f /im node.exe >nul 2>nul & babel-node $file"]    },"osx":{"cmd":["killall node >/dev/null 2>&1; babel-node $file"]    },"linux":{"cmd":["killall node >/dev/null 2>&1; babel-node $file"]    }}

通过which node获取node的安装目录,添加到对应的path属性上

保存为babel.sublime-build

Tools > Build System,选择刚才创建的babel

打开js文件,cmd+b

全面支持es6,以及部分es7,相比第二种直接通过node运行略慢

Babal 6.x

与bable5.x有一些区别,请参考这里

0.设置subl命令行 #如果是在默认shell下, 

sudo ln -s "/Applications/Sublime\ Text.app/Contents/SharedSupport/bin/subl" /usr/bin/subl

 #使用zsh的可以使用以下命令 

alias subl="'/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl'" 

alias nano="subl"

export EDITOR="subl" 测试使用一下命令 $ subl

使用方法 

用法: 

subl [arguments] [files] 编辑指定的文件edit the given files 

or: subl [arguments] [directories] 打开指定的目录 

or: subl [arguments] - 编辑stdin 

参数Arguments: 

--project: 载入指定的project

 --command: 运行指定的命令

 -n or --new-window: 打开一个新的窗口 

-a or --add: 添加文件夹到当前窗口 

-w or --wait: 返回前等待文件关闭 

-b or --background: 不激活该应用程序 

-s or --stay: 文件关闭后保持应用程序激活状态 

-h or --help: 显示帮助并退出 

-v or --version: 显示版本信息并退出 如果从标准输入--wait是隐式的。 

使用--stay当文件关闭是不切换到后台控制台(只与是否有等待的文件有关) 文件名可以通过加:line或者:line:column后缀来指定打开的定位。 用法摘自官方文档

1.修改Sublime Text2 默认配置 

在菜单栏选择 Sublime Text->Preferences->Setting-User(注意其中Setting-Default是默认的系统配置, 是不可修改的), 通过修改用户设置会覆盖系统对应的默认配置,下面是我的配置单, 都加有注释。 

{ "color_scheme": "Packages/Theme - itg.flat/itg.dark.tmTheme", #主题设置, 这是下载主题后, 自动生成的, 也可以手动配置 

"font_size": 15, #设置字体大小, 我比较喜欢大一点的字体

"ignored_packages": #设置忽略文件类型, 第二个是默认忽略的, 第一个markdown文件我使用另一种文件打开, 

[ "Markdown", 

"Vintage" ], 

"create_window_at_startup": false, #取消启动时,自动打开新窗口的设置, 这个设置很恶心, 每次启动后会自动生成一个空白窗口 

"open_files_in_new_window": false, #取消打开文件时会新生成一个窗口, 默认设置每次打开一个项目会重新生成一个窗口 

"highlight_line": true, #高亮当前编辑行, 其实高亮的不明显 

"highlight_modified_tabs": true, #设置文件修改时, 标签高亮提示, 这样可以提示保存 

"show_encoding": true, #在窗口右下角显示打开文件的编码 

"original_color_scheme": "Packages/Theme - itg.flat/itg.dark.tmTheme" #主题设置 

2.添加快捷键前端网页调试功能 这个功能是我以前在github的项目里看到的, 已经找不到项目源地址了, 感谢原作者。 

①.点击菜单Tools -> New Plugin...,在创建好的py文件输入下列内容: 

import sublime, sublime_plugin import webbrowser 

urlmap = { '/Users/andrewliu/HTML/' : 'file:///Users/andrew_liu/HTML/',#这里需要进行个人电脑的配置, 配置个人项目路径 } 

class OpenBrowserCommand(sublime_plugin.TextCommand): def run(self, edit) : window = sublime.active_window() window.run_command('save') url = self.view.file_name() flag = False for path, domain in url_map.items(): if url.startswith(path): url = url.replace(path, domain).replace('\\', '\/') flag = True break if not flag: url = 'file://' + url webbrowser.open_new(url) #这里使用默认的浏览器调试 

将文件保存到Packages/User目录(Packages可通过菜单里的Browser Packages...打开),文件名随意,如open_browser.py。插件部分完工了。 

②.接下来,为刚才的插件分配快捷键。点菜单Tools -> Command Palette...,或者shift+cmd+p,打开命令集,选择“key Bindings - User”打开个人快捷键配置,输入下列内容:

 [{ "keys": ["ctrl+shift+b"], "command": "open_browser" }] 

这就是要做的全部工作,可以测试下了。打开一个html文件,ctrl+shift+b试试,没意外的话文件会在默认浏览器打开了。url_map里配置的站点目录到URL的映射应该也是可用的。 

3.添加包管管理神器 最近Package Control好像被墙了,我的另一台电脑老是上不去,具体不太清清楚,天朝丧心病狂大家懂得,所以如果一直上不去,请翻墙。 

安装过程: 使用快捷键 control + 或者菜单栏选择View > Show Console 

Sublime Text3在控制台输入

 import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; 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) Sublime Text2在控制台输入 import urllib2,os,hashlib; 

h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation') 打开包管理神器 请使用快捷键shift + cmd + p, 然后输入package或者一些简写。 

4.Sublime Text 常用快捷键 |快捷键组合|功能| |---|---| |shift + cmd + p|打开命令面板| |control + |控制台| |cmd + n|新建标签| |cmd + 数字|标签切换| |cmd + option + 2|分成两屏| |control + 数字|分屏时移动到不同的屏幕| |cmd + delelte|删除光标前所有字符, 貌似是Mac快捷键| |cmd + f| 查找| |option + cmd + f|查找替换| |cmd + t|文件跳转| |control + g|行跳转, 类似vim中的num + gg| |cmd + r|函数跳转| |cmd + /|给选中行添加或去掉注释| |cmd + [或 cmd + ]|智能行缩进| |cmd + k + b`|开关侧边栏| 更多快捷键可查看:官方文档 

5.推荐插件 插件是非常重要的一部分, 一个普通的编辑器难以满足大部分人需要, 更难以满足程序员多样化的编程语言, 所以需要使用插件打造个性化的类IDE, 相比与IDE有启动快, 干净, 干扰少的优点。 

5.1 主题类: 包含大量配色主题的插件包 首先介绍一个包含大量配色包的网站, Colorsublime, 里面各种各样的配色让人眼花缭乱 Colorsublime Plugin. 安装方法: shift + cmd + p 打开命令面板 输入 “Package Control: Install Package” 命令 输入 Colorsublime plugin, 找到后回车安装 安装成功后在preferences中选择配色 Colorsublime Plugin github——>>项目地址 iTg主题, 我的最爱。 安装方法: shift + cmd + p 打开命令面板 输入 “Package Control: Install Package” 命令 输入Theme - itg.flat, 找到后回车安装 安装成功后在preferences中选择主题 项目github地址 著名的Soda主题 安装方法: shift + cmd + p 打开命令面板 输入 “Package Control: Install Package” 命令 输入soda, 找到Theme-Soda,找到后回车安装 安装成功后在preferences中选择Setting-User更改主题设置: { "theme": "Soda Light 3.sublime-theme" } github项目地址 

5.2. 其他插件 安装方法都通过Package Control shift + cmd + p 打开命令面板 输入 “Package Control: Install Package” 命令 输入安装插件的简写或全拼,找到后回车安装 alignment 这个忘了干嘛的了, 好像是控制所有类型文本的缩进; all Autocomplete sublime只对当前文件进行本文件中的查找不全, all Autocomplete是对全部打开的文件进行查找不全, 选择更多更全面; converttoUTF8 编辑的所有文件都使用UTF-8编码; docblockr 强大的文档注释功能, 只要在文档中输入/*然后按一下tab, 就会根据代码自动生成注释; emmet 前段神器, 减少大量的工作量, 使用方法可以参考Emmet:HTML/CSS代码快速编写神器或者官方文档; git 支持sublime上的git操作, 这个就不用多说了; markdownediting或者markdownPerview 这个是写Markdown必备的。可以在包管理器中安装。装完之后,写作Markdown时(右下角显示语法为Markdown),可以按ctrl+b,直接就会生成HTML,并在浏览器中显示; jsformat JavaScript代码格式化; sidebarenhancement 这是用来增强左边的侧边栏。左侧边栏可以在View -> Side Bar -> Show Side Bar中打开,可以用Project -> Add Folder to Project...往侧边栏加入常用的文件夹。装完这个插件,侧边栏的右键菜单会多一些功能,挺实用的; Bracket Highlighter 这是用来做括号匹配高亮的,可以在包管理器中安装。Sublime Text 2自带的括号匹配只有小小的一横线,太不显眼了,这个可以让高亮变成大大的一坨,不过我觉得它大得会盖住光标了; SublimeLinter 语法检测工具, 可以检测到所写代码的语法错误,并高亮显示错误 用户手册 其中需要额外安装一下包,如SublimeLinter-pyflakes and SublimeLinter-pep8.SublimeLinter-jshint,SublimeLinter-pyyaml, SublimeLinter-csslint, SublimeLinter-html-tidy,and SublimeLinter-json 更多 Djaneiro 支持模版和关键词高亮, 提供有用的代码片段; Material Theme; 绝对值得拥有的扁平化全界面修改Sublime UI, 我非常喜欢的主题, 我自己现在用的就是这款黑色主题:Material Theme Github地址 

作者:dinosaurliu 

文章源自:https://www.textarea.com/dinosaurliu/sublime-text-3-shiyong-xinde-133/ 

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,847评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,208评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,587评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,942评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,332评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,587评论 1 218
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,853评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,568评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,273评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,542评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,033评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,373评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,031评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,073评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,830评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,628评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,537评论 2 269

推荐阅读更多精彩内容