すたらブログ

文系Webプログラマの備忘録

Sublime Text3に乗り換えました

  • 最終更新:

目次


SublimeText3を選ぶ理由

  • 他のエディタと比べて起動が速く、メモリ消費も少ない。
  • 複数行を検索したり、フォルダ内の全てのファイルを対象にして検索したり、便利な機能を手軽に利用できる。

関連記事: Atom 1.7の評価
関連記事: Brackets 1.5の評価


入手

https://www.sublimetext.com/3


パッケージ

私が使っている便利なパッケージ(拡張機能)を紹介します。

  • Package Control
    まずはじめに、パッケージ管理のためのパッケージを導入します。 リンク先のページのコードをコピーして、エディタでCtrl+`を押して、現れた入力欄にペーストしてEnterを押すだけです。 f:id:sutara_lumpur:20170622135256p:plain
    以降のパッケージは全てこれを使って追加します。

基本機能

  • itg.flat
    エディタのUIのテーマです。コードの色付けのテーマも付属しています。
    デフォルトのテーマではサイドバーは白地で、エディタ部分の黒地と正反対で目がチカチカします。
    それで別のテーマを探したのですが、今のところこれが気に入っています。

  • IMESupport
    IMEのインライン入力が正しく行われます。
    Google日本語入力もMicrosoftIME(Windows10)も、これで解決します。

  • ConvertToUTF8
    UTF-8以外の文字コードのファイルも文字化けせず表示してくれます。

  • Smart Delete
    行末でdeleteしたとき、繰り上がってきた次の行の先頭の空白文字をいっぺんに削除してくれます。

  • Markdown Preview
    マークダウン形式のファイルをブラウザでHTMLとしてプレビューできます。GFMにも対応しています。
    参照: sublime text で githubのMarkdown記法を使う - Qiita hatena bookmark

  • MarkdownTOC
    マークダウン形式のファイルに目次を自動で挿入してくれます。

  • CSScomb
    CSSをルールに沿って整形してくれます。 (要Node.js, csscomb)
    関連記事: Windows: CSScombの使い方

シンタックスハイライト

文法チェック(Lint)

参照: Sublime Text3で構文エラーをチェックするプラグインが超絶便利 | 株式会社LIG


各パッケージの設定

Markdown Preview

Ctrl + Bの動作を「HTMLファイルの作成」ではなく「ブラウザで表示」に変更します。
なお、私はHTMLファイルをテキストエディタで開くよう関連付けているので、"browser"ChromeのEXEファイルへのパスにしています。

Preferences > Package Settings > Markdown Preview > Settings - User

{
    // プレビューを表示するブラウザを指定する
    "browser": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe",

    // GFMのルールで変換する
    "parser": "github",

    // GFMでパースする場合に必要
    // GitHubのSetting > Personal access tokens で作成したものを貼り付ける
    "github_oauth_token": "40文字のトークン",

    // Ctrl+Bでブラウザに表示する
    "build_action": "browser",

    // シンタックスハイライトを有効にする
    "enable_highlight": true,

    // 末尾に2連スペースがなくても改行する
    "github_mode": "gfm",

    // ブラウザのF5キーでリロードを可能にする
    // ただし、ファイルの保存に少し時間がかかる
    "enable_autoreload": true
}

MarkdownTOC

Preferences > Package Settings > MarkdownTOC > Settings - User

{
    "default_autoanchor": true, // 自動で目次の見出し文を作る
    "default_autolink": true, // 目次にリンクをつける
    "default_bracket": "round", // 目次のリンクはGitHub式とする
    "default_depth": 1, // <h2>以上を目次にする
    "default_style": "ordered", // 目次に番号をつける
    "default_uri_encoding": false, // URIエンコードはしない
}

CSScomb

CSSLintに合格するようにCSSプロパティ名はアルファベット順に並べるため、sort-orderの配列の中身は空にしています。

Preferences > Package Settings > CSScomb > Settings - User

{
    "config": {
        "remove-empty-rulesets": true,
        "always-semicolon": true,
        "color-case": "lower",
        "block-indent": "  ",
        "color-shorthand": true,
        "element-case": "lower",
        "eof-newline": true,
        "leading-zero": true,
        "quotes": "single",
        "sort-order-fallback": "abc",
        "space-before-colon": "",
        "space-after-colon": " ",
        "space-before-combinator": " ",
        "space-after-combinator": " ",
        "space-between-declarations": "\n",
        "space-before-opening-brace": " ",
        "space-after-opening-brace": "\n",
        "space-after-selector-delimiter": "\n",
        "space-before-selector-delimiter": "",
        "space-before-closing-brace": "\n",
        "strip-spaces": true,
        "tab-size": true,
        "unitless-zero": true,
        "vendor-prefix-align": true,
        "sort-order": []
    }
}

環境設定

私は以下の設定にしています。

Preferences > Settings

{
    // テーマ「itg.flat」を適用する
    "theme": "itg.flat.dark.sublime-theme",
    "color_scheme": "Packages/Theme - itg.flat/itg.dark.tmTheme",

    // 改行コードをLFに
    "default_line_ending": "unix",

    // 空白文字をすべて表示する
    "draw_white_space": "all",

    // コードの折りたたみは使わない
    "fold_buttons": false,

    "font_options":
    [
        // 太字を禁止(理由は後述)
        "no_bold",

        // 個人的には、フォントは初期状態のままで下記の設定を加えるのが一番読みやすい
        "directwrite"
    ],

    // 文字サイズは偶数にすること(後述)
    "font_size": 12,

    // 現在行を強調表示
    "highlight_line": true,

    "ignored_packages": ["Vintage"],

    // 行の上下に余白を入れる
    "line_padding_bottom": 1,
    "line_padding_top": 1,

    // 1行の範囲として100文字目に基準線を引く
    "rulers": [100],

    // ファイル横断検索の際、下記のフォルダは除外する
    "folder_exclude_patterns": [
        ".svn", ".git", ".hg", "CVS", // デフォルトの除外設定
        "vendor", // 外部ライブラリ (Composer, bowerなど)
        "cache", "log", "logs", // キャッシュやログなど
        "storage", // Laravelのキャッシュ用フォルダ
        "coverage" // カバレッジの計測結果
    ],

    // ファイル横断検索の際、下記のファイルは除外する
    "file_exclude_patterns": ["*.pyc", "*.pyo", "*.exe", "*.dll", "*.obj","*.o", "*.a", "*.lib", "*.so", "*.dylib", "*.ncb", "*.sdf", "*.suo", "*.pdb", "*.idb", ".DS_Store", "*.class", "*.psd", "*.db", "*.sublime-workspace", "*.jpg", "*.jpeg", "*.png", "*.gif", "*.ttf", "*.tga", "*.dds", "*.ico", "*.eot", "*.pdf", "*.swf", "*.jar", "*.zip", "*.odt", "*.ods", "*.docx", "*.xlsx"],

    // 最終行を超えてスクロールしないようにする
    "scroll_past_end": false,

    // 現在の改行コードをステータスバーに表示する
    "show_line_endings": true,

    // インデントはスペース2つ分、タブはスペースに変換する
    "tab_size": 2,
    "translate_tabs_to_spaces": true,

    // コードを右端で折り返す
    "word_wrap": true
}

太字を禁止する理由

太字の日本語文字列にカーソルを合わせた時、右に行くほどカーソルの位置がずれてしまい、どの文字にカーソルがあるのかがわかりづらいです。
下の画像はどちらも右端にカーソルを置いていますが、太字の日本語の場合は大きく左にずれています。

文字サイズを偶数にする理由

IMESupportでインライン入力を有効にしている場合、文字サイズが2の倍数でないと入力中の文字がすべて表示されない場合があり、見づらいです。
下記では様々な文字サイズで「さいたさいたさくらがさいた」と入力しています。
結果は一目瞭然ですね。

“font_size”:12

“font_size”: 13

“font_size”: 14

“font_size”: 15

ファイル横断検索での除外フォルダの指定

初期設定ではバージョン管理システムの関連フォルダだけが指定されていますが、これにvendorなどを追加しています。
ただし、除外されたファイルやフォルダは、サイドバーのフォルダの一覧に表示されくなってしまうので注意してください。

なお、一時的に除外フォルダを指定したい場合は下記のようにします。
ファイル区切り文字はWindowsでもスラッシュ(/)なので注意してください。

C:\xampp\htdocs\foo-project,-*/foo-folder/*,-*/bar-folder/*

言語(ファイルタイプ)ごとのインデント幅

デフォルトではスペース2つ分に設定していますが、JSONMarkdown、ApacheConfだけはスペース4つ分にしたいです。
そこで、下記の手順を3つのファイルタイプそれぞれに対して行います。

  1. 各言語のファイルを開く
  2. Preferences > Settings - More > Syntax Specific - Userを選ぶ
  3. 開いたファイル名が(ファイルタイプ).sublime-settingsとなっていることを確認する
    例: JSON.sublime-settings, Markdown.sublime-settings, ApacheConf.sublime-settings
  4. 下記を記述して保存し、エディタを再起動する
{
    "tab_size": 4,
    "translate_tabs_to_spaces": true
}

シンタックスハイライトの拡張

私のDropboxにはブログ下書き用のマークダウン形式のファイルが常にいくつか入っています。
夜に布団の中でタブレットを使っている時、ふと、その文章を確認・編集したくなることがあります。
Android用のDropboxアプリでは*.txtはそのまま編集できますが、*.mdは一旦タブレット内にエクスポートしなければならず、面倒です。
そこで、下書きを*.md.txtという拡張子にして、タブレットDropboxではテキストファイルとして扱いつつ、PCのSublimeTextではマークダウンとしてシンタックスハイライトしてくれるように拡張します。
その方法は、前章のシンタックスごとの設定ファイルにextensionsの項目を設けるだけです。

(Markdown.sublime-settings)

{
  "extensions":
  [
    "md.txt"
  ],
  "tab_size": 4,
  "translate_tabs_to_spaces": true
}

キーバインド

Ctrl+Tabでタブを切り替えるとき、右側のタブへと順番通りに切り替わるように設定しました。

Preferences > Key Bindings - User

[
    { "keys": ["ctrl+tab"], "command": "next_view" },
    { "keys": ["ctrl+shift+tab"], "command": "prev_view" },
    { "keys": ["ctrl+pagedown"], "command": "next_view_in_stack" },
    { "keys": ["ctrl+pageup"], "command": "prev_view_in_stack" }
]

サイドバーの文字の大きさを変えたい

テーマ「itg.flat」に不満はありませんが、サイドバーの文字が小さすぎるのが気になったので、ここだけを手作業で修正します。

  1. C:\Users\%USERNAME%\AppData\Roaming\Sublime Text 3\Installed Packagesへ移動。
  2. Theme - itg.flat.sublime-packageをコピーする。
  3. C:\Users\%USERNAME%\AppData\Roaming\Sublime Text 3\Packages\Userへ移動。
  4. ペーストする。
  5. 拡張子.sublime-package.zipに変える。
  6. Theme - itg.flat.zipを解凍する。
  7. 解凍したフォルダ内のitg.flat.dark.sublime-themeをエディタで開く。
  8. "class": "sidebar_label"で検索して、"font.size": 14を追加する。
    {
      "class": "sidebar_label",
      "color": [255, 255, 255, 200],
      "shadow_offset": [0, 0],
+     "font.size": 14
    },

メニューから「Package Control」が消えたら

メニューのPreferencesの項目からPackage Controlが消えてしまうことがあります。
その場合は、ユーザー設定(Preferences > Settings - User)のignored_packagesの項目になぜか追加されているPackage Controlの記述を削除すれば、再び有効になります。
ただ、なぜ「Package Control」が無効になってしまうのかの原因は分かりません。

  "ignored_packages":
  [
    "Package Control", // この行を削除する
    "Vintage"
  ],

感想

Sublime Text2ではファイルの改行コードが分からず、また変更もできないようなので3を使うことにしました。
2用の改行コード関連のパッケージで"LineEndings"というものを探しあてたのですが、手動ではなくパッケージ・コントロールでインストールするようにと指示されているものの、そのパッケージ・コントロールで検索しても"LineEndings"が見つかりませんでした。

3ならば設定で"show_line_endings": trueとすれば、下記のようにステータスバーの右側に現在のファイルの改行コードが表示され、クリックして変更することもできます。

(追記 2014-08-01) 2週間ほど経過して、そろそろいいかなと思って購入しました。

f:id:sutara_lumpur:20140801084610p:plain

7,459円…。 秀丸エディタよりも高い!? でも、もう離れられません…。