SublimeText3のPackage Controlインストール方法やプラグイン設定のメモ

  1. ブログ
  2. Web・プログラミング
本日限定
Amazonタイムセール開催中
セール商品を見に行く
present
本日限定
Amazonタイムセール開催中
セール商品を見に行く
present

Sublimetext3のパッケージコントロールのインストール方法や、テーマやプラグインの導入方法についてまとめます。当記事では、実際に自分が使っている設定や使い方を詳しくご紹介します。

目次

Web制作者のためのSublime Textの教科書 今すぐ最高のエディタを使いこなすプロのノウハウ
Web制作者のためのSublime Textの教科書 今すぐ最高のエディタを使いこなすプロのノウハウ
 クチコミ評価を見る(Amazon)
  Amazonで見る
  楽天市場で見る
  Yahooショッピングで見る
 その他：
カメラのキタムラで探す

SublimeText3ってなに？

Sublimetext3(サブライムテキスト)は、高機能なテキストエディタです。Webのプログラミング業務やブログの記事作成にも活用することができて大変便利なアプリであり、OSはWindowsやMac、Linuxに対応しています。Sublime Textは無料版と有料版がありますが、無料版でも機能は十分にそろっており実用的なアプリです。

SublimeText3は高機能なテキストエディタ
SublimeText3は高機能なテキストエディタ ©

ダウンロードとインストールは下記から行えます。

Sublime Text 3
https://www.sublimetext.com/3

パッケージコントロールのインストール方法

まず始めに行っておきたい下準備は、パッケージコントロール(Package Control)のインストールです。まずはパッケージコントロールについて簡単に説明したいと思います。

Sublimetext3は用途に応じ、パッケージと呼ばれるプラグイン(=外部の拡張機能)を好きなように追加する事ができます。雰囲気としてはスマホのアプリと同じ印象です。

パッケージはPackage Controlと呼ばれるアプリでインストールやアンインストール(削除)を行うことができます。ただし、Sublimetext3の起動時には、Package Controlがインストールされていません。

まずはPackage Controlをインストールしてみましょう。

Package Control
https://packagecontrol.io/installation

インストール手順は、上記のコードを貼り付ける方法でも良いのですが、エラーが発生して失敗する事が結構あります。そこで「Manual」に説明されている方法が最も確実でオススメです。手順を引用すると下記の流れになります。

  1. Package Control.sublime-packageをダウンロードする
  2. Sublimetext3を起動する
  3. Sublimetext3のメニューSublime Text > Preferences > Browse Packagesでフォルダを開く
  4. 開かれたフォルダにPackage Control.sublime-packageを貼り付ける
  5. Sublimetext3を再起動する

これで、次回以降はSublime textでPackage Controlを使ってプラグインやテーマと呼ばれる画面の設定を手軽にインストールする事ができます。

テーマのインストール方法

Sublime text 3には様々なテーマが用意されています。好みに併せて好きな物をインストールしてみましょう。有名なテーマは以下のようなものがあります。

コリス
コードがはっきりと見やすくて、使いやすい Sublime Text 3 のテーマのまとめ

上記の中で、私も3年ほど愛用しているのがマテリアルデザインのテーマ(Material Theme)です。おしゃれで落ち着きのある色調なので気に入ってます。

Github
equinusocio/material-theme
Qiita
いま話題のSublime Textのテーマやおすすめの設定・使用例を醸す
Qiitaでは、アプリのアイコンまでマテリアルデザインに変更できる方法が紹介されている

テーマ Material Themeをインストールする

それではMaterial ThemeをSublime text 3に入れて見ましょう。流れはこちらです。

  1. Sublime text 3を起動
  2. Command(またはCtrl)+Shift+PでPackage Controlを起動
  3. Installと入力しPackage Control: Install Packageを選択
  4. Materialと入力しMaterial Themeを選択

上記の手順でテーマがインストールされます。インストール中はSublime text 3のウインドウ下部で何かがウネウネします(笑)

インストール後は、以下の手順でテーマを有効にします。

  1. Command(またはCtrl)+Shift+PでPackage Controlを起動
  2. Materialと入力し、Material Theme: Activate themeを選択
  3. Material Themeを選択

上記の方法はcommand+,からも変更する事ができます。表示されるPreferences.sublime-settingsにて以下のように記述します。

Preferences.sublime-settings
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
{
  "always_show_minimap_viewport": true,
  "auto_indent": true,
  "auto_match_enabled": true,
  "color_scheme": "Packages/Material Theme/schemes/Material-Theme.tmTheme",
  "enable_hexadecimal_encoding": true,
  "font_size": 12,
  "highlight_line": true,
  "ignored_packages":[],
  "indent_subsequent_lines": true,
  "indent_to_bracket": false,
  "match_selection": true,
  "match_tags": true,
  "open_files_in_new_window": false,
  "remember_open_files": true,
  "smart_indent": true,
  "tab_completion": false,
  "tab_size": 4,
  "theme": "Material-Theme.sublime-theme",
  "translate_tabs_to_spaces": true,
  "trim_automatic_white_space": false,
  "use_tab_stops": true,
  "word_wrap": true,
  "show_definitions": false
}

これでテーマ変更が完了しました！

パッケージ(プラグイン)のインストールとアンインストール

前半でご説明した通り、Sublimetext3では、好きな機能をインストールやアンインストール(削除)することができます。

インストールする方法

  1. Sublime text 3を起動
  2. Command(またはCtrl)+Shift+PでPackage Controlを起動
  3. Installと入力しPackage Control: Install Packageを選択
  4. 欲しいパッケージの名前を入力し、表示内容を選択

アンインストールする方法

  1. Sublime text 3を起動
  2. Command(またはCtrl)+Shift+PでPackage Controlを起動
  3. Removeと入力しPackage Control: Remove Packageを選択
  4. 削除したいパッケージの名前を入力し、表示内容を選択

おすすめのSublimeTextプラグイン

ここでは、自身が使っているパッケージ(プラグイン)の一部をご紹介したいと思います。

まず始めに。ショートカットの登録方法

プラグインの機能を呼び出す際に、メニューの奥深くへ入ってようやく呼び出せる…といったケースが結構あります。こういったケースでは、予め以下のようにショートカットを登録しておくのがオススメです。

Sublime Text > Preferences > Key Bindingsで表示されるDefault.sublime-keymapに下記を追記します。

Default.sublime-keymap
1
2
3
{
    { "keys": ["super+shift+c"], "command": "(プラグイン名を指定)" }
}

これから紹介するプラグインでもショートカット登録が必要だと感じるケースがある場合には、手順を併せて解説していきたいと思います。

また、ショートカットはその他の登録内容と重複してしまうケースがあります。そこで以下のパッケージをインストールしておく事をオススメします。

findkeyConflicts

プラグインを増やすと問題になる、ショートカットの衝突を把握するためのパッケージです。使い方は以下の流れです。

  1. Command(またはCtrl)+Shift+PでPackage Controlを起動
  2. Filndと入力し、FindKeyConflicts: All Conflictsを選択
  3. 競合するショートカットが表示されるので設定を見直す

文字数をカウント表示できるWordCount

テキストエディタで選択中の文字数を数えて、文字数を画面下部に情報を表示してくれるパッケージです。ブログを書く時に重宝します。

WordCountは選択中の文字数をカウントしてくれる
WordCountは選択中の文字数をカウントしてくれる ©

WordCountについては、別の記事でも解説しています。

文字数をカウントする方法のメモ。MacやWindowsのテキストエディットは使わない

インストール方法は前述の説明と同じですが、以下の流れとなります。

  1. Sublime text 3を起動
  2. Command(またはCtrl)+Shift+PでPackage Controlを起動
  3. Installと入力しPackage Control: Install Packageを選択
  4. WordCと入力しWordCountを選択
  5. Sublime text 3を再起動

日本語の文字化けを防ぐ2つのプラグイン

SublimeText3では残念ながら、Shift-JISやEUCなどのファイルは上手く開けません。開くと文字化けを起こしてしまいます。

SublimeText3にShitf-JISやEUCなどの日本語エンコーディングに対応させるには、ConvertToUTFとCodecs33をインストールします。インストール方法は下記で解説していますので、ご覧ください。

SublimeText3で日本語の文字化けの対処方法について

AutoFileName

画像や外部スクリプトなどのファイルの場所を記述する際に、入力の補助を行ってくれるプラグインです。

All Autocomplete

デフォルトの自動補完機能を拡張するパッケージです。入れておいて損は無いと思います。

BracketHighlighter

プログラミングで度々使う、括弧の中の範囲を分かりやすく表示してくれるプラグインです。ブラケットとは括弧ことです。

注意点としては、括弧で囲む文字数の範囲が大きい場合などにうまく表示してくれない事です。これは、ブラケットのサーチを続けることで負荷が大きくなることを防ぐために、デフォルトでは最大で5000文字以上は対応するブラケットのサーチを行わないようになっているためです。5000文字以上で使用する場合には設定変更が必要です。

  1. Command(またはCtrl)+Shift+PでPackage Controlを起動
  2. Bracketと入力し、BracketHighlighter: Settingsを選択
  3. bh_core.sublime-settingsを編集
bh_core.sublime-settings
1
2
3
4
5
6
7
{
  "search_threshold": 50000 // サーチ範囲を5万文字（10倍）に広げる
}
または
{
  "ignore_threshold": true // サーチ範囲を限定しない。コード量に応じてSublime textのパフォーマンスが落ちる事があります。
}

Alignment

プログラミングで変数や連想配列を定義する際にコードを綺麗に整形してくれるプラグインです。揃えたいコードを選択して

  • Command+Control+A (mac)
  • Ctrl+Alt+A (windows)

で整形する事ができます。

注意点として、Alignmentは基本的に=を目印に揃えるので、例えばJavaScriptのオブジェクトの定義に利用する:には対応していない点です。変更するには下記の手順が必要です。

  1. Command(またはCtrl)+Shift+PでPackage Controlを起動
  2. Alignmentと入力し、Alignment File Settings - Userを選択
  3. Base File.sublime-settingsを編集
Base File.sublime-settings
1
2
3
{
  "alignment_chars": ["=",":"],
}

AlignTab

イコール=やカンマ,やコロン:などを基準にしてコードを綺麗に整形できるパッケージです。

  • 右クリックのコンテキストメニューから呼び出せるAlign By
  • パッケージコントロールのAlignTabで呼び出し、整列基準を正規表現ライクに定義

のような2通りの方法で呼び出して使います。かなり詳細な整形ルールを定義できるのですが、詳しい使い方は以下が参考になります。

Github
Sublime Textでハッシュや配列、引数を整列
整形ルールの記述方法やショートカットから呼び出す方法が詳しく解説されている

簡単な使い方を説明すると、例えば下記の文字列を整列したいとします。

1
2
3
a,b,c
a1 , b1 , c1
a2,  b2,  c2
  1. Command(またはCtrl)+Shift+PでPackage Controlを起動
  2. AlignTabを選択し
  3. Align By RegEx:で,|を入力

と手順を踏んでコードを整形させると、下記のような結果になります。

1
2
3
a  , b  , c
a1 , b1 , c1
a2 , b2 , c2

Color Highlighter

CSSのColorプロパティなどで使われる16進数のコードを選択すると、コードの反転色で視覚的に色を確認できるプラグインです。様子は下記を見ると参考になります。

Github
ColorHighlighter

また、設定で以下のように設定すると、クリックしなくても色指定部分の文字の背景色で確認できるようになります。

Preferences.sublime-settings
1
2
3
{
    "ha_style": "Filled",
}

Color​Picker

OS純正のカラーピッカーを開き、色の16進数コードを手軽に取得できるパッケージです。巷では、Ctrl+Shift+Cで呼び出せるという情報があるのですが、予めショートカット登録しておかないと呼び出せないようです。

Sublime Text > Preferences > Key Bindingsで表示されるDefault.sublime-keymapに下記のようにショートカットを登録しておきます。

Default.sublime-keymap
1
2
3
{
    { "keys": ["super+shift+c"], "command": "color_pick" }
}

Can I Use

CSSのプロパティーなどを右クリックし、コンテキストメニューから「Can I Use」を選択すると、Can I use…からブラウザの対応状況を素早く調べることができます。

TrailingSpaces

末尾のスペースをハイライトして視認性を上げつつ、保存するときに削除してくれるパッケージです。全角スペースのハイライトは別の設定作業が必要になります。

Preferences > Package Setting > Trailing Spaces > Setting Userからtrailing_spaces.sublime-settingsを以下のように編集します。

trailing_spaces.sublime-settings
1
{"trailing_spaces_regexp": "　|[ \t]+",}

SublimeLinter-jshint

JavaScriptの記述を検証してくれます。使用前に以下のnpm(node.js)パッケージをインストールしておく必要があります。

bash
1
$ sudo npm install -g jshint

SublimeLinter-csslint

cssの記述を検証してくれます。使用前に以下のnpm(node.js)パッケージをインストールしておく必要があります。

bash
1
$ sudo npm install -g csslint

SublimeLinter-contrib-scss-lint

SCSSの記述を検証してくれます。

使用前に以下のgem(Ruby)パッケージをインストールしておく必要があります。

bash
1
$ sudo gem install scss-lint

フォントを見やすいものに変更

SublimeText3は自由にフォントを変更することができます。

SublimeText3で使用するフォントを源ノ角ゴシック(Source Han Code JP)に変更します。まずは下記の中にあるダウンロードの項目からフォントファイルをダウンロードし、フォントをインストールしておきます。

Github
adobe-fonts/source-han-code-jp

次に、command+,から表示されるPreferences.sublime-settingsにて以下ように記述します。

Preferences.sublime-settings
1
2
3
{
  "font_face": "Source Han Code JP",
}

ちなみに、WindowsではConsolasがオススメで、Mac OSXで源ノ角ゴシックがおすすめです。異なるOSX環境で設定を共有する事も可能ですので、詳しくは当記事の続きをご覧ください。

F7キー押しのカタカタの変換ができるようにする

通常のSublimeText3の設定ではF7キーのショートカットが使えないケースがあります。こういった場合にはMacOSXでは設定 > キーボード > F1、F2などのすべてのキーを標準ファンクションキーとして使用をチェックします。

また、SublimeText3を起動後にSublime Text > Preferences > Key Bindingsをクリックし、開いた設定の中からF7の設定をコメントアウトする。

また、ファイルの上書きができないので/Users/あなたのOS Xユーザ名/Library/Application Support/Sublime Text 3/Package/Defaultディレクトリを作成します。作成したディレクトリにDefault (OSX).sublime-keymapとして保存する事で解決できます。

Dropboxで設定を共有して複数のPCで使う

SublimeText3の設定をバックアップしたり、複数のPCで共有する事ができます。設定というのはテーマや利用しているプラグインの事です。設定を共有するにはDropboxやGoogle Driveなどのオンラインストレージを活用します。この方法はwindows、Mac OSXなどのマルチプラットフォームで利用できます。

例えば、DropboxにSublimeの設定を共有するには、

  1. Dropbox上にSublimeというディレクトリを作成
  2. SublimeText3のUserフォルダやDefaultフォルダをDropboxへ移動
  3. SublimeText3のフォルダにDropboxのフォルダをシンボリックリンクとして貼っておく

という手順で運用できます。簡単に説明すると、設定データ本体はDropboxに置いておき、シンボリックリンクをローカルデータのSublimeTextのディレクトリに配置しておきます。

SublimeText3の共有するフォルダはSublime Text > Preferences > Browse Packagesで開いた

  • Packages/User
  • Packages/User (OS Settings)
  • Packages/Default

の3つが共有・バックアップの対象となります。

Packages/User (OS Settings)ディレクトリには、OSごとに異なる設定を保存・共有しておきたい時に使います。例えば以下はOSXのSublimeText3では源ノ角ゴシック(SourceHanCodeJP)というフォントを利用し、WindowsではConsolasを使う例です。

まず始めにPackages/User (OS Settings)ディレクトリにPreferences (OSX).sublime-settingsを用意します。

Preferences (OSX).sublime-settings
1
2
3
4
5
{
  "font_face": "SourceHanCodeJP-Normal",
  "font_size": 12,
  "word_wrap": false
}

続いてPackages/User (OS Settings)ディレクトリにPreferences (Windows).sublime-settingsを用意します。

Preferences (Windows).sublime-settings
1
2
3
4
{
  "font_face": "Consolas",
  "font_size": 10
}

その他の情報については以下が参考になります。

Qiita
Sublime Text2,3のDropbox, Gitを使った同期の方法
(引用)同期させる際にはPackages/, Installed Packages/をそのまま同期させるべきではない。パッケージによってはOSごとに異なるバージョンをインストールすることがあるからだ。

SublimeText3のキーボードショートカット

SublimeTextのショートカットはこちらが参考になります。

JOBTECH.JP
Sublime Text 3 の便利ショートカットキー
Qiita
SublimeText ショートカットキー

タブサイズとタブの設定

コーディングをしているとtab入力時のタブの振る舞いが気になる時がありました。そんな時は、Sublime Text > Preferences > SettingsでPreferences.sublime-settings - User設定を変更しておきます。

Preferences.sublime-settings
1
2
3
4
{
    "tab_size": 4,
    "translate_tabs_to_spaces": true,
}

tab_sizeはタブ入力時の空白文字数です。またtranslate_tabs_to_spacesはタブ入力時にスペースを使うか否かを設定する事ができます。

SublimeText3がフリーズを起こす時の対処法

インストールされているプラグインやデフォルトの機能が原因でSublimeTextがフリーズを起こすことがあります。そんな時はフリーズが起こるタイミングを調べて、関連しそうなブラグインを削除してみましょう。

プラグインの削除方法はプラグインのアンインストール方法をご覧ください。

Show Definitionがフリーズを起こす

私が過去に経験したフリーズでは「Show Definition」という機能が原因でSublimeText3が固まってしまうというケースでした。
Show Definitionは記述したコードの中のクラス等にマウスオンすると、定義元のファイルや位置を表示してくれるリンク・ジャンプ機能です。

この場合ユーザー設定で機能を無効にすると、処理が軽快になりました。Sublime Text > Preferences > SettingsでPreferences.sublime-settings - Userの設定情報を以下のように変更しておきます。

Preferences.sublime-settings
1
2
3
{
    "show_definitions": false
}
UXの時代 IoTとシェアリングは産業をどう変えるのか
UXの時代 IoTとシェアリングは産業をどう変えるのか
 クチコミ評価を見る(Amazon)
  Amazonで見る
  楽天市場で見る
  Yahooショッピングで見る
 その他：
カメラのキタムラで探す
スポンサーリンク