読者です 読者をやめる 読者になる 読者になる

すたらブログ

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

Sublime Text3に乗り換えました

目次


パッケージ

  • Package Control
    まずはじめに、パッケージ管理のためのパッケージを適用します。
    以降のパッケージは全てこれを使って追加します。

エディタとしての基本機能

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

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

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

シンタックスハイライト

その他

文法チェック(Lint)

(参考: Sublime Text3で構文エラーをチェックするプラグインが超絶便利 | 株式会社LIG)
(参考: Node.js - npmコマンドの使い方 - Qiita)

  • SublimeLinter
    各言語のLinterの土台となります。
    それぞれに必須のソフトがあり、主にnpmでインストールします。
    それらを入手した後で下記の各Linterを追加し、エディタを再起動してください。

  • SublimeLinter-contrib-htmlhint
    必須: htmlhint
    npm i -g htmlhint
    SublimeLinter公式のレポジトリにある「SublimeLinter-html-tidy」は、使用する「tidy」をnpmとは別経由でインストールしなければならないので敬遠しました。

  • SublimeLinter-csslint
    必須: csslint
    npm i -g csslint

  • SublimeLinter-jshint
    必須: jshint
    npm i -g jshint
    JSLintはチェックが厳しすぎるので敬遠しました。

  • SublimeLinter-php
    必須: パスの通ったPHP
    これはnpmとは無関係です。
    php -lでチェックするようです。
    私はXAMPPを使っているので、環境変数PathC:\xampp\phpを追加しました。
    同じく公式のレポジトリにある「SublimeLinter-phplint」は、phplintのバージョンが2.0以上でなければならないのですが、Windows版のnpmから入手できるphplintの現在のバージョンは1.6.1なので使えませんでした。

(補足) 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",
    "build_action": "browser",
    "github_mode": "gfm",
    "github_oauth_token": "GitHubのSetting > Personal access tokens で作成"
}

(補足) SublimeLinterの設定

あるファイルに対する文法チェックを実行すると、該当する全種のリンターが実行されるようです。
PHPファイルに対してはHTML用の文法チェックも実行されることになります。
そうなると、HTMLを含まず純粋なプログラム処理を行うPHPファイルに対しても「文書宣言が存在しないよ!」などの警告が表示されてしまいます。
これを防ぐため、PHPファイルではHTMLリントを実行しないように例外として設定しておきます。

(Preferences > Package Settings > SublimeLinter > Settings - User)

{
    "user": {
        "linters": {
            "htmlhint": {
                "@disable": false,
                "args": [],
                "excludes": ["*.php"]
            },

(補足) 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": []
    }
}

(補足) MarkdownTOCの設定

Preferences > Package Settings > MarkdownTOC > Settings - User

{
    "default_autolink": true, // リンクさせる
    "default_bracket": "round", // [] ではなく () で囲む
    "default_depth": 3, // <h3>までを対象にして目次を作る
    "default_autoanchor": true, // 見出し側にアンカーを設ける
    "default_style": "ordered" // 目次は順序付きリストとする
}

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

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

    "ignored_packages":
    [
        "Package Control",
        "Vintage"
    ],

環境設定

私は以下の設定に変更して使っています。

Preferences > Settings - User

{
    "color_scheme": "Packages/Monokai Extended/Monokai Extended.tmTheme",

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

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

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

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

        // 個人的には、フォントは初期状態のままで下記の設定を加えるのが一番読みやすい
        "directwrite"
        
    ],
    // 文字サイズは2の倍数にすること(後述)
    "font_size": 14,

    // 現在行を強調表示
    "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"],

    // ファイル横断検索の際、下記のファイルは除外する
    "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"],

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

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

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

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

(補足) 太字を禁止する理由

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

(補足) 文字サイズを2の倍数で指定する理由

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" }
]

感想

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

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

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

f:id:sutara_lumpur:20140801084610p:plain

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


関連記事