LoginSignup
22
35

More than 3 years have passed since last update.

@mmm_jp

SublimeText3のメモ

Last updated at Posted at 2016-08-29

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本体の設定をする

{
    // テーマ
    "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

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

Preferences -> Key Bindings - User

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

[
    // 基本操作
    { "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の配布サイトを参照してください。
  • おすすめのテーマ

カラースキームの設定

  • 拡張子は「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のcolour-schemes.zipを解凍し、「Packages\User\」内に配置し、Preferences -> Color Scheme から設定)
    • Monokai Extended(マークダウンのシンタックスハイライトに対応している)

Package一覧

プログラミング効率化

★★☆ All Autocomplete

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

★★☆ AutoFileName

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

★★★ BracketHighlighter

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

★★★ Color Highlighter

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

★★☆ ColorPicker

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

★★☆ DataConverter

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

★★★ DocBlockr

DocBlockコメントを自動で作成

★★☆ Dotfiles Syntax Highlighting

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

★★☆ ApacheConf.tmLanguage

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

★★★ DoxyDoxygen

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

★★★ Evernote

Evernoteを使える

★★★ GotoDocumentation

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

★★★ Gulp

SublimeからGulpを使える

★★★ Inc-Dec-Value

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

★★★ Increment Selection

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

★★★ LineEndings

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

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

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

★★★ Pandoc

PandocをSublimeで使える

★★★ Random Everyting

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

★★★ SFTP

SFTP接続できるようになる

★★★ SublimeCodeIntel

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

★★★ Sublimerge Pro

マージ機能

★★★ SublimeREPL

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

★★★ Terminal

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

★★☆ TrailingSpaces

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

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

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

コード整形

★★☆ Abacus

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

★★★ Alignment

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

★★★ CSScomb

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

★★★ JsFormat

jsのコード整形

★★★ HTMLBeautify

htmlのコード整形

★★★ HTML-CSS-JS Prettify

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

★★☆ Pretty JSON

JSONのコード整形

コード解析

★★★ SublimeLinter

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

★★★ SublimeLinter-html-tidy

  • Packageをインストールする
  • tidyをダウンロード
  • tidy(例 C:\Program Files\tidy2)にパスを通す

★★★ SublimeLinter-csslint

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

★★★ SublimeLinter-jshint

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

★★★ SublimeLinter-eslint

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

★★★ SublimeLinter-php

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

★★★ SublimeLinter-phplint

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

★★★ SublimeLinter-phpcs

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

★★★ SublimeLinter-phpmd

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

マークダウン

★★★ Git​Hub Markdown Snippets

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

★★★ Markdown Extended

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

★★★ Markdown Preview

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

HTML, CSS

★★★ Bootstrap 3 Snippets

Bootstrap3のスニペット

★★★ Can I Use

ファイル右クリックで、Can I Useを参照できる

★★★ Compass

Compassのビルドができる

★★★ CSS Snippets

CSSのスニペット

★★★ Emmet

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

★★★ Hayaku

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

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

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

★★★ HTML5

HTML5のスニペット

★★★ Sass

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

★★★ Sass Build

Sassのビルドができる

★★★ Sass Snippets

Sassのスニペット

JavaScript

★★☆ cdnjs

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

★★★ JavaScript Console

jsのConsole APIのスニペット

★★★ JavaScript Snippets

jsのスニペット

★★★ JavaScript & NodeJS Snippets

jsとnode.jsのスニペット

★★★ JS Snippets

jsのスニペット

★★★ jQuery

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

★★★ jQuery Snippets pack

jQueryのスニペット

★★★ ReactJS

ReactJSのシンタックス

PHP

★★☆ PHP-Twig

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

★★☆ Silex Snippets

Silexのスニペット

★☆☆ Smarty

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

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

<?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 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

Wordpressのスニペット

★★★ Word​Press Developer Resources

ファイル右クリックから、Word​Press Developer Resourcesを参照できる

SQL

★★★ My​SQL Snippets

MySQLのスニペット

★★☆ SQL Beautifier

SQLを整形できる

WebGL, WebAudio

★★★ Web Audio API Autocomplete

WebAudioAPIの入力補完

★★★ OpenGL Shading Language (GLSL)

GLSLのシンタックス

ブラウザプレビュー

★★★ Browser Reflesh

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

★★★ LiveStyle

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

★★★ LiveReload

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

★★★ View In Browser

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

バージョン管理

★★★ Git

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

★★★ GitGutter

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

★★☆ TortoiseSVN

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

Sublimeの機能

★★★ BoundKeys

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

★★★ ConvertToUTF8

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

★★★ EncodingHelper

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

★★★ IMESupport

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

★★★ Package Control

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

★☆☆ Origami

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

★★★ SideBarEnhancements

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

★★☆ SyncedSideBar

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

22
35
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
22
35