【初心者向け】Sublime Textでパッケージ（プラグイン）をインストールする方法｜おすすめも紹介

プログラミング・IT

Sublime Text（サブライム テキスト）は、その軽快さとカスタマイズ性の高さで多くのプログラマーやライターに愛用されています。

しかし、初期状態のままだと必要最低限の機能しかないため、パッケージ（プラグイン）をインストールして機能を拡張することがほぼ必須です。

この記事では、Sublime Text初心者の方に向けて以下の内容をわかりやすく解説します：

  • Package Controlの導入方法
  • パッケージのインストール手順
  • 開発言語別のおすすめパッケージ
  • パッケージの管理と削除方法
  • よくあるトラブルと解決法

スポンサーリンク

そもそも「パッケージ」とは？

パッケージの基本概念

Sublime Textでは、追加機能のことを「パッケージ」と呼びます。これは他のエディタでいう以下のものと同じ概念です：

  • Visual Studio Code: 拡張機能（Extension）
  • Atom: パッケージ（Package）
  • IntelliJ IDEA: プラグイン（Plugin）

パッケージで追加できる機能

パッケージをインストールすることで、以下のような機能を追加できます：

開発効率向上

  • コード補完: HTML、CSS、JavaScriptなどの自動補完
  • シンタックスハイライト: 新しい言語の構文ハイライト
  • スニペット: よく使うコードの定型文を挿入
  • 自動フォーマット: コードの整形とスタイル統一

Git・バージョン管理

  • Git連携: ブランチ表示、差分確認、コミット
  • 変更箇所の視覚化: 編集した行の色分け表示
  • ブレームビュー: 各行の変更者と日時を表示

見た目・UI改善

  • テーマとカラースキーム: エディタの外観変更
  • アイコン表示: ファイルタイプに応じたアイコン
  • ミニマップ強化: コード全体の構造を把握
  • タブ機能強化: タブの見た目と操作性向上

言語固有機能

  • 言語サーバー連携: LSPを使った高度なコード解析
  • デバッグ機能: ブレークポイントとステップ実行
  • ビルドシステム: コンパイルと実行の自動化
  • リンター連携: コードの品質チェック

Package Controlの導入

Package Controlとは

Package Controlは、Sublime Textの公式パッケージマネージャーです。これがないとパッケージの管理が非常に困難になるため、最初に必ずインストールしましょう。

インストール方法

方法1：メニューからのインストール（推奨）

Sublime Text 4の場合

  1. メニューバーから**「Tools」**を選択
  2. **「Install Package Control」**をクリック
  3. 数秒でインストールが完了
  4. 画面左下に「Package Control was successfully installed」と表示されればOK

Sublime Text 3の場合

Sublime Text 3では、手動インストールが必要な場合があります。

方法2：手動インストール

コンソールを使用した方法

  1. 「View」 → **「Show Console」**でコンソールを開く
  2. 以下のコードを貼り付けてEnterキーを押す

Sublime Text 4用のコード

import urllib.request,os,hashlib; h = '6f4c264a24d933ce70df5dedcf1dcaee' + 'ebe013ee18cced0ef93d5f746d80ef60'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

Sublime Text 3用のコード

import urllib.request,os,hashlib; h = 'df21e130d211cfc94d9b0905775a7c0f' + '1e3bda3a737b4c10e40f5a6d4bd45e59'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)
  1. Sublime Textを再起動

インストール確認

Package Controlが正しくインストールされたかを確認します：

  1. Ctrl + Shift + P（Mac: Cmd + Shift + P）でコマンドパレットを開く
  2. 「Package Control」と入力
  3. Package Control関連のコマンドが表示されればインストール成功

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

基本的なインストール手順

ステップ1：コマンドパレットを開く

Windows/Linux

Ctrl + Shift + P

macOS

Cmd + Shift + P

ステップ2：Install Packageコマンドを実行

  1. コマンドパレットに「install」と入力
  2. 「Package Control: Install Package」を選択
  3. パッケージリストの読み込み完了まで数秒待機

ステップ3：インストールしたいパッケージを検索

  1. インストールしたいパッケージ名を入力
  2. 検索結果から目的のパッケージを選択
  3. Enterキーでインストール開始

ステップ4：インストール完了の確認

  • 画面下部にインストール完了メッセージが表示
  • 必要に応じてSublime Textを再起動

具体的なインストール例

Emmetパッケージのインストール

手順

  1. Ctrl + Shift + Pでコマンドパレットを開く
  2. 「install package」と入力して選択
  3. 「Emmet」と入力
  4. 検索結果から「Emmet」を選択してEnter

使用例

<!-- HTMLファイルで以下を入力してTabキー -->
div.container>ul.list>li.item*3

<!-- 以下のように展開される -->
<div class="container">
    <ul class="list">
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
    </ul>
</div>

初心者におすすめのパッケージ

必須パッケージ（全ユーザー向け）

Package Control

  • 概要: パッケージマネージャー（最初にインストール必須）
  • 機能: 他のパッケージのインストール・管理
  • インストール: 上記の手順で導入

SideBarEnhancements

  • 概要: サイドバーの機能を大幅強化
  • 機能: 右クリックメニューの拡張、ファイル操作の改善
  • 特徴: 新規作成、削除、リネーム、コピーなどが簡単に

使用例

右クリックメニューに以下が追加される：
- New File/Folder
- Edit
- Open With
- Delete/Move to Trash
- Copy/Cut/Paste

A File Icon

  • 概要: ファイルタイプに応じたアイコンを表示
  • 機能: サイドバーとタブにファイルアイコンを追加
  • メリット: ファイルの種類が一目で判別可能

BracketHighlighter

  • 概要: 対応する括弧をハイライト表示
  • 機能: カーソルの位置に応じて対応する括弧を強調
  • 対応括弧: (), [], {}, <>, “”, ”

Git関連パッケージ

GitGutter

  • 概要: Gitの変更箇所を行番号横に色で表示
  • 機能: 追加、変更、削除された行を視覚化
  • 色分け:
    • 緑: 新規追加行
    • 黄: 変更行
    • 赤: 削除行

Git

  • 概要: Sublime Text内でGitコマンドを実行
  • 機能: add、commit、push、pullなどをコマンドパレットから実行
  • メリット: ターミナルを開かずにGit操作が可能

開発言語別おすすめパッケージ

Web開発（HTML/CSS/JavaScript）

Emmet

  • 機能: HTML/CSSの高速記述
  • 使用例:
/* CSS */
m10 → margin: 10px;
p20-30 → padding: 20px 30px;

AutoFileName

  • 機能: ファイルパスの自動補完
  • 特徴: 画像やCSSファイルのパスを自動補完

Color Highlighter

  • 機能: カラーコードの色を背景表示
  • 対応形式: #FF0000, rgb(255,0,0), rgba(255,0,0,0.5)

JSHint

  • 機能: JavaScriptのコード品質チェック
  • 特徴: エラーや警告をリアルタイム表示

Python開発

Anaconda

  • 機能: Python開発環境の統合パッケージ
  • 含まれる機能:
    • コード補完
    • 構文チェック
    • 関数定義へのジャンプ
    • ドキュメント表示

Python 3

  • 機能: Python 3の構文ハイライト
  • 特徴: Python 3固有の機能に対応

SublimeREPL

  • 機能: Sublime Text内でPythonインタープリターを実行
  • 使用方法: Tools → SublimeREPL → Python

C/C++開発

C++ Starting Kit

  • 機能: C++開発に必要な機能をまとめたパッケージ
  • 含まれる機能: 構文ハイライト、スニペット、ビルドシステム

SublimeClang

  • 機能: Clangを使用したコード補完と構文チェック
  • 特徴: 高精度なC/C++の解析

Java開発

JavaIME

  • 機能: Javaの構文ハイライトとスニペット
  • 特徴: Java固有のキーワードと構文に対応

SublimeJava

  • 機能: Java開発環境の統合
  • 機能: コンパイル、実行、デバッグ

テーマ・外観パッケージ

Material Theme

  • 概要: Googleのマテリアルデザインテーマ
  • バリエーション: Default、Darker、Lighter、Ocean
  • 特徴: モダンで見やすいデザイン

設定例

{
    "theme": "Material-Theme.sublime-theme",
    "color_scheme": "Packages/Material Theme/schemes/Material-Theme.tmTheme"
}

Dracula

  • 概要: 人気の暗めテーマ
  • 特徴: 目に優しい暗い背景色
  • 対応エディタ: 多くのエディタで統一デザイン

Seti_UI

  • 概要: ミニマルで美しいテーマ
  • 特徴: アイコンとタイポグラフィを重視
  • カスタマイズ: 豊富な設定オプション

ユーティリティパッケージ

ConvertToUTF8

  • 機能: 日本語などの文字エンコーディング対応
  • 対応形式: Shift_JIS、EUC-JP、GB2312など
  • メリット: 文字化けを解決

Trailing Spaces

  • 機能: 行末の不要な空白をハイライト表示
  • 機能: 保存時に自動削除
  • 設定: 自動削除のON/OFF切り替え可能

Pretty JSON

  • 機能: JSONファイルの整形（フォーマット）
  • 使用方法: Ctrl+Alt+J で整形実行
  • 機能: 圧縮JSONの読みやすい展開

使用例

// 整形前
{"name":"John","age":30,"city":"Tokyo"}

// 整形後
{
    "name": "John",
    "age": 30,
    "city": "Tokyo"
}

パッケージの管理と削除

インストール済みパッケージの確認

リスト表示

  1. Ctrl + Shift + Pでコマンドパレットを開く
  2. 「Package Control: List Packages」を選択
  3. インストール済みパッケージの一覧が表示

パッケージ詳細の確認

  • 設定: Preferences → Package Settings → [パッケージ名]
  • ドキュメント: 多くのパッケージは GitHub にドキュメントあり

パッケージの削除

削除手順

  1. Ctrl + Shift + Pでコマンドパレットを開く
  2. 「Package Control: Remove Package」を選択
  3. 削除したいパッケージを選択
  4. Enterキーで削除実行

完全削除の確認

  • Sublime Textを再起動
  • パッケージの設定ファイルが残っている場合は手動削除

パッケージの無効化

一時的な無効化

  1. Ctrl + Shift + Pでコマンドパレットを開く
  2. 「Package Control: Disable Package」を選択
  3. 無効化したいパッケージを選択

有効化の復元

  1. Ctrl + Shift + Pでコマンドパレットを開く
  2. 「Package Control: Enable Package」を選択
  3. 有効化したいパッケージを選択

パッケージの設定とカスタマイズ

パッケージ設定の基本

設定ファイルの場所

ユーザー設定

Preferences → Package Settings → [パッケージ名] → Settings - User

デフォルト設定の確認

Preferences → Package Settings → [パッケージ名] → Settings - Default

設定例（Emmet）

デフォルト設定の確認

{
    "expand_abbreviations_with_tab": true,
    "show_css_completions": true,
    "disable_tab_abbreviations_for_scopes": "source.css"
}

ユーザー設定の追加

{
    "expand_abbreviations_with_tab": false,
    "auto_id_class": true
}

キーバインディングの設定

カスタムキーバインディング

設定場所

Preferences → Key Bindings

設定例

[
    {
        "keys": ["ctrl+alt+f"],
        "command": "js_format"
    },
    {
        "keys": ["ctrl+shift+d"],
        "command": "duplicate_line"
    }
]

よくあるトラブルと解決法

Package Controlのインストール失敗

症状

  • 「Install Package Control」が表示されない
  • インストール時にエラーが発生

解決方法

1. 手動インストールを試す 上記の「方法2：手動インストール」を実行

2. プロキシ設定の確認

// Preferences → Settings で追加
{
    "http_proxy": "http://proxy.company.com:8080",
    "https_proxy": "http://proxy.company.com:8080"
}

3. SSL証明書の問題

{
    "package_control_ssl_verification": false
}

パッケージのインストールが失敗する

症状

  • 「Package Control: Install Package」が動作しない
  • パッケージリストが表示されない

解決方法

1. ネットワーク接続の確認

  • インターネット接続を確認
  • ファイアウォール設定を確認

2. Package Controlの再インストール

1. Preferences → Browse Packages
2. Package Controlフォルダを削除
3. Sublime Text再起動
4. Package Controlを再インストール

3. コンソールでエラー確認

View → Show Console でエラーメッセージを確認

パッケージが動作しない

症状

  • インストールしたパッケージが機能しない
  • コマンドパレットにコマンドが表示されない

解決方法

1. Sublime Textの再起動 多くの場合、再起動で解決

2. パッケージの依存関係確認

  • 必要な外部ツールがインストールされているか確認
  • Python環境の設定確認

3. ログファイルの確認

Preferences → Browse Packages → User → 
Package Control.sublime-settings

コマンドパレットが開かない

症状

  • Ctrl + Shift + P が反応しない
  • キーボードショートカットが効かない

解決方法

1. IME（日本語入力）をオフにする 日本語入力がオンだとショートカットが無効になることがある

2. 他のアプリケーションとの競合確認 同じショートカットを使用するアプリがないか確認

3. キーバインディングの確認

Preferences → Key Bindings で設定を確認

文字化けが発生する

症状

  • 日本語ファイルが文字化けする
  • 保存時に文字エンコーディングが変わる

解決方法

1. ConvertToUTF8パッケージのインストール

Package Control → Install Package → ConvertToUTF8

2. 文字エンコーディングの設定

{
    "default_encoding": "UTF-8",
    "fallback_encoding": "Shift_JIS"
}

高度な活用方法

開発環境別のパッケージセット

フロントエンド開発セット

必須パッケージ：
- Emmet
- AutoFileName
- Color Highlighter
- SideBarEnhancements
- GitGutter

追加推奨：
- HTML-CSS-JS Prettify
- CSS3_Syntax
- JavaScript Completions
- jQuery

バックエンド開発セット（Python）

必須パッケージ：
- Anaconda
- SublimeREPL
- Python 3
- SideBarEnhancements
- GitGutter

追加推奨：
- Djaneiro（Django開発）
- requirementstxt
- Python Improved

データ分析・機械学習セット

必須パッケージ：
- Anaconda
- R-Box（R言語）
- Markdown Preview
- Table Editor
- CSV

追加推奨：
- LaTeXTools
- OmniMarkupPreviewer
- PlainTasks

カスタムビルドシステム

Node.js用ビルドシステム

設定場所

Tools → Build System → New Build System

設定内容

{
    "cmd": ["node", "$file"],
    "file_regex": "^(.+):([0-9]+):([0-9]+):.*$",
    "selector": "source.js",
    "shell": true,
    "working_dir": "$file_path"
}

Python用ビルドシステム

{
    "cmd": ["python", "-u", "$file"],
    "file_regex": "^[ ]*File \"(...*?)\", line ([0-9]*)",
    "selector": "source.python",
    "encoding": "utf8",
    "env": {"PYTHONIOENCODING": "utf-8"}
}

パッケージ開発

自分でパッケージを作成

基本構造

MyPackage/
├── Default.sublime-commands
├── Default.sublime-keymap
├── Default.sublime-menu
├── MyPackage.py
└── README.md

簡単なコマンド例

import sublime
import sublime_plugin

class HelloWorldCommand(sublime_plugin.TextCommand):
    def run(self, edit):
        self.view.insert(edit, 0, "Hello, World!")

まとめ

パッケージ活用のポイント

  1. Package Controlの導入: すべての始まり
  2. 段階的な導入: 一度に多くのパッケージを入れすぎない
  3. 用途に応じた選択: 自分の開発スタイルに合ったパッケージを選ぶ
  4. 定期的な見直し: 使わないパッケージは削除してパフォーマンス維持

おすすめの導入順序

ステップ1（必須）

  • Package Control
  • SideBarEnhancements
  • A File Icon

ステップ2（開発効率向上）

  • Emmet（Web開発の場合）
  • GitGutter
  • BracketHighlighter

ステップ3（言語固有） 開発言語に応じて必要なパッケージを追加

ステップ4（見た目・テーマ） 好みに応じてテーマやカラースキームを変更

パフォーマンスとの兼ね合い

  • 起動速度: パッケージが多すぎると起動が遅くなる
  • メモリ使用量: 重いパッケージは適度に制限
  • 定期メンテナンス: 不要なパッケージの削除とアップデート

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

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