Sublime Text3の導入から基本的な設定まで

アプリ
この記事は約5分で読めます。

Sublime Text3を使い始めてから2週間くらい経ちました。

日本語との相性がイマイチなのが若干悩ましいトコですが、それを差し引いても余りある高機能が満載です。

ライセンスを購入しなくても機能制限なく使えるのでまだ購入してないものの、一度ライセンスを購入してしまえばWindowsとMacどちらでも使えるのが魅力的なので近々購入しようと思ってます。

このSublime Text3はインストール後の各種設定、パッケージの追加等で使い勝手が飛躍的に増します。

ただ、いろいろ追加していくうちに何をどこまで設定したか自分でもわからなくなりつつあるので、

  • これまでに私がやったこと
  • 参考にしたサイト

を忘備録的にまとめていこうと思います。

インストール~基本的なパッケージの追加

この辺を参考に次のパッケージをインストール

  • Package Control ( パッケージの管理を簡単にするためのパッケージ)※必須
  • AutoFileName (imgタグやcssなどでパスを入力する時にファイル名を補完)
  • Bracket Highlight (括弧のペアをハイライト)
  • ConvertToUTF8 (いろんな文字コードに対応)
  • Emmet (略称でHTMLやCSSをらくらく記述)
  • Side Bar Enhancements (サイドバーを強化)
  • SublimeCodeIntel (コード補完を自動で表示)
  • WordPress (Wordpressのコード補完)

Windowsの方にはコレも追加

  • IMESupport

テーマのインストール

見た目をカッコよく機能的にするために好みのテーマをインストール

  • Nexus

このテーマは

  • アクティブなタブがわかりやすい
  • 変更されたファイルがわかりやすい
  • サイドバーも統一感がある

のでお気に入りです。

ただ、カラースキームを変更するとなぜかサイドバーのフォルダアイコンが被ってしまうので、Preference → Browse Package… でパッケージがインストールされているフォルダを開き、Userフォルダの下に

  • Nexus.sublime-theme

というファイルを作成し、以下のコードを記述して保存後再起動。

[
{
"class": "icon_file_type",
"content_margin": [0,0]
},
{
"class": "icon_folder",
"content_margin": [0,0]
},
{
"class": "icon_folder_loading",
"content_margin": [0,0]
},
]

(参考にしたサイトが見つからず…)

全角スペースをハイライト表示

  • Trailing Spaces パッケージをインストール

Preferences → Package Settings → Trailing Spaces → Setting – Userに次のコードを追加

{
"trailing_spaces_regexp": " |[ \t]+", //全角スペースを正規表現に追加
"trailing_spaces_highlight_color" : "comment" //コメントの色でハイライト
}

参考サイト:[tips][Sublime Text] Sublime Text 3をインストールしたらまずやること

ここまでを踏まえた基本設定

設定はPreferences → Setting – User に記述する。

{
"color_scheme": "Packages/Monokai Extended/Monokai Extended Bright.tmTheme", //カラースキーム
"draw_white_space": "all", //空白やタブを表示
"font_size": 12, //フォントサイズ
"highlight_line": true, //カーソル行をハイライト
"open_files_in_new_window": false, //ファイルを新しいウィンドウで開かない
"show_encoding": true, //ステータスバーに文字コードを表示
"theme": "Nexus.sublime-theme", //テーマ
"word_separators": "./\\()\"'-:,.;<>~!@#$%^&*|+=[]{}`~?。、 ()「」", //単語の区切り文字
"word_wrap": true //自動改行
}

word_separatorsで機能する単語区切りへの移動方法

WindowsMac
Ctrl + ←→alt + ←→

コメント

タイトルとURLをコピーしました