Sublime Textプラグインおすすめ8選｜快適にコードを書くための必須ツール

プログラミングや文章を書くとき、軽快で使いやすいテキストエディタを探している方は多いですよね。

「VSCodeは重いから、もっと軽いエディタを使いたい」

「シンプルだけど、必要な機能は揃えたい」

「Sublime Textは使ってるけど、もっと便利にしたい」

そんな方におすすめなのが**Sublime Text（サブライムテキスト）**です。高速起動と動作の軽さで根強い人気があり、多くのプロフェッショナルが愛用しています。

ただ、標準のままだと機能が少なく「もっと便利に使いたい」と感じる人もいるはず。そこで重要になるのがプラグイン（パッケージ）です。

この記事では、初心者から上級者まで役立つ「Sublime Textのおすすめプラグイン」を厳選して紹介します。

Sublime Textプラグインの基礎知識
Package Control（最優先で導入）
2. Emmet（HTML/CSS爆速コーディング）
3. Sidebar Enhancements（サイドバー強化）
4. GitGutter（Git差分の可視化）
5. SublimeLinter（リアルタイムコードチェック）
6. A File Icon（ファイルアイコン表示）
7. Color Highlighter（カラーコード可視化）
8. Material Theme（UI現代化）
プラグイン導入時の注意点とベストプラクティス
効率的なプラグイン活用法
まとめ：Sublime Text を最大限活用しよう
1. 導入の優先順位
2. 成功のコツ

Sublime Textプラグインの基礎知識

そもそもプラグインって何？

プラグインは「機能を追加する小さなプログラム」のことです。Sublime Textでは「パッケージ」と呼ばれることも多いです。

これを入れることで、

コード補完が強化される
見やすいテーマが使える
ファイル操作が楽になる
バージョン管理との連携が向上する

といったメリットがあります。

Package Control の重要性

Sublime Textでは、ほとんどのプラグインを「Package Control（パッケージコントロール）」から簡単に導入できます。

これがいわばプラグインの公式マーケットのようなもので、検索・インストール・アップデート・削除が簡単にできます。

プラグイン導入の基本ステップ

Package Control のインストール
必要なプラグインの検索・インストール
設定の調整
定期的なメンテナンス

プラグインはSublime Textに機能を追加するための仕組みで、Package Controlを使うと管理が簡単になります。

次からはいよいよおすすめプラグインを紹介します。

Package Control（最優先で導入）

概要と重要性

最初に入れるべき必須プラグインです。

これ自体が「プラグインを簡単にインストールするための管理ツール」なので、まずこれを導入してください。

インストール方法

ステップ1：Sublime Textでコンソールを開く

Ctrl + Shift + P（Windows/Linux）または Cmd + Shift + P（Mac）
「Install Package Control」と入力して実行

ステップ2：動作確認

再度 Ctrl + Shift + P を押す
「Package Control: Install Package」が表示されればOK

基本的な使い方

プラグインのインストール：

Ctrl + Shift + P でコマンドパレットを開く
「Package Control: Install Package」を選択
プラグイン名を入力して選択

プラグインの削除：

「Package Control: Remove Package」を選択
削除したいプラグインを選択

なぜ重要なのか

手動インストールが不要
自動アップデート機能
依存関係の自動解決
簡単な削除・無効化

例えば「Emmet」を入れたいと思ったとき、Package Controlがあればすぐ検索してインストールできます。手動でファイルをダウンロードして配置する必要がありません。

Package ControlはSublime Textを使うならまず最初に入れるべき、文字通り必須のツールです。

2. Emmet（HTML/CSS爆速コーディング）

概要

HTMLやCSSを短いコードから一瞬で展開できる強力ツールです。Web制作の効率を劇的に向上させます。

導入方法

Ctrl + Shift + P → 「Package Control: Install Package」
「Emmet」を検索してインストール

実用的な使用例

HTML構造の高速生成

基本的な使い方：

ul>li*5

↓ Tabキーを押すと

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

より複雑な構造：

nav>ul.menu>li.item*3>a{リンク$}

↓ Tabキーを押すと

<nav>
  <ul class="menu">
    <li class="item"><a href="">リンク1</a></li>
    <li class="item"><a href="">リンク2</a></li>
    <li class="item"><a href="">リンク3</a></li>
  </ul>
</nav>

CSS略記展開

m10

↓ Tabキーを押すと

margin: 10px;

bg:url

↓ Tabキーを押すと

background: url();

よく使う Emmet 記法

記法	展開結果
`div.container`	`<div class="container"></div>`
`p#intro`	`<p id="intro"></p>`
`img[src alt]`	`<img src="" alt="">`
`lorem10`	10単語のダミーテキスト
`h1{見出し}`	`<h1>見出し</h1>`

メリット

コーディング速度が10倍以上向上
タイプミスの削減
DRY（Don’t Repeat Yourself）原則の実践
学習コストが低い

フロントエンドのコーディング速度が大幅アップするので、Web制作をするなら必須級のプラグインです。

3. Sidebar Enhancements（サイドバー強化）

概要

ファイルを右クリックしたときのメニューが超充実します。標準のSublime Textでは物足りないファイル操作が大幅に改善されます。

導入方法

Package Control から「SideBarEnhancements」をインストール

追加される機能

標準では不可能だった操作

ファイル/フォルダのコピー・貼り付け
名前を付けて保存
ファイルをゴミ箱に移動
新しいファイル/フォルダの作成
ファイルの完全削除

ブラウザ連携

ブラウザで開く（複数ブラウザ対応）
ローカルサーバーでプレビュー

高度な操作

ファイルパスのコピー
ターミナルで開く
Finder/Explorerで表示

実際の使用場面

プロジェクト管理時：

新しいHTMLファイルを作りたい → 右クリック → 「New File」
CSSファイルをコピーしたい → 右クリック → 「Copy」
ファイルをブラウザで確認 → 右クリック → 「Open in Browser」

整理・リファクタリング時：

不要なファイルをゴミ箱に移動
ファイル名の一括変更
フォルダ構造の整理

カスタマイズ例

設定ファイル（Preferences → Package Settings → Side Bar）：

{
  "default_browser": "chrome",
  "show_encoding": true,
  "show_line_endings": true,
  "confirm_before_deleting": true
}

Sublime Textをファイラーのように使えるようになり、複数ファイルを扱うプロジェクトには絶対に入れておきたいプラグインです。

4. GitGutter（Git差分の可視化）

概要

エディタの左に色付きマークが表示され、Gitでどこを変更したか一目でわかるようになります。バージョン管理との連携が劇的に向上します。

導入方法

Package Control から「GitGutter」をインストール
Gitリポジトリ内で作業している必要があります

視覚的な変更表示

カラーマーキング

緑色の線：新規追加された行
青色の線：変更された行
赤色のマーク：削除された行
オレンジ色の線：変更されたが未ステージの行

詳細な情報表示

行番号の隣に表示される記号：

+：追加
~：変更
-：削除

実用的な機能

差分のジャンプ

ショートカットキー：

Ctrl + Shift + Alt + P：前の変更箇所に移動
Ctrl + Shift + Alt + N：次の変更箇所に移動

ポップアップ表示

変更箇所にカーソルを合わせると、詳細な差分情報がポップアップで表示されます。

ブレームビュー

Ctrl + Shift + Alt + B で、各行の最後のコミット情報を表示できます。

実際の開発での活用

コードレビュー前：

変更箇所を素早く確認
意図しない変更がないかチェック
コミット前の最終確認

デバッグ時：

最近変更した箇所を特定
問題の原因となった変更を追跡
修正前後の比較

チーム開発：

他のメンバーの変更を可視化
マージ時の競合箇所の特定
コードの履歴管理

カスタマイズ設定

設定例（Preferences → Package Settings → GitGutter）：

{
  "enable_hover_diff_popup": true,
  "show_markers_on_untracked_file": true,
  "show_status_bar_text": true,
  "theme": "Packages/GitGutter/themes/Default.gitgutter-theme"
}

バージョン管理をしているなら必須級のプラグインで、コードレビュー前のチェックにも重宝します。

5. SublimeLinter（リアルタイムコードチェック）

概要

JavaScriptやPythonなどの文法ミスをリアルタイムで警告してくれるプラグインです。コードの品質向上とデバッグ時間の短縮に大きく貢献します。

導入方法

基本パッケージのインストール

Package Control から「SublimeLinter」をインストール

言語別リンター

JavaScript：

「SublimeLinter-eslint」（ESLint使用）
「SublimeLinter-jshint」（JSHint使用）

Python：

「SublimeLinter-flake8」（Flake8使用）
「SublimeLinter-pylint」（Pylint使用）

CSS：

「SublimeLinter-csslint」

HTML：

「SublimeLinter-html-tidy」

表示される警告の種類

エラーレベル

Error（赤）：構文エラーなど、実行に影響する問題
Warning（黄）：推奨されない書き方
Info（青）：改善提案

具体的な警告例

JavaScript：

// ❌ エラー例
console.log("test")  // セミコロンなし
var unused = 1;      // 未使用変数
if (true) {          // ブロック内で var 使用
  var x = 1;
}

Python：

# ❌ エラー例
import os, sys       # 複数import
def func( ):         # スペースが多い
    pass

実用的な設定

設定ファイルの例

SublimeLinter.sublime-settings：

{
  "styles": [
    {
      "mark_style": "outline",
      "priority": 1,
      "scope": "region.yellowish markup.warning.sublime_linter",
      "icon": "warning",
      "types": ["warning"]
    },
    {
      "mark_style": "fill",
      "priority": 1,
      "scope": "region.redish markup.error.sublime_linter", 
      "icon": "error",
      "types": ["error"]
    }
  ],
  "show_panel_on_save": "never",
  "syntax_map": {
    "html (django)": "html",
    "html (rails)": "html"
  }
}

プロジェクト別設定

ESLintの設定例（.eslintrc.json）：

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": ["eslint:recommended"],
  "rules": {
    "no-unused-vars": "warn",
    "no-console": "warn",
    "semi": ["error", "always"]
  }
}

チーム開発での活用

統一されたコードスタイル

設定ファイルの共有
CI/CDとの連携
プルリクエスト前のチェック

品質向上

ケアレスミスの防止
ベストプラクティスの自動チェック
セキュリティ問題の早期発見

ケアレスミスを防げて、チーム開発の品質向上にも必須のプラグインです。

6. A File Icon（ファイルアイコン表示）

概要

ファイルタイプごとにきれいなアイコンがつくプラグインです。見た目が整い、目的のファイルが探しやすくなります。

導入方法

Package Control から「A File Icon」をインストール
インストール後、自動的にアイコンが表示されます

対応ファイル形式

プログラミング言語

JavaScript：JS ロゴ
Python：Python ロゴ
HTML：HTML5 ロゴ
CSS：CSS3 ロゴ
PHP：PHP ロゴ
Ruby：Ruby ロゴ

フレームワーク・ライブラリ

React：React ロゴ（.jsx ファイル）
Vue：Vue ロゴ（.vue ファイル）
Angular：Angular ロゴ（.ts ファイル）
Sass：Sass ロゴ（.scss, .sass ファイル）

その他のファイル

画像：画像アイコン（.png, .jpg, .gif など）
ドキュメント：PDF、Word、Excel アイコン
設定ファイル：JSON、XML、YAML アイコン
データベース：SQL アイコン

視覚的な効果

Before（標準）

? index.html
? style.css  
? script.js
? app.py
? README.md

After（A File Icon）

? index.html
? style.css
⚡ script.js
? app.py
? README.md

カスタマイズ設定

テーマとの連携

設定例：

{
  "A File Icon.force_mode": true,
  "A File Icon.on_change": true,
  "A File Icon.on_selection": true
}

独自アイコンの追加

特定のファイル名や拡張子に独自のアイコンを設定することも可能です。

実際の効果

プロジェクト管理時

ファイル種別の即座の識別
大きなプロジェクトでの迷子防止
視覚的な整理整頓

作業効率向上

ファイル切り替えの高速化
間違ったファイルを開くミスの減少
プロジェクト全体の把握向上

地味に効率アップするプラグインで、見栄えが良いのでモチベーションも上がります。一度使うと手放せなくなる便利さです。

7. Color Highlighter（カラーコード可視化）

概要

CSSやSCSSで色コードを書くと、その背景に実際の色が表示されます。カラーコードのミスを減らし、デザイン調整が楽になります。

導入方法

Package Control から「Color Highlighter」をインストール

対応カラー形式

16進数カラー

color: #ff5733;     /* オレンジ色の背景 */
background: #3498db; /* 青色の背景 */

RGB/RGBA

color: rgb(255, 87, 51);
background: rgba(52, 152, 219, 0.8);

HSL/HSLA

color: hsl(9, 100%, 60%);
background: hsla(204, 70%, 53%, 0.8);

CSS色名

color: red;
background: lightblue;
border: 2px solid darkgreen;

実用的な機能

カラーピッカー

カラーコードを右クリック
「Choose color」を選択
グラフィカルなカラーピッカーで色を選択
自動的にコードが更新される

カラーパレット生成

複数の色を使用している場合、プロジェクト全体で使用されている色のパレットを生成できます。

設定カスタマイズ

基本設定

設定ファイル例：

{
  "ha_style": "filled",
  "icons": true,
  "default_keybindings": true,
  "experimental": true
}

表示スタイルのオプション

filled：カラーコード全体を色で塗りつぶし
outlined：カラーコードを色付きの枠で囲む
underlined：カラーコードの下に色付きライン

実際の開発での活用

CSS/SCSS作業時

// 変数定義時に色を確認
$primary-color: #3498db;    // 青色が表示される
$secondary-color: #e74c3c;  // 赤色が表示される
$accent-color: #f39c12;     // オレンジ色が表示される

// 使用時も色が確認できる
.button {
  background-color: $primary-color;
  border: 2px solid darken($primary-color, 10%);
}

デザインシステム構築

:root {
  --color-primary: #007bff;     /* プライマリーブルー */
  --color-secondary: #6c757d;   /* セカンダリーグレー */
  --color-success: #28a745;     /* 成功グリーン */
  --color-danger: #dc3545;      /* エラーレッド */
  --color-warning: #ffc107;     /* 警告イエロー */
  --color-info: #17a2b8;        /* インフォシアン */
}

チーム開発での利点

デザイナーとの連携

色の認識違いを防止
ブランドカラーの統一確認
アクセシビリティの色コントラスト確認

コードレビュー

色の妥当性を視覚的に確認
統一されたカラーパレットの使用確認
意図しない色の使用を発見

カラーコードのミスを減らせて、デザイン調整が楽になる、フロントエンド開発には必須のプラグインです。

8. Material Theme（UI現代化）

概要

Sublime TextのUI（ユーザーインターface）をGoogleのマテリアルデザイン風に変更できるテーマです。見た目を一新して作業のモチベーションを向上させます。

導入方法

Package Control から「Material Theme」をインストール
Ctrl + Shift + P → 「Material Theme: Activate theme」
好みのバリエーションを選択

テーマバリエーション

ダークテーマ

Material Theme：標準のダークテーマ
Material Theme Darker：より深いダーク
Material Theme Palenight：紫系のダーク

ライトテーマ

Material Theme Lighter：明るいテーマ
Material Theme Default：標準的な明るさ

カラースキーム

プログラミング言語別最適化

JavaScript：

// 関数名：鮮やかなブルー
function calculateTotal() {
    // 文字列：温かいオレンジ
    const message = "計算中...";
    // 数値：鮮やかなグリーン  
    return price * 1.08;
}

Python：

# クラス名：明るいイエロー
class DataProcessor:
    # メソッド名：ブルー
    def process_data(self, data):
        # 文字列：オレンジ
        print("データを処理中")
        # キーワード：パープル
        return None

アイコンとUI要素

モダンなアイコンセット

ファイルタブ：角丸のモダンデザイン
サイドバー：マテリアルデザインのアイコン
ボタン：フラットデザイン
スクロールバー：細くて目立たないデザイン

カスタマイズ可能な要素

設定例：

{
  "theme": "Material-Theme-Darker.sublime-theme",
  "color_scheme": "Packages/Material Theme/schemes/Material-Theme-Darker.tmTheme",
  "material_theme_accent_lime": true,
  "material_theme_compact_sidebar": true,
  "material_theme_disable_fileicons": false,
  "material_theme_disable_folder_animation": false,
  "material_theme_arrow_folders": true,
  "material_theme_big_fileicons": true,
  "material_theme_small_statusbar": true
}

実際の使用感

目の疲労軽減

適切なコントラスト比
目に優しい配色
長時間の作業に適した色温度

集中力向上

統一されたデザイン言語
気が散る要素の排除
重要な情報の強調

他のプラグインとの連携

A File Icon との組み合わせ

Material Theme は A File Icon と組み合わせることで、さらに統一感のある美しいUIを実現できます。

GitGutter との連携

差分表示もマテリアルデザインに適した色で表示され、視認性が向上します。

プロジェクト別テーマ切り替え

// プロジェクト設定ファイル (.sublime-project)
{
  "settings": {
    "theme": "Material-Theme-Palenight.sublime-theme",
    "color_scheme": "Packages/Material Theme/schemes/Material-Theme-Palenight.tmTheme"
  }
}

デフォルトの見た目に飽きた人におすすめで、目に優しい配色も選べる、作業環境を劇的に改善するテーマです。

プラグイン導入時の注意点とベストプラクティス

バージョン互換性の確認

Sublime Text のバージョン確認

確認方法：

Help → About Sublime Text
現在のバージョンを確認

重要なポイント：

Sublime Text 3 と 4 で異なるプラグインがある
古いプラグインは動作しない場合がある
Package Control の互換性リストを確認

プラグインのメンテナンス状況

確認すべき項目：

最終更新日（1年以上更新されていないものは要注意）
Issue の対応状況
ユーザーレビュー
代替プラグインの存在

パフォーマンスへの影響

起動速度への影響

問題となりやすいプラグイン：

重いシンタックスハイライト
リアルタイム処理系（Linter類）
大容量のテーマファイル

対策：

// 設定で無効化
"ignored_packages": [
  "Heavy Plugin Name"
]

メモリ使用量の監視

確認方法：

`Ctrl + “ でコンソールを開く
sublime.log_commands(True) でコマンドログ有効化
重い処理を特定

プラグインの適切な管理

定期的なメンテナンス

月1回のチェック項目：

未使用プラグインの削除
アップデートの確認
設定ファイルのクリーンアップ
競合の確認

バックアップの重要性

バックアップすべきファイル：

~/Library/Application Support/Sublime Text 3/
├── Packages/
├── Installed Packages/
└── User/
    ├── Preferences.sublime-settings
    ├── Default.sublime-keymap
    └── Package Control.sublime-settings

トラブルシューティング

プラグインが動作しない場合

確認手順：

Package Control: List Packages で導入確認
コンソールエラーの確認（`Ctrl + “）
設定ファイルの構文チェック
再起動で解決することも

競合の解決

よくある競合：

同じ機能のプラグインを複数導入
キーバインドの重複
設定の上書き

解決方法：

// User設定で優先度を指定
"ignored_packages": [
  "Conflicting Plugin"
]

セキュリティ考慮事項

信頼できるソースからの導入

安全なプラグインの選び方：

Package Control 公式リポジトリからの導入
GitHub Stars数が多い（1000+推奨）
アクティブなメンテナンス（最近のコミット）
詳細なドキュメントの存在

権限の確認

注意すべきプラグイン：

ネットワークアクセスを要求するもの
システムファイルに書き込むもの
外部ツールを自動ダウンロードするもの

必要なものだけ厳選して入れるのがおすすめで、定期的に不要なプラグインを見直しましょう。

効率的なプラグイン活用法

ワークフロー別おすすめセット

Web フロントエンド開発者向け

必須プラグイン：

Package Control（基本）
Emmet（HTML/CSS高速化）
Color Highlighter（色の可視化）
SideBarEnhancements（ファイル管理）
A File Icon（視認性向上）

追加推奨：

AutoFileName：ファイルパスの自動補完
CSS3：CSS3 プロパティのハイライト
HTML-CSS-JS Prettify：コード整形

Python 開発者向け

必須プラグイン：

Package Control（基本）
SublimeLinter + flake8（コード品質）
GitGutter（バージョン管理）
Material Theme（視覚性向上）

追加推奨：

Anaconda：Python IDE機能
SublimeREPL：REPL統合
MagicPython：シンタックスハイライト強化

汎用テキスト編集者向け

必須プラグイン：

Package Control（基本）
SideBarEnhancements（ファイル管理）
A File Icon（視認性）
Material Theme（UI改善）

追加推奨：

MarkdownEditing：Markdown執筆支援
WordCount：文字数カウント
PlainTasks：TODO管理

キーボードショートカットのカスタマイズ

よく使う操作の高速化

カスタムキーバインド例：

[
  // Package Control を素早く起動
  {
    "keys": ["ctrl+alt+p"],
    "command": "show_overlay",
    "args": {"overlay": "command_palette", "text": "Package Control: "}
  },
  
  // GitGutter の差分ジャンプ
  {
    "keys": ["ctrl+alt+up"],
    "command": "git_gutter_prev_change"
  },
  {
    "keys": ["ctrl+alt+down"], 
    "command": "git_gutter_next_change"
  },
  
  // SideBar の表示切り替え
  {
    "keys": ["ctrl+k", "ctrl+b"],
    "command": "toggle_side_bar"
  }
]

プロジェクト別設定の活用

プロジェクト固有の設定

プロジェクト設定ファイル例（.sublime-project）：

{
  "folders": [
    {
      "path": ".",
      "folder_exclude_patterns": ["node_modules", ".git", "dist"]
    }
  ],
  "settings": {
    "theme": "Material-Theme-Darker.sublime-theme",
    "color_scheme": "Packages/Material Theme/schemes/Material-Theme-Darker.tmTheme",
    "tab_size": 2,
    "translate_tabs_to_spaces": true,
    "rulers": [80, 120],
    "word_wrap": true,
    "sublimeLinter": {
      "linters": {
        "eslint": {
          "args": ["--config", ".eslintrc.json"]
        }
      }
    }
  }
}