Sublime Text 3_html/css_WEB-ITnose をエレガントに使用する方法

概要

Sublime Text3 のダウンロード アドレス: http://www.sublimetext.com/3。この記事の操作はすべて Sublime Text3 をベースにしており、OS は Mac です。この記事は主に Sublime Text Unofficial Documentation からの抜粋です。さまざまな機能やテクニックを使いこなすことで、作業効率が大幅に向上します。

ショートカットキー集

ショートカットキー

Cmd+shift+d:: 現在選択されている内容をコピー＆ペースト 選択されていない場合は、カーソルのある行をコピー＆ペーストします。

インストール

• 公式 Web サイトから .dmg ファイルをダウンロードします。
• .dmg ファイルを開きます。
• Sublime Text 3 をアプリケーション フォルダーにドラッグします。

コマンドラインで Sublime Text を起動したい場合は、ターミナルで次のコマンドを実行する必要があります:

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

このように設定した後、ターミナルで subl を実行して Sublime Text を開き、subl < を実行します。ファイルパス> を選択して、対応するファイルを開きます。

基本概念

このセクションで紹介する概念をよく理解すると、このチュートリアルをより深く理解できるようになります。

データ ディレクトリ

ほぼすべての必要なファイルはデータ ディレクトリに保存されます。パスはオペレーティング システムによって異なります:

• Windows: %APPDATA%Sublime Text 3
• OS X: ~/Library/アプリケーションサポート/ Sublime Text 3
• Linux: ~/.config/sublime-text-3

メニューから findle でこのディレクトリのサブディレクトリを開くことができます: (Sublime Text -> Preferences -> Browse Packages… ）。

パッケージ ディレクトリ

これはデータ ディレクトリの下にある重要なディレクトリです。プログラミングおよびマークアップ言語に関するすべてのサポートはここに保管されます。このディレクトリは、メニューから Findle で開くことができます: (Sublime Text -> Preferences -> Browse Packages…)。

この記事では、パッケージ、パッケージ パス、パッケージ フォルダー、またはパッケージ ディレクトリはすべてそれを指します。

ユーザー パッケージ

Packages/User は、カスタム プラグイン、スニペット、マクロを保存するために使用されます。これは、packages フォルダーの下のプライベート領域であると考えてください。個人のプログラムとプラグインの設定はここに保存されます。

Sublime Text は更新されてもコンテンツを変更しません。

Sublime Text はプログラム可能です

Python を使用して API 経由でプラグインを開発できます。 ショートカット キー Ctrl + ` を押すとコンソールが開き、ここで Python スクリプトを実行したり、いくつかのプラグインをインストールしたりできます。

パッケージ、プラグイン、リソース、およびその他の用語

Sublime Text のほぼすべての機能は拡張およびカスタマイズでき、エディターの動作の変更、マクロやスニペットの追加、メニューの拡張などが可能です。エディタ API を使用して複雑なプラグインを作成することもできます。

Sublime Text の柔軟性により、学習する必要がある設定ファイルが多数必要になります。これらの構成ファイルは JSON または XML 形式です。

この記事では、これらの構成ファイルをリソースと呼ぶこともあります。

Sublime Text は、packages フォルダー内のリソースをチェックします。

package は、関連リソースを含むディレクトリを指します。

vi/vim エミュレーション

Vintageous を使用して、Sublime Text を vi/vim サポートにすることができます。

編集

複数のフィールド選択の変更

Sublime Text は、複数のテキストの同時変更をサポートしています:

• 選択テキストを変更すると、エディターはドキュメント内の同じテキストを自動的に入力するよう求めます。
• Cmd + d を押して、次のテキスト セグメントをマーク リストに追加します。現在のテキスト セグメントをスキップする必要がある場合は、Cmd + k を押してから Cmd + d を押します
• ショートカット キー Cmd + u を押すと、現在のテキスト セグメントをマーク リストから削除できます。編集リスト
• ESC キーで編集状態を終了します

行全体を選択します

Cmd + l でカーソルのある行、または現在の選択範囲が存在するすべての行を選択できます。選択範囲を複数の選択範囲に分割し、同時に編集できます

テキスト選択

• Alt + Shift + 対応する場所に次のトークン選択領域を追加します
• Ctrl + Shift + mカーソルが置かれている括弧内のすべてのコンテンツを選択します
• Cmd + Shift + j カーソルのある行を選択します 同じインデントされたコンテンツ

文字の交換

• Ctrl + t 隣接する 2 つの文字を交換します

検索と置換

Sublime Text は Perl 互換正規表現 (PCRE) エンジンの正規表現検索をサポートしています。デフォルトの検索は通常の検索に切り替えるには、検索ボックスの左側にある対応するボタンをクリックする必要があります。ショートカットキーを使って切り替えることもできます。

• Option + Cmd + r で正規表現検索と通常のテキスト検索を切り替えます

単一ファイル内での検索と置換

• Cmd ＋ f打开搜索框
• ESC关闭搜索框
• Option + Cmd + c切换区分大小写
• Option + Cmd + w切换是否完整匹配：time 匹配timeOut或者 time单独单词
• Option + Enter选中全部匹配结果并可同时编辑
• Cmd + g或者Enter查找下一个
• Cmd + Shift + g查找前一个
• Cmd + e选中文本后按此快捷键可直接搜索

替换

• Option + Cmd + f打开替换面板
• Cmd + g或者Enter查找下一个
• Option + Cmd + e替换并查找下一个
• Option + Enter当焦点在替换面版时会选中全部匹配项并处于可编辑状态

多文件搜索

Cmd + Shift + f打开多文件搜索面版

设置多文件搜索范围

在多文件搜索面版的Where栏指定搜索范围，支持以下方式的搜索范围指定：

• unix格式的路径
• 使用通配符排除特定文件symbolic location入：,等

也可以使用逗号结合以上三种格式的范围。

文件导航和文件管理

goto anything文件导航

搜索项目任意文件并导航。可在搜索栏进行过滤，可预览当前选中文件。

• Cmd + p打开文件面版
• Enter打开当前项并关闭导航面版
• ->打开当前项，不关闭导航面版
• ESC关闭导航面版

更多操作：

• Cmd + r搜索当前文件内的symbol，如函数，类，或者markdown的标题；
• Ctrl + g跳转到指定行；

左侧side bar导航

• Cmd + k然后Cmd + b可切换导航关闭状态

项目

Sublime Text将当前打开文件，文件夹当作一个project，将文件夹拖拽到side bar可添加到当前项目。菜单中选择(Project -> Save Project As…)可将相关文件文件夹关联信息保存，下次通过菜单(Project -> open project)可快速打开所有相关文件。

使用snippet添加常用模板

将常用的代码段保存起来, 使用tab在设置好的文本上扩展出来,能提高效率,设置方法:

1. 菜单: Tools –> New Snippet… 自动打开模板
2. 编辑好之后保存在Packages/User目录下即可,文件后缀为.sublime-snippet

<snippet>  <content><![CDATA[Hello, ${1:this} is a ${2:snippet}.]]></content>  <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->  <!-- <tabTrigger>hello</tabTrigger> -->  <!-- Optional: Set a scope to limit where the snippet will trigger -->  <!-- <scope>source.python</scope> --></snippet>

1. content下CDATA包裹的是扩展后的最终文本；
2. tabTrigger是snippet的标识, 在标识后面按tab会用content替换标识；
3. 触发替换的作用域。

例子如下:

<snippet>  <content><![CDATA[@author: 德淸 deqing.qdq@alibaba-inc.com]]></content>  <tabTrigger>author</tabTrigger></snippet>

在author之后按tab键会扩展为@author: 德淸 deqing.qdq@alibaba-inc.com

Sublime Text3基本使用及常用插件介绍

Sublime Text3下载地址：http://www.sublimetext.com/3本文所有操作都是基于Sublime Text3.

这里是一个非常全面的教程。

快捷键列表

• Ctrl + g 跳转到相应的行
• Ctrl + m 在括号起始位置和终止位置之间切换
• Ctrl + Shift + m 选中括号内内容
• Ctrl + Shift + k 删除光标所在行
• Ctrl + x 当光标选中区间时剪切选中区间，否则剪切光标所在行
• Ctrl + Shift + up 向上选择行，并支持同时编辑多行
• Ctrl + Shift + down 向下选择行，并支持同时编辑多行
• Ctrl + l 选择光标所在行

FAQs

1.不支持gbk编码

安装插件ConvertToUTF8,可能需要根据提示安装辅助插件。

2.HTML标签中间的大括号如何自动补全

菜单-> preferences -> Key Bindings - User在json配置文件中添加如下配置。

{ "keys": ["{"], "command": "insert_snippet", "args": {"contents": "{$0}"}}

3.中文输入法不跟随输入位置

答：官方修复之前使用：IMESupport插件。

4.如何为特定文件类型制定语法高亮，如为.handlebar文件设置html高亮

答：菜单中选择：View > Syntax > Open all current extension as... > html这样就可以为自定义后缀名文件使用所需的语法高亮。

Package Control插件管理

Package Control是Sublime Text的包管理器，可以通过它安装2000多个package。安装后的package将自动更新。基本上大部分工具通过自动和手动都可以完成安装。

通过控制台安装Package Control

1.按快捷键Ctrl + `调出控制台；2.在控制台中运行如下代码；

 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)

3.以上代码将创建Package安装目录。并且下载Package Control.sublime-package文件到目录下；4.重启Sublime Text，完成安装。

手动安装Package Control

自动安装的原理其实就是在特定目录为Package Control创建文件夹和配置文件，手动创建所需目录，文件同样可以达到安装的目的：

1. 菜单中选择：Preferences > Browse Packages...；
2. 在打开的资源管理器中向上一个目录，然后进入到Installed Packages/目录；
3. 下载Package Control.sublime-package并复制到Installed Packages/目录下；
4. 重启Sublime Text，完成安装。

卸载已安装的插件

如果是通过package control安装的, 快捷键Cmd + Shift + p打开面板搜索Package Control: Remove Package然后选择需要卸载的插件。

SidebarEnhancements

为左侧sidebar增加功能。

Emmet

Emmet通过简洁的语法描述html内容，提高工作效率。

使用Package Control安装Emmet

1. 快捷键Ctrl + Shift + p然后在控制窗口中输入Package Control: Install Package；
2. 选择Emmet安装，重启Sublime Text完成安装。

快捷键

Tab

在HTML, XML, HAML, CSS, SASS/SCSS, LESS and strings in programming languages (like JavaScript, Python, Ruby etc.)中按Emmet语法写好语句后Tab键即可生成所需的代码。

由于某些语言中Sublime Text默认的Tab行为是作者更期望的，可以在Emmet.sublime-setting文件中设置disable_tab_abbreviations_for_scopes来取消Tab在这些文件类型中的触发。具体方法见官网tab-key-handler

Ctrl + e

默认在大部分自定义后缀名的文件中使用Tab是不能触发Emmet的，但是使用Ctrl + e可以在任意文档中生效，这在编写html模板时非常有用。

Emmet基本语法

emmet-zen-coding-tutorial是个很不错的教程，下面是一些简单的语法规则。

元素

通过元素名生成HTML标签，如div生成

子元素嵌套>

类似CSS子选择器div>ul>li生成。

<div>    <ul>        <li></li>    </ul></div>

兄弟元素+

类似CSS兄弟选择器，+生成兄弟关系的元素div+p+div生成。

<div></div><p></p><div></div>

向上操作符^

Emmet操作符的作用对象是基于当前上下文的，>操作符会让上下文向下转移到深层元素，^操作符可以向上移动上下文，如div+div>p>span+em生成。

<div></div><div>    <p><span></span><em></em></p></div>

通过^操作符修改上下文控制元素div+div>p>span+em^bq生成

<div></div><div>    <p><span></span><em></em></p>    <blockquote></blockquote></div>

多元素操作符*

使用后跟数字，生成对于数量的元素ul>li*5生成。

<ul>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li></ul>

分组操作符()

使用括号分组完成复杂的逻辑div>(div>ul>li*2>a)*2+footer>p生成

<div>    <div>        <ul>            <li><a href=""></a></li>            <li><a href=""></a></li>        </ul>    </div>    <div>        <ul>            <li><a href=""></a></li>            <li><a href=""></a></li>        </ul>    </div>    <footer>        <p></p>    </footer></div>

id和class生成

使用类似css中id和class的语法，可以为元素添加所需属性如div#header+div.cls1.cls2生成。

<div id="header"></div><div class="cls1 cls2"></div>

自定义属性

使用类似CSS中[attr]的语法添加自定义属性td[title="Hello" colspan=3]生成。

<td title="hello" colspan="3"></td>

元素编号$

使用*生成多个元素的时候，可以使用$进行编号ul>li.item$*5生成。

<ul>    <li class="item1"></li>    <li class="item2"></li>    <li class="item3"></li>    <li class="item4"></li>    <li class="item5"></li></ul>

{}添加文本

ul>(li{item $})*3生成。

<ul>    <li>item 1</li>    <li>item 2</li>    <li>item 3</li></ul>

Sublime Text Markdown Preview

sublimetext-markdown-preview是Sublime Text的一个Markdown预览插件，有了它就可以轻松使用Sublime Text编辑Markdown文档了。

使用Package Control安装

1. 如果没有安装过Package Control，先安装；
2. 按快捷键Ctrl + Shift + p打开命令窗口；
3. 在命令窗口中执行Package Control: Install Package；
4. 选择Markdown Preview并进行安装。

手动安装

1. 在菜单中选择Preferences > Browse Packages...；
2. 在弹出的资源管理器中向上一个目录，然后进入到Installed Packages/目录；
3. 下载sublimetext-markdown-preview压缩包到Installed Packages/目录下并重命名为Markdown Preview.sublime-package；
4. 重启Sublime Text.

预览Markdown文件

1. 打开Markdown文件；
2. 快捷键Ctrl + Shift + p，在控制窗口中输入Markdown Preview；
3. 此时有多个选项可选，一般选择Markdown Preview: Preview in Browser；
4. 此时要求选择解析器，任选一个即可；
5. Sublime Text在默认浏览器中打开Markdown解析后的html文件，有时候只是在新选项卡中打开了html文件，可以右键：copy file path,然后到浏览器中访问即可。

sublime-autoprefixer

sublime-autoprefixer根据Can I Use数据库信息为CSS样式添加适当的厂商前缀，也可以自定义需要添加前缀的浏览器版本。

sublime-autoprefixer只对CSS起作用，不处理Sass或者LESS之类的预处理格式。

使用Package Control安装sublime-autoprefixer

1. 快捷键Ctrl + Shift + p然后控制台输入Package Control: Install Package
2. 在弹出窗口中输入Autoprefixer，安装，重启Sublime Text

使用autoprefixer

1. 支持整个css文件添加前缀，也可选中部分cas代码添加前缀；
2. 快捷键Ctrl + Shift + p，输入Autoprefix CSS回车。

使用BracketHighlighter高亮括号配对

高亮括号配对在查找时很方便。

使用Package Control安装BracketHighlighter

1. 如果没有Package Control，先安装；
2. 快捷键Ctrl + Shift + p，在控制窗口中输入Package Control: Install Package；
3. 在控制窗口中输入BracketHighlighter并选择安装；
4. 安装完成。

auto-save自动保存修改

这个插件在1秒没有按键时会自动保存。个人感觉太频繁，可根据需求选择也可以启动sublime text的自动保存功能：

菜单： Sublime Text -> Preferences -> Settings - user

在配置文件中加上： "save_on_focus_lost": true这样当前文档失去焦点时会自动保存。

quoteHTML将HTML拼接为js字符串

作者：德淸文章源自：http://qiudeqing.com/tools/2015/05/31/sublime-text-3.html