Sublime Textの自動補完をもっと便利に！標準機能とおすすめプラグイン

「Sublime Textを使っているけど、自動補完がいまいち物足りない…」
「もっと賢くコードを補完してくれないかな？」
こんな悩みを持つ開発者は多いです。

Sublime Text（サブライムテキスト）は軽快でカスタマイズ性の高いエディタですが、初期状態では自動補完機能がシンプルなため、Visual Studio CodeやIntelliJ IDEAのような高度な補完に慣れている人には物足りなく感じることもあります。

この記事では、以下の内容を詳しく解説します：

Sublime Textの標準自動補完機能の最適化設定
補完を強化するおすすめプラグイン
言語別の専用補完パッケージ
カスタムスニペットの作成方法
よくあるトラブルと解決法

Sublime Text標準の自動補完機能

基本的な自動補完の仕組み

Sublime Textの標準自動補完は以下の要素から候補を生成します：

補完候補のソース

現在のファイル内の単語：すでに入力済みの単語
開いているタブのファイル内容：他のタブで使用されている単語
言語固有のキーワード：HTMLタグ、CSS プロパティなど
ユーザー定義スニペット：自作のコードテンプレート

基本的な動作

自動表示：文字を入力すると候補が自動で表示 手動表示：Ctrl + Space（Mac: Cmd + Space）で強制表示選択：矢印キーで候補を選択、Enter または Tab で確定

標準設定の最適化

基本設定の確認

設定ファイルの場所

Preferences → Settings

重要な設定項目

{
    // 自動補完の有効化
    "auto_complete": true,
    
    // 補完候補表示の遅延時間（ミリ秒）
    "auto_complete_delay": 50,
    
    // Tabキーで補完を確定
    "auto_complete_commit_on_tab": true,
    
    // サイズベースの補完（長い単語を優先）
    "auto_complete_size_limit": 4194304,
    
    // セレクタベースの補完（CSS等）
    "auto_complete_selector": "source - comment, meta.tag - punctuation.definition.tag.begin",
    
    // Tabキーでの補完をより積極的に
    "tab_completion": true,
    
    // 補完候補に含める要素
    "auto_complete_triggers": [
        {"selector": "text.html", "characters": "<"},
        {"selector": "text.html", "characters": " "},
        {"selector": "source.css", "characters": ":"},
        {"selector": "source.css", "characters": " "}
    ]
}

高度な設定オプション

補完候補の詳細制御

{
    // 補完候補の最大表示数
    "auto_complete_max_width": 1000,
    "auto_complete_max_height": 300,
    
    // 大文字小文字を無視した補完
    "auto_complete_case_sensitive": false,
    
    // 補完候補のプレビュー表示
    "auto_complete_include_snippets": true,
    "auto_complete_include_snippets_when_typing": true,
    
    // ワード区切り文字の設定
    "word_separators": "./\\()\"'-:,.;<>~!@#$%^&*|+=[]{}`~?"
}

キーバインディングのカスタマイズ

デフォルトのキーバインディング

基本操作

Ctrl + Space：補完候補を強制表示
Escape：補完候補を閉じる
Tab / Enter：補完候補を確定
↑ / ↓：候補間の移動

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

設定場所

Preferences → Key Bindings

カスタマイズ例

[
    // Ctrl + Jで補完候補を表示
    {
        "keys": ["ctrl+j"],
        "command": "auto_complete"
    },
    
    // Ctrl + Shift + Spaceでスニペット補完
    {
        "keys": ["ctrl+shift+space"],
        "command": "insert_snippet"
    },
    
    // Enterキーでの確定を無効化（改行を優先）
    {
        "keys": ["enter"],
        "command": "commit_completion",
        "context": [
            {"key": "auto_complete_visible"},
            {"key": "setting.auto_complete_commit_on_tab", "operand": false}
        ]
    }
]

自動補完を強化するプラグイン

基本的な補完強化プラグイン

All Autocomplete

概要：プロジェクト全体から補完候補を生成

特徴：

開いているすべてのタブから候補を収集
ファイルを跨いだ変数名や関数名の補完
プロジェクト規模に応じた動的な候補生成

インストール方法

1. Ctrl + Shift + P でコマンドパレットを開く
2. Package Control: Install Package を選択
3. All Autocomplete と入力してインストール

設定例

{
    "all_autocomplete_max_file_size": 1048576,
    "all_autocomplete_max_views": 20,
    "all_autocomplete_minimum_word_size": 3,
    "all_autocomplete_case_sensitive": false
}

AutoComplete Python

概要：Python専用の高度な自動補完

特徴：

ライブラリの関数・メソッド補完
型ヒントに基づく補完
ドキュメント文字列の表示

設定例

{
    "python_autocomplete": true,
    "python_autocomplete_use_jedi": true,
    "python_interpreter": "/usr/bin/python3"
}

言語固有の補完プラグイン

JavaScript・TypeScript

JavaScript Completions

特徴：

ES6+ の新機能に対応
Node.js API の補完
ブラウザ API の補完

インストール後の設定

{
    "js_completions": {
        "completion_active_in": ["js", "jsx", "ts", "tsx"],
        "enable_evalutation_tooltip": true,
        "enable_snippet_completions": true
    }
}

TypeScript

特徴：

型定義に基づく補完
インテリセンス機能
リアルタイムエラーチェック

基本設定

{
    "typescript_auto_format": true,
    "typescript_plugin_settings": {
        "completions": true,
        "diagnostics": true
    }
}

HTML・CSS

Emmet

概要：HTML/CSSの高速入力支援

基本的な使用例

<!-- HTMLの省略記法 -->
div.container>ul.list>li.item*3>a

<!-- 展開結果 -->
<div class="container">
    <ul class="list">
        <li class="item"><a href=""></a></li>
        <li class="item"><a href=""></a></li>
        <li class="item"><a href=""></a></li>
    </ul>
</div>

CSS省略記法

/* 入力 */
m10-20-30-40

/* 展開結果 */
margin: 10px 20px 30px 40px;

HTML5

特徴：

HTML5の新要素補完
属性値の候補表示
セマンティックタグの提案

Python

Anaconda

概要：Python開発環境の統合パッケージ

含まれる機能：

コード補完（Jedi ベース）
構文チェック（PyFlakes、pep8）
関数定義へのジャンプ
ドキュメント表示

基本設定

{
    "anaconda_linting": true,
    "anaconda_linter_underlines": true,
    "anaconda_linter_mark_style": "outline",
    "anaconda_complete_parameters": true,
    "anaconda_autoformat": true
}

使用例

import numpy as np

# np.と入力すると以下のような候補が表示
# array, zeros, ones, arange, linspace, etc.

arr = np.array([1, 2, 3])
# arr.と入力すると配列メソッドが表示
# shape, dtype, size, reshape, etc.

PHP

PHP Completions Kit

特徴：

PHP標準関数の補完
オブジェクト指向の補完
フレームワーク対応

設定例

{
    "php_completions": {
        "enable_default": true,
        "enable_functions": true,
        "enable_classes": true
    }
}

高度な補完システム

LSP（Language Server Protocol）

LSP の概要 LSPは言語固有の高度な機能を提供するプロトコルです。

LSP-sublime プラグイン

対応言語：

Python（pylsp）
JavaScript/TypeScript（typescript-language-server）
Go（gopls）
Rust（rls）
C/C++（clangd）

基本設定

{
    "clients": {
        "pylsp": {
            "enabled": true,
            "command": ["pylsp"],
            "selector": "source.python",
            "settings": {
                "pylsp.plugins.pycodestyle.enabled": true,
                "pylsp.plugins.flake8.enabled": true
            }
        }
    }
}

SublimeCodeIntel

概要：複数言語対応のコードインテリジェンス

特徴：

関数・変数の定義ジャンプ
リアルタイム構文チェック
インポート文の自動補完

対応言語：

Python、JavaScript、PHP、Ruby、Go、XML、HTML、CSS

カスタムスニペットの作成

スニペットの基本

スニペットとは

スニペットは、よく使うコードパターンをテンプレート化したものです。キーワードを入力してTabキーを押すことで、定型的なコードを瞬時に展開できます。

基本的な構文

スニペットファイルの形式

<snippet>
    <content><![CDATA[
ここにテンプレートを記述
]]></content>
    <tabTrigger>trigger_word</tabTrigger>
    <scope>source.python</scope>
    <description>スニペットの説明</description>
</snippet>

実用的なスニペット例

Python用スニペット

関数定義テンプレート

<snippet>
    <content><![CDATA[
def ${1:function_name}(${2:parameters}):
    """${3:function description}
    
    Args:
        ${4:arg description}
    
    Returns:
        ${5:return description}
    """
    ${6:pass}
]]></content>
    <tabTrigger>def</tabTrigger>
    <scope>source.python</scope>
    <description>Function definition with docstring</description>
</snippet>

クラス定義テンプレート

<snippet>
    <content><![CDATA[
class ${1:ClassName}:
    """${2:class description}"""
    
    def __init__(self${3:, parameters}):
        """${4:Initialize the class}"""
        ${5:pass}
        
    def __str__(self):
        """${6:String representation}"""
        return "${7:representation}"
]]></content>
    <tabTrigger>class</tabTrigger>
    <scope>source.python</scope>
    <description>Class definition with __init__ and __str__</description>
</snippet>

JavaScript用スニペット

ES6 アロー関数

<snippet>
    <content><![CDATA[
const ${1:functionName} = (${2:parameters}) => {
    ${3:// function body}
    return ${4:value};
};
]]></content>
    <tabTrigger>arrow</tabTrigger>
    <scope>source.js</scope>
    <description>ES6 Arrow Function</description>
</snippet>

React コンポーネント

<snippet>
    <content><![CDATA[
import React from 'react';

const ${1:ComponentName} = (${2:props}) => {
    return (
        <div>
            ${3:// JSX content}
        </div>
    );
};

export default ${1:ComponentName};
]]></content>
    <tabTrigger>rfc</tabTrigger>
    <scope>source.js, source.jsx</scope>
    <description>React Functional Component</description>
</snippet>

HTML用スニペット

HTML5テンプレート

<snippet>
    <content><![CDATA[
<!DOCTYPE html>
<html lang="${1:ja}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>${2:Document Title}</title>
    ${3:<link rel="stylesheet" href="style.css">}
</head>
<body>
    ${4:<!-- content -->}
    ${5:<script src="script.js"></script>}
</body>
</html>
]]></content>
    <tabTrigger>html5</tabTrigger>
    <scope>text.html</scope>
    <description>HTML5 Document Template</description>
</snippet>

スニペット変数の活用

利用可能な変数

<!-- 日付・時刻関連 -->
$CURRENT_YEAR - 現在の年（4桁）
$CURRENT_MONTH - 現在の月（2桁）
$CURRENT_DATE - 現在の日（2桁）
$CURRENT_HOUR - 現在の時（24時間形式）
$CURRENT_MINUTE - 現在の分
$CURRENT_SECOND - 現在の秒

<!-- ファイル関連 -->
$TM_FILENAME - ファイル名（拡張子含む）
$TM_FILENAME_BASE - ファイル名（拡張子なし）
$TM_DIRECTORY - ディレクトリパス
$TM_FILEPATH - フルパス

<!-- 選択・カーソル関連 -->
$TM_SELECTED_TEXT - 選択中のテキスト
$TM_CURRENT_LINE - 現在の行
$TM_CURRENT_WORD - 現在の単語

実用例

著作権表示スニペット

<snippet>
    <content><![CDATA[
/**
 * @file ${TM_FILENAME}
 * @author ${1:Your Name}
 * @date $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE
 * @description ${2:File description}
 * @copyright Copyright (c) $CURRENT_YEAR ${1:Your Name}
 */
]]></content>
    <tabTrigger>header</tabTrigger>
    <scope>source</scope>
    <description>File Header with Copyright</description>
</snippet>

トラブルシューティング

よくある問題と解決法

自動補完が表示されない

原因1：基本設定の問題

確認項目

{
    "auto_complete": true,  // falseになっていないか確認
    "tab_completion": true
}

原因2：言語設定（Syntax）が正しくない

解決方法

ファイルの右下のステータスバーを確認
「Plain Text」になっている場合は適切な言語を選択
例：.jsファイルなら「JavaScript」を選択

原因3：ファイルサイズが大きすぎる

解決方法

{
    "auto_complete_size_limit": 8388608  // サイズ制限を増加
}

補完候補が少ない・期待と異なる

原因1：補完ソースの設定

改善方法

{
    "auto_complete_selector": "source - comment - string.quoted.double.block - string.quoted.single.block - string.unquoted.heredoc",
    "auto_complete_triggers": [
        {"selector": "source.python", "characters": "."},
        {"selector": "source.python", "characters": "import "},
        {"selector": "text.html", "characters": "<"},
        {"selector": "source.css", "characters": ":"}
    ]
}

原因2：プラグインが正しく動作していない

確認方法

1. Package Control: List Packages で確認
2. View → Show Console でエラーメッセージを確認
3. 必要に応じてプラグインを再インストール

パフォーマンスの問題

原因：プラグインの競合や過多

解決方法

{
    // 補完の遅延を調整
    "auto_complete_delay": 100,
    
    // ファイルサイズ制限
    "auto_complete_size_limit": 4194304,
    
    // 不要なプラグインを無効化
    "ignored_packages": ["Vintage", "SomeHeavyPlugin"]
}

スニペットが動作しない

原因1：スコープ設定の間違い

確認方法

Tools → Developer → Show Scope Name

でカーソル位置のスコープを確認し、スニペットのスコープと一致させる

原因2：XMLの構文エラー

よくあるエラー

<!-- 悪い例 -->
<content>
function test() {
    // CDATA セクションが必要
}
</content>

<!-- 良い例 -->
<content><![CDATA[
function test() {
    // この中では特殊文字もOK
}
]]></content>

デバッグ方法

コンソールでのデバッグ

基本コマンド

# Sublime Text のコンソール（View → Show Console）で実行

# 現在のスコープを確認
view.scope_name(view.sel()[0].begin())

# アクティブな補完候補を確認
view.is_auto_complete_visible()

# 設定値の確認
view.settings().get('auto_complete')

ログファイルの確認

Sublime Text のログ

Windows: %APPDATA%\Sublime Text\Packages\User\
macOS: ~/Library/Application Support/Sublime Text/Packages/User/
Linux: ~/.config/sublime-text/Packages/User/

パフォーマンス最適化

効率的な設定

メモリ使用量の最適化

{
    // 大きなファイルでの補完を制限
    "auto_complete_size_limit": 1048576,
    
    // 補完候補の数を制限
    "auto_complete_max_width": 1000,
    "auto_complete_max_height": 300,
    
    // 不要な補完を無効化
    "auto_complete_include_snippets_when_typing": false
}

プロジェクト固有の設定

.sublime-project ファイルでの設定

{
    "folders": [
        {
            "path": "."
        }
    ],
    "settings": {
        "auto_complete_triggers": [
            {"selector": "source.python", "characters": "."},
            {"selector": "source.python", "characters": "import "}
        ],
        "python_interpreter": "/path/to/project/venv/bin/python"
    }
}

言語別最適化

Python プロジェクト

{
    "settings": {
        "python_interpreter": "/usr/bin/python3",
        "anaconda_linting": true,
        "anaconda_complete_parameters": true,
        "anaconda_complete_all_parameters": false,
        "anaconda_linter_mark_style": "outline"
    }
}

JavaScript/Node.js プロジェクト

{
    "settings": {
        "auto_complete_triggers": [
            {"selector": "source.js", "characters": "."},
            {"selector": "source.js", "characters": "require("},
            {"selector": "source.js", "characters": "import "}
        ],
        "js_completions": {
            "completion_active_in": ["js", "jsx", "ts", "tsx"]
        }
    }
}

まとめ

自動補完機能の段階的改善

ステップ1：基本設定の最適化

標準の auto_complete 設定を確認・調整
キーバインディングをカスタマイズ
言語設定（Syntax）を正しく設定

ステップ2：プラグインの導入

All Autocomplete でプロジェクト全体の補完
言語固有プラグイン（Anaconda、JavaScript Completions等）
LSP で最新の言語サーバー機能

ステップ3：カスタマイズの深化

カスタムスニペットの作成
プロジェクト固有設定の活用
パフォーマンス最適化

効果的な活用のコツ

段階的な導入：一度に多くのプラグインを入れず、徐々に追加
設定の文書化：プロジェクトごとの設定をドキュメント化
定期的なメンテナンス：不要なプラグインの削除、設定の見直し
チーム共有：効果的な設定をチームで共有

開発効率向上の効果

時間短縮：

タイピング量の削減
関数名・変数名の入力ミス防止
APIドキュメント参照の減少

品質向上：

構文エラーの事前防止
一貫したコーディングスタイル
ベストプラクティスの自動適用

Sublime Text標準の自動補完機能

基本的な自動補完の仕組み

補完候補のソース

基本的な動作

標準設定の最適化

基本設定の確認

高度な設定オプション

キーバインディングのカスタマイズ

デフォルトのキーバインディング

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

自動補完を強化するプラグイン

基本的な補完強化プラグイン

All Autocomplete

AutoComplete Python

言語固有の補完プラグイン

JavaScript・TypeScript

HTML・CSS

Python

PHP

高度な補完システム

LSP（Language Server Protocol）

SublimeCodeIntel

カスタムスニペットの作成

スニペットの基本

スニペットとは

基本的な構文

実用的なスニペット例

Python用スニペット

JavaScript用スニペット

HTML用スニペット

スニペット変数の活用

利用可能な変数

実用例

トラブルシューティング

よくある問題と解決法

自動補完が表示されない

補完候補が少ない・期待と異なる

パフォーマンスの問題

スニペットが動作しない

デバッグ方法

コンソールでのデバッグ

ログファイルの確認

パフォーマンス最適化

効率的な設定

メモリ使用量の最適化

プロジェクト固有の設定

言語別最適化

Python プロジェクト

JavaScript/Node.js プロジェクト

まとめ

自動補完機能の段階的改善

ステップ1：基本設定の最適化

ステップ2：プラグインの導入

ステップ3：カスタマイズの深化

効果的な活用のコツ

開発効率向上の効果

Youtube

カテゴリー別人気記事

コメント