Sublime Text 3使用心得
Sublime Text 3使用心得
Sublime Text号称最性感的编辑器, 跨平台, 免费使用。
PS:本文主要针对Mac下的Sublime Text 3配置, 下面是效果图：
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 [arguments] [files]
编辑指定的文件edit the given files
or: subl [arguments] [directories]
打开指定的目录
or: subl [arguments] -
参数Arguments:
--project &project&: 载入指定的project
--command &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",
"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
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, h = 'e96f11eeadd761d777e62404' + '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, h = 'e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else N 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 N 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 主题类:
包含大量配色主题的插件包 首先介绍一个包含大量配色包的网站, , 里面各种各样的配色让人眼花缭乱 .
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中选择主题
著名的Soda主题
安装方法：
shift + cmd + p 打开命令面板
输入 “Package Control: Install Package” 命令
输入soda, 找到Theme-Soda,找到后回车安装
安装成功后在preferences中选择Setting-User更改主题设置:
"theme": "Soda Light 3.sublime-theme"
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, 我非常喜欢的主题, 我自己现在用的就是这款黑色主题：
作者：dinosaurliu
文章源自：
分享即可 +1积分
请登录后，发表评论
评论（Enter+Ctrl）
评论加载中...
评论加载中...
这位童鞋很懒，什么也没有留下～～！
作者的热门手记
Copyright (C)
All Rights Reserved | 京ICP备 号-2有没有mac版本编写html的软件？谁用Mac作开发啊？_macbookpro吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：118,169贴子：
有没有mac版本编写html的软件？谁用Mac作开发啊？收藏
&!DOCTYPE html&
&html xmlns=&& xml:lang=&zh-CN& lang=&zh-CN& prefix=&og: &&
&meta charset=&utf-8& /&
&meta name=&Author& content=&Apple Inc.& /&
&meta name=&viewport& content=&width=device-width, initial-scale=1& /&
&meta http-equiv=&X-UA-Compatible& content=&IE=EmulateIE7, IE=9& /&
&link rel=&stylesheet& href=&& type=&text/css& /&
&title&Apple&/title&
&meta property=&analytics-track& content=&Apple - Index/Tab& /&
&meta property=&analytics-s-channel& content=&homepage& /&
&meta property=&analytics-s-bucket-0& content=&appleglobal,applehome& /&
&meta property=&analytics-s-bucket-1& content=&apple{COUNTRY_CODE}global,apple{COUNTRY_CODE}home& /&
&meta property=&analytics-s-bucket-2& content=&apple{COUNTRY_CODE}global& /&
&meta name=&Description& content=&此处文字& /&
&meta property=&og:url& content=&& /&
&meta property=&og:image& content=&?& /&
&meta property=&og:type& content=&website& /&
&meta property=&og:site_name& content=&Apple& /&
&link rel=&home& href=&& /&
&link rel=&alternate& type=&application/rss+xml& title=&RSS& href=&& /&
&link rel=&index& href=&& /&
&link rel=&stylesheet& href=&/wss/fonts/?family=Myriad+Set+Pro&v=1& type=&text/css& media=&all& /&
&link rel=&stylesheet& href=&/v/home/bx/styles/home.built.css& type=&text/css& /&
&link rel=&stylesheet& href=&/cn/home/styles/home.css& type=&text/css& /&
&link rel=&stylesheet& href=&/cn/home/styles/promos.css& type=&text/css& /&
&script src=&/v/home/bx/scripts/head.built.js& type=&text/javascript& charset=&utf-8&&&/script&
有没有谁有这种软件
推荐一个 谢谢
Adobe brackets
绝对的第一好用的网页编辑器
visual studio code
sublime text、vim、Emacs
很多啊 subtext bbedit
最好用是HBuilder
sublime text可以用下 各种主题各种配色 配合几个插件 爽爽的
html不都是手写吗。只有水笔才用设计器。
你可以选择 phpstorm sublime 或者内置 vi
记事本足够
那个……我就看看
DW，就是代码提示太垃圾。好处是可以实时查看效果。
Coda 2路过
用vim写php的路过
Hbuilder，不解释
win下我用vs来x写，等买macbook了会用vscode吧，临时性修改我用sublime，英文问题吧，我绝得习惯就好。。。webstom要钱的，现在我尽量让我电脑上的软件都是正版。
我用dreamweaver
智能缩写，实时查看，浏览器兼容提示。不解释了。
用dw的代码渣路过
看到dw我就醉了 还是sublime vim hbuild之类的
vim xxxx.html所见即所得的工具从来不用，所以也不知道
登录百度帐号推荐应用
为兴趣而生，贴吧更懂你。或Sublime Text 3(代码编辑器) v3.0.3114 汉化版(32位/64位)
你的位置： &
> Sublime Text 3(代码编辑器) v3.0.3114 汉化版(32位/64位)
Sublime Text 3(代码编辑器) v3.0.3114 汉化版(32位/64位)
不好用:(0)
Sublime Text - 性感的代码编辑器、程序员之必备神器
程序简介：
Sublime Text 是一个代码编辑器，也是HTML和散文先进的文本编辑器，Sublime Text 具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等，还可自定义键绑定，菜单和工具栏。
Sublime Text 的主要功能包括：
拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等，Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作。
优化说明：
1、基于 Sublime Text 3 官方版进行修改汉化。
2、软件已默认注册且已去除自动检测升级提示。
3、调整字体大小为 11px 以适合大众使用习惯。
4、深度整合GBK编码已能够完美支持GBK文件。
5、默认安装了Emmet (Zen Coding)插件。。
6、增加了配色非常舒服的Theme-Nil主题。
7、修改多处细节和配置文件使其更人性化。
统一下载-温馨提示：
软件安装即注册好。
本站提供UC浏览器5.6官方下载，UC浏览器是全球5亿用户共同选择的智能手机浏览器，包括UC浏览器安卓版 iPhone版 ipad版 TV版，UC浏览器电脑版极速来袭，给您超快感的上网体验!UC浏览器5.4更新：
(您的评论需要经过审核才能显示,请文明发言！)&&剩余字数：
点击图片更换
* 为了达到最快的下载速度，推荐使用或下载本站软件。 * 请一定升级到最新版才能正常解压本站提供的软件! * 站内提供的所有软件均为作者提交或网上搜集，若侵犯您的版权利益，通知我们!
应用软件分类
本站资源均收集整理于互联网，其著作权归原作者所有，如果有侵犯您权利的资源，请来信告知，我们将及时撤销相应资源。
Copy . All Rights Reserved.Sublime Text 3 Build 3047 – 代码编辑器(Win/Mac) | ˉ黑色.小亮Sublime Text3(mac版)上好用的插件 - 简书
下载简书移动应用
写了10322字，被7人关注，获得了12个喜欢
Sublime Text3(mac版)上好用的插件
sublime Text3 插件的安装
代码编辑非常有用的5个插件
配置React 开发环境所需要的插件支持
首先 请查看你的sublime Text3 上是否安装了Package Control ,
安装 Package Ctrol： 使用 ctrl + ～ 打开控制台，输入以下代码：
import urllib.request, pf = 'Package Control.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())
1. 代码格式化的插件 (格式化HTML+CSS+JS+JSON代码的插件)
HTML-CSS-JS Prettify 是一个可以格式化HTML、CSS、Javascript和JSON的sublime插件，有着很棒的格式化效果。不过建议大家学习常用的代码编辑格式尽量写到符合标准的代码
安装过程如下：
1. 在Sublime Text中，按下Ctrl+Shift+P调出命令面板;
2. 输入install 调出 Install Package 选项并回车;
3. 输入pretty，并在列表中选择HTML-CSS-JS Prettify后回车即可安装
可能遇到的问题以及解决方案（全部安装正确但格式化不能使用）
1、Node.js路径配置不对（首先确保安装了Node.js），修改一下HTML-CSS-JS Prettify的用户配置即可（Preferences -& Package-settings -& HTML/CSS/JS Prettify -& Set Prettify Preferences）：
2、如果路径没有问题，查看是不是sublime打开的文件路径中有中文，由于HTML-CSS-JS Prettify不支持utf-8，打开文件路径如果有中文，也会报Node.js路径错误。
解决办法如下：
1、preferences-&Browse Packages（打开sublime 的安装文件）
2、修改 HTML-CSS-JS Prettify 目录下的 HTMLPrettify.py 文件
3、83行：node_path = PluginUtils.get_node_path() 改为：node_path = PluginUtils.get_node_path().encode("utf-8")
4、85行：file_path = self.view.file_name() 改为：file_path = self.view.file_name().encode("utf-8")
2.Js和Css语法检查插件
sublimelinter以及配套的插件
启动Package Control
安装sublimelinter 插件
安装sublimelinter-jshint（备选安装 sublimelinter-jslint）
安装sublimelinter-csslint
安装node运行环境
注意不要使用jsxhint,这是针对于需要支持react语法的插件,想要安装react语法插件请参照后面的sublime 搭建react开发环境
全局安装 jshint /csslint
安装命令:sudo npm install -g jshint 注意插件名称都为小写.
:sudo npm install -g csslint
将下列代码复制到Preference-&package Settings-&SublimeLinter-&Setttings-User 中
注意下面代码中的(第五行和第六行 sublimelinter_executable_map)JS和Css的路径问题：
mac中可以再终端用 which node命令 查看node的安装路径
windows 中找到实际的node安装位置复制路径即可。
"sublimelinter": "save-only",
"sublimelinter_popup_errors_on_save": true,
"sublimelinter_executable_map": {
"javascript": "/usr/local/bin/node",
"css": "/usr/local/bin/node"
"jshint_options": {
"strict": false,
"quotmark": "single", //只能使用单引号
"noarg": true,
"noempty": true, //不允许使用空语句块{}
"eqeqeq": true, //!==和===检查
"undef": true,
"curly": true, //值为true时，不能省略循环和条件语句后的大括号
"forin": true, //for in hasOwnPropery检查
"devel": true,
"jquery": true,
"browser": true,
"wsh": true,
"evil": true,
"unused": "vars", //形参和变量未使用检查
"latedef": true, //先定义变量，后使用
"globals": {
"grunt": true,
"module": true,
"window": true,
"jQuery": true,
"$": true,
"global": true,
"document": true,
"console": true,
"setTimeout": true,
"setInterval": true
"csslint_options": {
"adjoining-classes": false,
"box-sizing": false,
"box-model": false,
"compatible-vendor-prefixes": false,
"floats": false,
"font-sizes": false,
"gradients": false,
"important": false,
"known-properties": false,
"outline-none": false,
"qualified-headings": false,
"regex-selectors": false,
"shorthand": false,
"text-indent": false,
"unique-headings": false,
"universal-selector": false,
"unqualified-attributes": false
sublimelinte 支持的语言截图(后续的语言支持需要用户自行配置)
sublimelinte 支持的语言截图
3. JSFormat 插件(只是针对于js文件有效,想要格式化HTML等文件,请参照第一点)
按下快捷键 Ctrl+Alt+p 打开Package Control命令面板
输入 jsformat 回车安装即可.
在你写javascript代码时,选中需要格式化的代码，按下 Ctrl+Alt+f 快捷键后,js代码自动格式化对齐,赶快试一试吧!
如果上面的快捷键使用无效可以使用命令格式化代码,你可以选中要格式化的代码 ,然后按下 Ctrl+Alt+P
(mac 系统 command + shift +p)
输入命令: Format:javascript
回车即可格式化.
4. Emmet 是一个前端开发的利器 用于自动完成HTML的代码书写
Emmet 的基本用法是：输入简写形式，然后按 Tab 键。
关于 Emmet 的更多用法，请看官方文档，这份可以帮你快速记忆简写形式。
Emmet安装：在Package Control中 install Package -& Emmet 安装Emmet.
使用：输入特定含义的字符 按 Tag 自动完成
5. Theme – Soda + sublime Text3 主题修改
安装： Theme – Soda
在 Preferences -&Setting - User 中的[]中括号中添加,(注意配置文是数组的形式)
"theme": "Soda Light.sublime-theme"
"theme": "Soda Dark.sublime-theme"
6.Sublime Text 3安装React 开发环境插件
babel-sublime
支持ES6，React.js, jsx代码高亮，对 JavaScript, jQuery 也有很好的扩展
安装：PC上ctrl+shift+p（MacCmd+shift+p）打开面板输入babel安装
配置：打开.js, .jsx 后缀的文件;
打开菜单view，
Syntax -& Open all with current extension as... -& Babel -& JavaScript (Babel)，
选择babel为默认 javascript 打开syntax
sublimeLinter-jsxhint
JSX 代码审查，实时提示语法错误, 帮助快速定位错误
ctrl+shift+p（MacCmd+shift+p）打开面板输入sublimeLinter-jsx安装(请先确保sublimeLinter安装成功)
必须有node.js环境支持 安装node.js
安装node中安装jsxhintnpm install -g jsxhint
修改Emmet兼容jsx 文件(使用Tag 快速完成react 代码书写)
JSX语法书写
ctrl+shift+p（MacCmd+shift+p）打开面板输入emmet安装
打开preferences -& Key bindings - Users，把下面代码复制到[ ]中括号内部(注意配置文件为数组形式)。
"action":"expand_abbreviation"
"command":"run_emmet_action",
"context": [{
"key":"emmet_action_enabled.expand_abbreviation"
"keys": ["tab"],
"command":"expand_abbreviation_by_tab",
"context": [{
"operand":"source.js",
"operator":"equal",
"match_all": true,
"key":"selector"
"key":"preceding_text",
"operator":"regex_contains",
"operand":"(\b(a\b|div|span|p\b|button)(\.\w*|&\w*)?({FNXX==XXFN}*?}$)?)",
"match_all": true
"key":"selection_empty",
"operator":"equal",
"operand": true,
"match_all": true
使用super+e触发 emmet；
正则判断用 a，div，span，p，button标签默认tab 触发；
默认 class 修改为 className 注 supre+e 在 PC 上指的是win+e（pc 建议修改为emmet 默认按键 ctrl+e）,在 mac 上指的是cmd+e
详细请参考规则来源，正则小有修改
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
选择支付方式：