SublimeText3のメモ

Windows向けの解説です

# インストールとセッティング

  1. SublimeText3をインストールする(https://www.sublimetext.com/3)
  2. https://packagecontrol.io/installation#st3 の「Package Control.sublime-package」をクリックして、PackageControlをダウンロード。
  3. 2をC:\Users\ユーザー名\AppData\Roaming\Sublime Text 3\Installed Packagesディレクトリに配置する
  4. SublimeTextを再起動する
  5. SublimeTextのコマンドパレット(Ctrl + Shift + P)の、「Package Control: …」からPackageをインストール・無効化・リスト表示などができます。

# Preferences -> Settings - User

Sublime本体の設定をする

```json
{
    // テーマ
    "theme": "Soda Light 3.sublime-theme",
    "soda_classic_tabs": true,
    "soda_folder_icons": true,
    // カラースキーム
    "color_scheme": "Packages/User/SublimeLinter/Monokai Extended (SL).tmTheme",
    // フォントや見た目
    "font_face": "Consolas",
    "font_size": 13,
    "line_padding_top": 5,
    "word_wrap": true,
    "highlight_line": true,
    // インデントとスペース
    "tab_size": 4,
    "translate_tabs_to_spaces": true,
    "draw_white_space": "all",
    "trim_trailing_white_space_on_save": true, // 保存時に行末の半角スペースを削除
    "indent_to_bracket": true,
    // 文字コード
    "default_encoding": "UTF-8",
    "fallback_encoding": "UTF-8",
    "show_encoding": true,
    // 改行コード
    "default_line_ending": "system",
    "show_line_endings": true,
    // 無視するパッケージ
    "ignored_packages":
    [
        "Vintage"
    ]
}
```

▼チームで開発する場合に、統一するべき設定

  - tab_size
  - translate_tabs_to_spaces
  - trim_trailing_white_space_on_save
  - default_encoding
  - default_line_ending

# Preferences -> Settings - Syntax Specific

言語(シンタックス)ごとの設定を行う

HTML.sublime-settings

```json:
{
    // htmlファイルはタブをスペースに変換しない
    "translate_tabs_to_spaces": false
}
```

# Preferences -> Key Bindings - User

Sublimeのキーボードショートカットの設定

```json:
[
    // 基本操作
    { "keys": ["ctrl+pagedown"], "command": "next_view_in_stack" },
    { "keys": ["ctrl+pageup"], "command": "prev_view_in_stack" },
    { "keys": ["ctrl+tab"], "command": "next_view" },
    { "keys": ["ctrl+shift+tab"], "command": "prev_view" },
    { "keys": ["ctrl+up"], "command": "select_lines", "args": {"forward": false} },
    { "keys": ["ctrl+down"], "command": "select_lines", "args": {"forward": true} },
    { "keys": ["ctrl+shift+a"], "command": "expand_selection", "args": {"to": "tag"} },
    // Package: Browser Refresh
    { "keys": ["f5"], "command": "browser_refresh", "args": {
        "auto_save": true,
        "delay": 0.0,
        "activate": true,
        "browsers" : ["chrome"] }},
    // Package: ColorPicker
    { "keys": ["ctrl+shift+c"], "command": "color_picker" },
    // Package: Evernote
    { "keys": ["ctrl+alt+e"], "command": "show_overlay", "args": {"overlay": "command_palette", "text": "Evernote: "} },
    // Package: IncrementSelection
    { "keys": ["ctrl+alt+i"], "command": "increment_selection" },
    // Package: Markdown Preview
    { "keys": ["alt+m"], "command": "markdown_preview", "args": {"target": "browser"} },
    // Package: SFTP
    { "keys": ["ctrl+alt+u","ctrl+alt+y"], "command": "unbound" },
    { "keys": ["ctrl+alt+u","ctrl+alt+n"], "command": "unbound" },
    { "keys": ["ctrl+alt+u","ctrl+alt+o"], "command": "unbound" },
    { "keys": ["ctrl+alt+u","ctrl+alt+e"], "command": "unbound" },
    { "keys": ["ctrl+alt+u","ctrl+alt+d"], "command": "unbound" },
    { "keys": ["ctrl+alt+u","ctrl+alt+b"], "command": "unbound" },
    { "keys": ["ctrl+alt+u","ctrl+alt+c"], "command": "unbound" },
    { "keys": ["ctrl+alt+r","ctrl+alt+s"], "command": "unbound" },
    { "keys": ["ctrl+alt+r","ctrl+alt+b"], "command": "unbound" },
    { "keys": ["ctrl+alt+r","ctrl+alt+n"], "command": "unbound" },
    { "keys": ["ctrl+alt+r","ctrl+alt+e"], "command": "unbound" },
    { "keys": ["ctrl+alt+r","ctrl+alt+d"], "command": "unbound" },
    // Package: SublimeCodeIntel
    { "keys": ["ctrl+alt+space"], "command": "code_intel_auto_complete" },
    // Package: TortoiseSVN
    { "keys": ["alt+u"], "command": "unbound" },
    { "keys": ["alt+c"], "command": "unbound" },
    { "keys": ["alt+r"], "command": "unbound" },
    { "keys": ["alt+l"], "command": "unbound" },
    { "keys": ["alt+d"], "command": "unbound" },
    { "keys": ["ctrl+alt+s","ctrl+alt+u"], "command": "svn_update" },
    { "keys": ["ctrl+alt+s","ctrl+alt+c"], "command": "svn_commit" },
    { "keys": ["ctrl+alt+s","ctrl+alt+r"], "command": "svn_revert" },
    { "keys": ["ctrl+alt+s","ctrl+alt+l"], "command": "svn_log" },
    { "keys": ["ctrl+alt+s","ctrl+alt+d"], "command": "svn_diff" },
    // Package: View In Browser
    { "keys": ["ctrl+alt+v"], "command": "view_in_browser" },
    { "keys": ["ctrl+alt+v","ctrl+alt+f"], "command": "view_in_browser", "args": { "browser": "firefox" } },
    { "keys": ["ctrl+alt+v","ctrl+alt+c"], "command": "view_in_browser", "args": { "browser": "chrome" } },
    { "keys": ["ctrl+alt+v","ctrl+alt+i"], "command": "view_in_browser", "args": { "browser": "iexplore" } },
    { "keys": ["ctrl+alt+v","ctrl+alt+s"], "command": "view_in_browser", "args": { "browser": "safari" } }
]
```

# キーボードショートカット

|コマンド                                  |機能|
|:--------------------------------------|:---|
|[ユーザ設定]Ctrl+ Tab                    |次のタブ表示|
|[ユーザ設定]Ctrl + Shift + Tab           |前のタブ表示|
|[ユーザ設定]Ctrl + pagedown              |next_view_in_stack|
|[ユーザ設定]Ctrl + pageup                |prev_view_in_stack|
|Ctrl + Shift+ P                        |コマンドパレット|
|Ctrl + @                               |コンソール|
|Ctrl + P                               |ファイル検索|
|Ctrl + F                               |ファイル内で文字列検索|
|Ctrl + Shift + F                       |複数ファイル間で文字列検索|
|Ctrl + H                               |文字列置換|
|Ctrl + K, Ctrl + B                     |サイドバーをトグル|
|Alt + Shift + 1~4                      |ウィンドウ分割|
|Ctrl + P                               |Goto Anything|
|Ctrl + G                               |Goto Line|
|Ctrl + R                               |Goto Symbol(メソッド等にジャンプ)|
|Ctrl + Shift + R                       |Goto Symbol in Project|
|F12                                    |Goto Definition|
|Ctrl + Shift + M                       |カッコ単位で選択する|
|Ctrl + Shift + J                       |インデント単位で選択する|
|Ctrl + Shift + A                       |タグ単位で選択する|
|Ctrl押しながらクリック                       |マルチカーソル|
|[ユーザ設定]Ctrl + ↑↓                    |マルチカーソル|
|Shift + 右ドラッグ                        |矩形選択|
|範囲選択してCtrl + Shift + L             |split into lines|
|Ctrl + D                               |選択範囲を拡張する|
|Ctrl + Enter                           |次の行に挿入|
|Ctrl + Shift + Enter                   |前の行に挿入|
|Ctrl + K, Ctrl + V                     |履歴からペースト|
|Ctrl + ]                               |→にインデント|
|Ctrl + [                               |←にインデント|
|Alt + .                                |閉じタグ挿入|
|Ctrl + Shift + K                       |行を削除|
|Ctrl + Shift + D                       |行を複製|
|Ctrl + J                               |行の結合|
|Ctrl + Shift + ↑↓                      |行の入れ替え|
|Ctrl + ?                               |コメントアウト|
|Ctrl + Space                           |コードヒントを表示(オートコンプリート)|
|Tab                                    |スニペットの操作|
|Ctrl + Shift + [                       |タグをたたむ|
|Ctrl + Shift + ]                       |タグを展開|
|Ctrl + Alt + ]                         |Package: Abacusで整列|
|[ユーザ設定]F5                           |Package: Browser Refreshで更新|
|/** と入力してEnter                       |Package: DocBlockrでDocコメント入力|
|Ctrl + E                               |Package: Emmet 変換|
|Ctrl + Shift + G                       |Package: Emmet html入力サポート|
|Win + Shift + H                        |Package: GotoDocumentation|
|Tab                                    |Package: Hayakuで変換|
|Alt + ↑↓                               |Package: Inc-Dec-Value|
|Ctrl + Win + ↑↓                        |Package: Inc-Dec-Value|
|Ctrl + Alt + I                         |Package: Increment Selection|
|Ctrl + Alt + U, Ctrl + Alt + F         |Package: SFTP File Upload|
|Ctrl + K, Ctrl + F                     |Package: SQL Beautifier|
|Alt + 左クリック                           |Package: SublimeCodeIntel Jump to definition|
|[ユーザ設定]Ctrl + Alt + Space           |Package: SublimeCodeIntel オートコンプリート|
|Ctrl + Windows+Alt + ↑                 |Package: SublimeCodeIntel Jump to definition|
|Ctrl + Windows+Alt + ←                 |Package: SublimeCodeIntel Go back|
|[ユーザ設定]Ctrl + Alt + S, Ctrl + Alt + U|Package: TortoiseSVN update|
|[ユーザ設定]Ctrl + Alt + S, Ctrl + Alt + C|Package: TortoiseSVN commit|
|[ユーザ設定]Ctrl + Alt + S, Ctrl + Alt + R|Package: TortoiseSVN revert|
|[ユーザ設定]Ctrl + Alt + S, Ctrl + Alt + L|Package: TortoiseSVN log|
|[ユーザ設定]Ctrl + Alt + S, Ctrl + Alt + D|Package: TortoiseSVN diff|

※[ユーザ設定]はPreferences -> Key Bindings - Userで変更したものです

# テーマとカラースキームの設定

テーマはSublimeTextのUI、カラースキームはテキスト色や背景色の設定です。

## テーマの設定

  - 拡張子は「sublime-theme」
  - PackageControlからインストールし、Preferences -> Settings - Userの"theme"で値を設定する。設定する値は各々のPackageの配布サイトを参照してください。
  - おすすめのテーマ 
    - [Material Theme](https://packagecontrol.io/packages/Material%20Theme)(カラースキーム付)
    - [Theme - Flatland](https://packagecontrol.io/packages/Theme%20-%20Flatland)(カラースキーム付)
    - [Theme - Soda](https://packagecontrol.io/packages/Theme%20-%20Soda)
    - [Theme - Spacegray](https://packagecontrol.io/packages/Theme%20-%20Spacegray)(カラースキーム付)

## カラースキームの設定

  - 拡張子は「tmTheme」
  - Preferences -> Settings - Userの"color_scheme"で値を設定する。 
    - 「C:\Users\ユーザー名\AppData\Roaming\Sublime Text 3\」からの相対パスで「Packages\User\hoge.tmTheme」のように記述する。
    - Preferences -> Color Scheme から選択すると値を自動で書き換えてくれる。
    - SublimeLinterを使用している場合は、Preferences -> Color Scheme から選択すると、「Packages\User\SublimeLinter」内にtmThemeファイルが作成される。
  - tmThemeファイルを修正する際、おすすめの色 
    - 背景(background): #222222
    - 行ハイライト(lineHighlight): #003e6c
    - 選択(selection): #003e6c
    - コメント(comment foreground): #aaa89b
  - おすすめのカラースキーム 
    - Monokai Soda([Theme - Soda](https://packagecontrol.io/packages/Theme%20-%20Soda)のcolour-schemes.zipを解凍し、「Packages\User\」内に配置し、Preferences -> Color Scheme から設定)
    - [Monokai Extended](https://packagecontrol.io/packages/Monokai%20Extended)(マークダウンのシンタックスハイライトに対応している)

# Package一覧

## プログラミング効率化

### ★★☆ [All Autocomplete](https://packagecontrol.io/packages/All%20Autocomplete)

コード補完を強化してくれる

### ★★☆ [AutoFileName](https://packagecontrol.io/packages/AutoFileName)

htmlやcssの画像のパスの入力補完をしてくれる

### ★★★ [BracketHighlighter](https://packagecontrol.io/packages/BracketHighlighter)

括弧・タグの強調表示をしたり、修正ができる

### ★★★ [Color Highlighter](https://packagecontrol.io/packages/Color%20Highlighter)

カラーコードを見やすくしてくれる

### ★★☆ [ColorPicker](https://packagecontrol.io/packages/ColorPicker)

カラーピッカーを呼び出せる

### ★★☆ [DataConverter](https://packagecontrol.io/packages/DataConverter)

CSVをYaml,Json,Ruby配列,PHP配列等へ変換できる

### ★★★ [DocBlockr](https://packagecontrol.io/packages/DocBlockr)

DocBlockコメントを自動で作成

### ★★☆ [Dotfiles Syntax Highlighting](https://packagecontrol.io/packages/Dotfiles%20Syntax%20Highlighting)

ドットから始まるファイル向けのシンタックス

### ★★☆ [ApacheConf.tmLanguage](https://packagecontrol.io/packages/ApacheConf.tmLanguage)

.confファイルや、.htaccessファイルのシンタックス

### ★★★ [DoxyDoxygen](https://packagecontrol.io/packages/DoxyDoxygen)

ドキュメンテーションコメントを自動入力&自動更新

### ★★★ [Evernote](https://packagecontrol.io/packages/Evernote)

Evernoteを使える

### ★★★ [GotoDocumentation](https://packagecontrol.io/packages/GotoDocumentation)

関数の上にカーソルがある状態でwin+shift+hで、ブラウザでリファレンスを開く

### ★★★ [Gulp](https://packagecontrol.io/packages/Gulp)

SublimeからGulpを使える

### ★★★ [Inc-Dec-Value](https://packagecontrol.io/packages/Inc-Dec-Value)

数値、カラーコード、日付、曜日、true/false、left/rightの値をAlt+↑↓キーで増減できる

### ★★★ [Increment Selection](https://packagecontrol.io/packages/Increment%20Selection)

複数カーソルで数字を選択すると、いい感じにインクリメントしてくれる(Ctrl+Alt+I)

### ★★★ [LineEndings](https://packagecontrol.io/packages/LineEndings)

ステータスバーに改行コードが表示できる

Preferencess -> Package Setting -> LinEndings -> Settings - Users

```json:
{
    //ステータスバーに改行コードを表示
    "show_line_endings_on_status_bar": true
}
```

### ★★★ [Pandoc](https://packagecontrol.io/packages/Pandoc)

PandocをSublimeで使える

### ★★★ [Random Everyting](https://packagecontrol.io/packages/Random%20Everything)

ランダムな数値や文字列を生成できる

### ★★★ [SFTP](https://packagecontrol.io/packages/SFTP)

SFTP接続できるようになる

### ★★★ [SublimeCodeIntel](https://packagecontrol.io/packages/SublimeCodeIntel)

関数や変数の定義元へジャンプ、コード補完の自動表示、関数入力補完機能など

### ★★★ [Sublimerge Pro](https://packagecontrol.io/packages/Sublimerge%20Pro)

マージ機能

### ★★★ [SublimeREPL](https://packagecontrol.io/packages/SublimeREPL)

Sublime内でインタープリタを使える

### ★★★ [Terminal](https://packagecontrol.io/packages/Terminal)

Sublimeからターミナルを起動できる

### ★★☆ [TrailingSpaces](https://packagecontrol.io/packages/TrailingSpaces)

行末のスペースをハイライト表示できる

Preferencess -> Package Setting -> Trailing Spaces -> Settings - Users

```json:
{
    // 全角スペースをハイライト表示
    "trailing_spaces_regexp": "　|[\t]+",
    // 行末のスペースをコメント色でハイライト表示
    "trailing_spaces_highlight_color" : "comment"
}
```

## コード整形

### ★★☆ [Abacus](https://packagecontrol.io/packages/Abacus)

複数行の整列をしてくれる

### ★★★ [Alignment](https://packagecontrol.io/packages/Alignment)

選択範囲内のコード整形ができる

### ★★★ [CSScomb](https://packagecontrol.io/packages/CSScomb)

CSSのプロパティ順序をソートしてくれる

### ★★★ [JsFormat](https://packagecontrol.io/packages/JsFormat)

jsのコード整形

### ★★★ [HTMLBeautify](https://packagecontrol.io/packages/HTMLBeautify)

htmlのコード整形

### ★★★ [HTML-CSS-JS Prettify](https://packagecontrol.io/packages/HTML-CSS-JS%20Prettify)

html, css, js, jsonのコード整形

### ★★☆ [Pretty JSON](https://packagecontrol.io/packages/Pretty%20JSON)

JSONのコード整形

## コード解析

### ★★★ [SublimeLinter](https://packagecontrol.io/packages/SublimeLinter)

構文エラーをリアルタイムでチェックできる
言語ごとに別途パッケージのインストールが必要になる

### ★★★ [SublimeLinter-html-tidy](https://packagecontrol.io/packages/SublimeLinter-html-tidy)

  - Packageをインストールする
  - [tidy](http://www.paehl.com/open_source/?HTML_Tidy_for_HTML5)をダウンロード
  - tidy(例 C:\Program Files\tidy2)にパスを通す

### ★★★ [SublimeLinter-csslint](https://packagecontrol.io/packages/SublimeLinter-csslint)

  - Packageをインストールする
  - ターミナルで npm install -g csslint を実行しcsslintをインストールする

### ★★★ [SublimeLinter-jshint](https://packagecontrol.io/packages/SublimeLinter-jshint)

  - Packageをインストールする
  - ターミナルで npm install -g jshint を実行しjshintをインストールする

### ★★★ [SublimeLinter-eslint](https://packagecontrol.io/packages/SublimeLinter-eslint)

  - Packageをインストールする
  - ターミナルで npm install -g eslint を実行しeslintをインストールする

### ★★★ [SublimeLinter-php](https://packagecontrol.io/packages/SublimeLinter-php)

  - Packageをインストールする
  - php本体(例 C:\php)にパスを通す

### ★★★ [SublimeLinter-phplint](https://packagecontrol.io/packages/SublimeLinter-phplint)

  - Packageをインストールする
  - ターミナルで npm install -g phplint を実行しphplintをインストールする
  - php本体(例 C:\php)にパスを通す

### ★★★ [SublimeLinter-phpcs](https://packagecontrol.io/packages/SublimeLinter-phpcs)

  - Packageをインストールする
  - composerをインストールした後、ターミナルで composer global require squizlabs/php_codesniffer を実行しphp_codesnifferをインストールする
  - php本体(例 C:\php)にパスを通す

### ★★★ [SublimeLinter-phpmd](https://packagecontrol.io/packages/SublimeLinter-phpmd)

  - Packageをインストールする
  - php本体(例 C:\php)にパスを通す
  - composerをインストールした後、ターミナルで composer global require phpmd/phpmd を実行しphpmdをインストールする

## マークダウン

### ★★★ [Git​Hub Markdown Snippets](https://packagecontrol.io/packages/GitHub%20Markdown%20Snippets)

マークダウンのスニペット

### ★★★ [Markdown Extended](https://packagecontrol.io/packages/Markdown%20Extended)

マークダウンのシンタックスハイライトに対応したカラースキーム

### ★★★ [Markdown Preview](https://packagecontrol.io/packages/Markdown%20Preview)

マークダウンファイルをブラウザプレビューしたり、htmlファイルに変換できる

## HTML, CSS

### ★★★ [Bootstrap 3 Snippets](https://packagecontrol.io/packages/Bootstrap%203%20Snippets)

Bootstrap3のスニペット

### ★★★ [Can I Use](https://packagecontrol.io/packages/Can%20I%20Use)

ファイル右クリックで、[Can I Use](http://caniuse.com/)を参照できる

### ★★★ [Compass](https://packagecontrol.io/packages/Compass)

Compassのビルドができる

### ★★★ [CSS Snippets](https://packagecontrol.io/packages/CSS%20Snippets)

CSSのスニペット

### ★★★ [Emmet](https://packagecontrol.io/packages/Emmet)

HTML, CSSのコーディングを補助してくれるEmmetです

### ★★★ [Hayaku](https://packagecontrol.io/packages/Hayaku)

EmmetよりもファジーなショートコードでCSSコーディングの補助をしてくれる

Preferencess -> Package Setting -> Emmet -> Settings - Users
Emmetの変換はCtrl+Eで、Hayakuの変換はTABで変換するように設定する

```json:
{
    // TABキーでの展開を無効化し、Ctrl+Eでの変換のみ有効にする
    "disable_tab_abbreviations_for_scopes":"css,less,sass,scss,stylus"
}
```

### ★★★ [HTML5](https://packagecontrol.io/packages/HTML5)

HTML5のスニペット

### ★★★ [Sass](https://packagecontrol.io/packages/Sass)

Sassのシンタックスとコード補完

### ★★★ [Sass Build](https://packagecontrol.io/packages/SASS%20Build)

Sassのビルドができる

### ★★★ [Sass Snippets](https://packagecontrol.io/packages/SASS%20Snippets)

Sassのスニペット

## JavaScript

### ★★☆ [cdnjs](https://packagecontrol.io/packages/AndyJS2)

cdnjs.comに登録されたライブラリへのリンクを簡単に挿入できる

### ★★★ [JavaScript Console](https://packagecontrol.io/packages/JavaScript%20Console)

jsのConsole APIのスニペット

### ★★★ [JavaScript Snippets](https://packagecontrol.io/packages/JavaScript%20Snippets)

jsのスニペット

### ★★★ [JavaScript & NodeJS Snippets](https://packagecontrol.io/packages/JavaScript%20%26%20NodeJS%20Snippets)

jsとnode.jsのスニペット

### ★★★ [JS Snippets](https://packagecontrol.io/packages/JS%20Snippets)

jsのスニペット

### ★★★ [jQuery](https://packagecontrol.io/packages/jQuery)

jQueryのシンタックスとスニペット

### ★★★ [jQuery Snippets pack](https://packagecontrol.io/packages/jQuery%20Snippets%20pack)

jQueryのスニペット

### ★★★ [ReactJS](https://packagecontrol.io/packages/ReactJS)

ReactJSのシンタックス

## PHP

### ★★☆ [PHP-Twig](https://packagecontrol.io/packages/PHP-Twig)

Twigのシンタックスとスニペット 
Preferences＞Browse PackagesでPackageがインストールされているディレクトリを開き、「PHP-Twig」というディレクトリを新規作成し、https://github.com/Anomareh/PHP-Twig.tmbundle からDLしたzipを解凍して、「Preferences」「Snippets」「Syntaxes」を格納する。

### ★★☆ [Silex Snippets](https://packagecontrol.io/packages/Silex%20Snippets)

Silexのスニペット

### ★☆☆ [Smarty](https://packagecontrol.io/packages/Smarty)

Smartyのシンタックスとスニペット
EC-CUBE等の一部CMSではデリミタを変更していることがあるので、tmPreferencesファイルを作成して対応する

C:\Users\hoge\AppData\Roaming\Sublime Text 3\Packages\User\smarty\Comments.tmPreferences を作成して、smartyのコメントの設定をEC-CUBE向けに上書き

```xml:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>name</key>
    <string>Comments</string>
    <key>scope</key>
    <string>text.html.smarty</string>
    <key>settings</key>
    <dict>
        <key>shellVariables</key>
        <array>
            <dict>
                <key>name</key>
                <string>TM_COMMENT_START</string>
                <key>value</key>
                <string><![CDATA[<!--{* ]]></string>
            </dict>
            <dict>
                <key>name</key>
                <string>TM_COMMENT_END</string>
                <key>value</key>
                <string><![CDATA[ *}-->]]></string>
            </dict>
        </array>
    </dict>
</dict>
</plist>
```

C:\Users\hoge\AppData\Roaming\Sublime Text 3\Packages\User\smarty\Smarty.tmPreferences を作成して、smartyのデリミタの設定をEC-CUBE向けに上書き

```xml:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>name</key>
    <string>Globals</string>
    <key>scope</key>
    <string></string>
    <key>settings</key>
    <dict>
        <key>shellVariables</key>
        <array>
            <dict>
                <key>name</key>
                <string>SMARTY_LDELIM</string>
                <key>value</key>
                <string><![CDATA[<!--{]]></string>
            </dict>
            <dict>
                <key>name</key>
                <string>SMARTY_RDELIM</string>
                <key>value</key>
                <string><![CDATA[}-->]]></string>
            </dict>
        </array>
    </dict>
</dict>
</plist>
```

### ★★★ [WordPress](https://packagecontrol.io/packages/WordPress)

Wordpressのスニペット

### ★★★ [Word​Press Developer Resources](https://packagecontrol.io/packages/WordPress%20Developer%20Resources)

ファイル右クリックから、[Word​Press Developer Resources](https://developer.wordpress.org/)を参照できる

## SQL

### ★★★ [My​SQL Snippets](https://packagecontrol.io/packages/MySQL%20Snippets)

MySQLのスニペット

### ★★☆ [SQL Beautifier](https://packagecontrol.io/packages/SqlBeautifier)

SQLを整形できる

## WebGL, WebAudio

### ★★★ [Web Audio API Autocomplete](https://packagecontrol.io/packages/Web%20Audio%20API%20Autocomplete)

WebAudioAPIの入力補完

### ★★★ [OpenGL Shading Language (GLSL)](https://packagecontrol.io/packages/OpenGL%20Shading%20Language%20\(GLSL\))

GLSLのシンタックス

## ブラウザプレビュー

### ★★★ [Browser Reflesh](https://packagecontrol.io/packages/Browser%20Refresh)

キーボードショートカットでブラウザの更新が可能になる

### ★★★ [LiveStyle](https://packagecontrol.io/packages/LiveStyle)

SublimeTextとブラウザ間の双方向のリアルタイム編集が可能になる

### ★★★ [LiveReload](https://packagecontrol.io/packages/LiveReload)

ファイルを保存すると、ブラウザを自動更新してくれる

### ★★★ [View In Browser](https://packagecontrol.io/packages/View%20In%20Browser)

Sublimeで開いているファイルをブラウザで開く

## バージョン管理

### ★★★ [Git](https://packagecontrol.io/packages/Git)

コマンドパレットからgitが使える

### ★★★ [GitGutter](https://packagecontrol.io/packages/GitGutter)

前回コミットとの差分を行の左横(ガッター)に表示してくれる

### ★★☆ [TortoiseSVN](https://packagecontrol.io/packages/TortoiseSVN)

TortoiseSVNをSublimeから使えるようになる

## Sublimeの機能

### ★★★ [BoundKeys](https://packagecontrol.io/packages/BoundKeys)

ショートカットキーを一覧表示してくれる。

### ★★★ [ConvertToUTF8](https://packagecontrol.io/packages/ConvertToUTF8)

ファイルオープン時に文字エンコードをUTF8に変換し、セーブした時に元の文字コードでセーブしてくれる。

### ★★★ [EncodingHelper](https://packagecontrol.io/packages/EncodingHelper)

ステータスバーからShift_JISやEUC-JPを含む多種多様な文字コードのファイルをUTF-8に変換して表示することが出来る。

### ★★★ [IMESupport](https://packagecontrol.io/packages/IMESupport)

IMEでインライン変換の入力文字が正しい位置に表示されない問題をある程度解決できる

### ★★★ [Package Control](https://packagecontrol.io/packages/Package%20Control)

Packageインストール作業を楽にするPackage

### ★☆☆ [Origami](https://packagecontrol.io/packages/Origami)

変則的にパネルを変形できる

### ★★★ [SideBarEnhancements](https://packagecontrol.io/packages/SideBarEnhancements)

サイドバーの右クリック時の項目を追加する

### ★★☆ [SyncedSideBar](https://packagecontrol.io/packages/SyncedSideBar)

サイドバーとタブの表示を同期してくれる