Sublime Text 3 初期設定

投稿日:2016/02/05
更新日:2018/04/07

Tags:: Sublime Text 3 初期設定

Categories:: プログラミング

必須設定

なにはともあれ Sublime Text 3 をダウンロード

Package Control をインストール
[Ctrl] + [`] キーを押下
もしくは
メニューバー View / Show Console
で、コンソールが立ち上がります。
コンソールにここ]の中身を丸ごとコピペしてEnterを押下。
日本語にしよう
1. [Ctrl] + [Shift] + [P]でコンソールが立ち上げます
2. Package Control: Install Packageを入力
3. Japanizeを入力
4. タブが開くので、そこに記載された内容の通りにやれば完了
  ※補足※
  1. C:\Users\ユーザー名\AppData\Roaming\Sublime Text 3\Packages\Japanize
    にインストールされている*.jpファイルを、
    C:\Users\ユーザー名\AppData\Roaming\Sublime Text 3\Packages\Default
    にコピーします。
  2. Defaultフォルダにコピーしたファイルの拡張子jpを消して、オリジナルのファイルにします。
  3. C:\Users\ユーザー名\AppData\Roaming\Sublime Text 3\Packages\Japanize\Main.sublime-menu（.jpが付かない方）を、
    C:\Users\ユーザー名\AppData\Roaming\Sublime Text 3\Packages\User
    にコピーします。
    すると、他のプラグインで上書きされてしまっているトップメニューも日本語化されます。
日本語のインライン化
Package Control: Install PackageからIMESupportと入力してインストール
文字コード対応
Package Control: Install PackageからConvertToUTF8と入力してインストール
Myrica フォントを導入しよう
1. プログラミングフォント Myricaから、MyricaのZIPファイルをダウンロードしてください
  直接ダウンロードする場合はここから
2. 解凍すると、色々なファイルが出てくると思います。
  .ttfファイルをクリックするとフォントのサンプルが開きます。
  気に入ったら、右上のインストールを押下すれば、そのフォントがインストールされます。
全角スペースを可視化
Package Control: Install PackageからTrailingSpacesと入力してインストール
メニューバー 基本設定 > Package Settings > TrailingSpaces > TrailingSpaces > Settings - User
タブが開くので、その中に下記をコピペして完了
```
{
    "trailing_spaces_regexp": "　|[ \t]+",
    "trailing_spaces_highlight_color" : "comment" //コメントの色でハイライト
}
```
外観を諸々変える
Package Control: Install PackageからFlatlandと入力してインストール
サイドバーを表示する
- 開いてるファイルを表示
  メニューバー 表示 > サイドバー > OPEN FILE表示/非表示
- フォルダーを表示
  指定のフォルダーをドラック&ドロップする

まとめ
最後に、メニューバー 基本設定 / 基本設定 - ユーザ
から、下記をコピペすれば基本設定は完了です。

{
    "color_scheme": "Packages/User/SublimeLinter/Monokai Extended (SL).tmTheme", // 外観のカラーテーマ
    "default_encoding": "UTF-8", // デフォルト文字コード
    "draw_indent_guides": true,  // インデントの表示
    "draw_white_space": "all",   // タブやスペースなどの不過視文字を表示
    "fallback_encoding": "UTF-8",// 文字コードが不明なファイルのエンコーディングの文字コード
    "fold_buttons": true,        // 関数等の折りたたみボタン
    "font_face": "MyricaM M",     // 使用フォント
    "font_size": 13,             // フォントサイズ
    "highlight_line": true,      // 現在の選択行をハイライト表示
    "ignored_packages":
    [
        "Vintage"
    ],
    "indent_guide_options":
    [
        "draw_normal",
        "draw_active"
    ],
    "show_encoding": true,       // 文字コードを右下のステータスバーに表示
    "tab_size": 4,               // タブサイズ
    "theme": "Flatland Dark.sublime-theme", // 外観のテーマ
    "translate_tabs_to_spaces": false,      // タブをスペースに変換
    "trim_trailing_white_space_on_save": false, // 保存時に文末にある半角スペースとタブを削除する
    "word_wrap": true // 自動改行
}

インストールしたら便利なプラグイン集

All Autocomplete

標準の自動補完（オートコンプリート）機能を強化し、マッチする文字列があればサジェストする。

DocBlockr

/** と記載しEnterを押下すれば、FunctionについてのDocを生成してくれます。

Alignment

揃えたい行を選択して、[Ctrl] + [Alt] + [a]を押下すれば、「=」の位置を揃えてくれます。
また、メニューバー 基本設定 > Package Settings > Alignment > Settings - User
で開いたタブの中に、下記のように記載すれば、「=」と「:」の位置を揃えてくれます。
JavaScriptとかでもオブジェクト定義の時に使えそう。

{
    "alignment_chars": ["=",":"]
}

Origami

画面を自由に分割出来ます。
例えば、htmlやcssを見ながら javascript を書いたりみたいな事が出来ます。
[Ctrl] + [k]後、

ショートカットキー	内容
[Ctrl] + [上 or 下 or 左 or 右]	指定の箇所にウィンドウが分割されます
[Ctrl] + [Alt] + [上 or 下 or 左 or 右]	現在のウィンドウが指定の箇所に分割されます
[Ctrl] + [Shift] + [上 or 下 or 左 or 右]	指定の箇所に分割されていたウィンドウを閉じます
[Alt] + [上 or 下 or 左 or 右]	現在のウィンドウが分割されたウィンドウにコピーされます。選択した箇所にウィンドウがない場合は、タブが複製されます。
[上 or 下 or 左 or 右]	指定の箇所にウィンドウが分割された後、分割されたウィンドウにフォーカスされます

Origamiを使わない方法
[Alt] + [Shift] + [0]で右と下の3つにウィンドウを分割します。
基本設定 > キーバインド - ユーザ
で開いたタブの中に、下記を記載すれば完了です。

[
    {
        "keys": ["alt+shift+0"], //ショートカットキー
        "command": "set_layout", //コマンド
        "args":
        {
            "rows": [0.0, 0.5, 1.0], //列方向の分割位置
            "cols": [0.0, 0.7, 1.0], //行方向の分割位置
            "cells": [[0,0,1,1], [1,0,2,2], [0,1,1,2]] //画面の構成
        }
    }
]

ちなみに、keys の箇所がショートカットキーとなりますので、ここを別のキーに設定すればショートカットキーが変更できます。
詳細はここへ！

Emmet

Emmetを使えるようになります。
Package Controlからインストールした場合は、一緒に PyV8 というパッケージもインストールされます。

基本設定 > Package Settings > Emmet > Settings - User
で下記を記載すると便利です。

{
    "snippets": {
        "variables": {
            "lang": "ja"
        }
    }
}

チートシート

AutoFileName

プロジェクトフォルダ内のファイル名を補完してくれます。
例えば、htmlのimgタグのsrc指定とかで、画像ファイル名とかを補完してくれます。

SublimeLinter

リアルタイムで構文エラーを表示するためのプラグインです。
このプラグインだけでは意味を為しません。
構文エラーを表示させたい言語のLinterをインストールします。

SublimeLinter-csslint

CSSの構文エラーを行います。
プラグインをインストールした後、gem(Ruby)でさらに下記をインストールする必要があります。
gem install scss_lint

SublimeLinter-contrib-scss-lint

SCSSの構文エラーを行います。
プラグインをインストールした後、Node.jsでさらに下記をインストールする必要があります。
npm install -g csslint

SublimeLinter-jshint

JavaScriptの構文エラーを行います。
プラグインをインストールした後、Node.jsでさらに下記をインストールする必要があります。
npm install -g jshint

SublimeLinter-php

PHPの構文エラーを行います。また環境変数の設定が必要です。
プラグインをインストールした後、Node.jsでさらに下記をインストールする必要があります。
npm install -g phplint

VBScript

VBScriptのシンタックスを追加します

html5

HTML5のコード補完を補強するパッケージです

jQuery

jQueryのコード補完を補強するパッケージです

SCSS

SCSSのシンタックスやSCSSファイルを補完します

Markdown Extended

Markdownのシンタックスを追加します

Monokai Extended

Markdown をシンタックスハイライトするパッケージです

OmniMarkupPreviewer

[Ctrl] + [Alt] + [o]
Markdownをブラウザでプレビューできます。
[Ctrl] + [Alt] + [x]
Markdownを同じディレクトリ内にhtmlファイルとしてエクスポートします。
[Ctrl] + [Alt] + [c]
Markdownをhtmlタグにしたものをクリップボードにコピーします。

View In Browser

作成しているhtmlファイルをブラウザで起動させます。

[Ctrl] + [Alt] + [f]
Firefoxで起動します
[Ctrl] + [Alt] + [i]
IEで起動します
[Ctrl] + [Alt] + [c]
Chromeで起動します
[Ctrl] + [Alt] + [s]
Safariで起動します
[Ctrl] + [Alt] + [v]
デフォルトでFirefoxで起動します。

メニューバー 基本設定 > Package Settings > View In Browser > Settings - User
でデフォルトのブラウザを変更することが出来ます。

{
    "browser": "chrome64"
}

PowerShell

PowerShellをシンタックスハイライトするパッケージです

Inc-Dec-Value

CSS 数値を [Alt] + [上下] で変更出来ます

LiveStyle

CSS / SCSSを書いたら即時でページ反映してくれる
Chromeの拡張ツールと併用する

Sublime Text 3 のプラグインをインストール
Package Control: Install Package > LiveStyle
LiveStyleアプリケーションのインストール
足りてないアプリがあると、ウィンドウが出ますので表示されたアプリをインストールします。
また、LiveStyleアプリケーションは、使用する際は立ち上げておく必要があります。
Chrome拡張機能をインストール
Chromeの右上のメニューバーに新しいアイコンが追加されます。
使用してみる
1. 使用したいサイト上で、ChromeのLiveStyleアイコンをクリックします
2. Enable LiveStyle と書かれた右のON / OFF スイッチをONにします
3. 下にCSSファイルの一覧が出てきますので、変更させたいCSSファイルを選択すると
  今Sublime Text 3で開いているファイルが選択肢として表示されますので、同期させたいファイルを選択します。
4. 同期させたファイル上で、CSSを記載すればリアルタイムで変更したCSSが分かります。
エラーが出た際は、ChromeのLiveStyleアイコンが赤くなります。
アイコンでエラー確認のリンクが出ますので、クリックしてエラー箇所を修正すればOKです。

SFTP

FTP接続をしてサーバー側と同期します。

サイドバーの同期したいフォルダを右クリックし、
SFTP/FTP > Map to Remote を開きます

sftp-config.jsonというファイルが開くので、同期の設定を行います。
※下記の設定は外部に公開は絶対にしないようにして下さい。乗っ取られます。

{
    // The tab key will cycle through the settings when first created
    // Visit http://wbond.net/sublime_packages/sftp/settings for help

    // sftp, ftp or ftps
    "type": "sftp", // プロトコルのタイプ（よく分からないならftpに変更すればOK）

    "save_before_upload": true, // アップロード時に未保存のファイルを保存するか
    "upload_on_save": false, // ファイル保存時に自動で同期するか
    "sync_down_on_open": false,
    "sync_skip_deletes": false,
    "sync_same_age": true,
    "confirm_downloads": false,
    "confirm_sync": true,
    "confirm_overwrite_newer": false,

    "host": "example.com", //サーバーのホスト名
    "user": "username", // FTPのユーザー名
    //"password": "password", // FTPのパスワード（スラッシュを外すと毎回確認されなくなります）
    //"port": "22",

    "remote_path": "/example/path/", // 同期するフォルダのパス（サーバー側）
    "ignore_regexes": [
        "\.sublime-(project|workspace)", "sftp-config(-alt\d?)?\.json",
        "sftp-settings\.json", "/venv/", "\.svn/", "\.hg/", "\.git/",
        "\.bzr", "_darcs", "CVS", "\.DS_Store", "Thumbs\.db", "desktop\.ini"
    ],
    //"file_permissions": "664",
    //"dir_permissions": "775",

    //"extra_list_connections": 0,

    "connect_timeout": 30, // 接続のタイムアウトまでの時間
    //"keepalive": 120,
    //"ftp_passive_mode": true,
    //"ftp_obey_passive_host": false,
    //"ssh_key_file": "~/.ssh/id_rsa",
    //"sftp_flags": ["-F", "/path/to/ssh_config"],

    //"preserve_modification_times": false,
    //"remote_time_offset_in_hours": 0,
    //"remote_encoding": "utf-8",
    //"remote_locale": "C",
    //"allow_config_upload": false,
}

ファイルをサーバーにアップロードする
ファイル(フォルダでも可)を右クリックして、
SFTP/FTP > Upload Folderをクリックすると、
フォルダ内の全ファイルがサーバーにアップロードされます。
ファイル単体をアップロードしたい場合は、
SFTP/FTP > Upload Fileをクリックすると単体でアップロードされます。
変更したファイルを自動でアップロードする
例えばSCSSをビルドした際に、生成されたCSSファイルが自動でアップロードされます。
上記の例で設定をするときは、example.css を右クリックして
SFTP/FTP > Monitor File(Upload on External Save)
を選択すればOKです。

参考

SCSS Snipets

SCSSのスニペット

Compass

Compassがインストールしているのであれば、コンパイルしてくれます。
Compassのインストール
gem install compass

[Ctrl]+[b]で都度コンパイルしなくてもいい方法
（一度Ctrl+bすれば、閉じるまで変更内容を自動でコンパイルしてくれる）
Packagesフォルダ > Compass > build.cmd
Ex)変更前

:build
if not defined fileDir (
    echo [ERROR] config.rb not found.
) else (
    compass build '%fileDir%' --boring
)

Ex)変更後

:build
if not defined fileDir (
    echo [ERROR] config.rb not found.
) else (
    compass watch '%fileDir%' --boring
)

コンパイル後のCSSが文字化ける！？
Packagesフォルダ > Compass > build.cmd
Ex)変更前

setlocal EnableDelayedExpansion
set fileDir=%~f1

Ex)変更後

setlocal EnableDelayedExpansion
set fileDir=%~f1
set RUBYOPT=-EUTF-8

config.rbを作る

require 'compass/import-once/activate'
# Require any additional compass plugins here.

# Set this to the root of your project when deployed:
http_path = "../"
css_dir = "/"
sass_dir = "/scss"
images_dir = "../img"
javascripts_dir = "../js"

# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed

# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false


# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

config.rbがないとCompassは動きません。
cmdで都度作成することも出来ますが、ディレクトリ構成を統一させてconfig.rbを使いまわして置けるようにした方が効率がいいです。
参考

ビルド
SCSSファイルを作成した後、
ツール > ビルドシステム > Compassを選択します。
その後、[Ctrl]+[b]を押下すればCSSファイルが作成されます。
SCSSを開いている間は、上書き保存すればCSSファイルも更新されます。
※SCSSファイルを閉じてしまったら再度[Ctrl]+[b]が必要です。

Compassがインストールされていない場合は、Package Control: Install PackageからSASS Buildをインストールしてください。
その後、ツール > ビルドシステム > SASS
で、[Ctrl]+[b]を押下すればCSSファイルが作成されます。

Git

Sublime Text 3 でGitを使用できます

GitGutter

現在のコードとgitの追加や変更の差分を左側に記号で表示します

SyncedSideBar

サイドバー上の、どのフォルダのどのファイルを開いているか
自動的に展開してくれます。

wpseek.com WordPress Developer Assistant

WordPressで定義されている独自関数も補完してくれます。
オリジナルテーマを作成する人は入れたほうがいいです。

CodeFormatter

PHP、JavaScript、HTML、CSSのインデントなど綺麗にします。

Increment Selection

数値やアルファベットのインクリメントをしてくれます。

例えば下記の数字を連番にしたい場合
$1,$1,$1,$1,$1,$1,$1,$1,$1,$1,$1,$1,$1,$1,$1,$1,

数字の一つを選択して、[Ctrl] + [d]をすると同じ数字が選択されます。
※マウスでやってもいいけど、無駄に時間食います
[Ctrl] + [Shift] + [p]でパレットを表示させて、
Increment Selectionを選択すれば連番になります。

アルファベットも出来るので、汎用性高いかも。

Color Highlighter

CSSの色をコード上で表示してくれます。

選択箇所の変更

基本設定 > 基本設定 – ユーザ
“color_scheme”: “Packages/User/SublimeLinter/Flatland Monokai (SL).tmTheme”
↑
この一番最後の箇所にどのテーマを設定しているか調べる。
例えば、Flatland Monokai (SL).tmThemeであれば
フォルダの Sublime Text 3 > Packages > User > SublimeLinter
から、Flatland Monokai (SL).tmThemeファイルを開く。

選択行
lineHighlight
選択箇所
selection
淡い群青色
#005493

別環境に移項させる方法

別環境に移項させる際コピペすれば楽に再設定出来る。
基本設定 > Package Setting > Package Control > Setting - User
基本設定 > キーバインド - ユーザ
基本設定 > 基本設定 - ユーザ

パッケージコントロールの設定

{
    "bootstrapped": true,
    "in_process_packages":
    [
    ],
    "installed_packages":
    [
        "A File Icon",
        "Alignment",
        "All Autocomplete",
        "AutoFileName",
        "CodeFormatter",
        "Color Highlighter",
        "Compass",
        "ConvertJaZenHan",
        "ConvertToUTF8",
        "DocBlockr",
        "Emmet",
        "Git",
        "GitGutter",
        "HTML-CSS-JS Prettify",
        "HTML5",
        "IMESupport",
        "Inc-Dec-Value",
        "Increment Selection",
        "Japanize",
        "jQuery",
        "LiveStyle",
        "Markdown Extended",
        "Monokai Extended",
        "OmniMarkupPreviewer",
        "Origami",
        "Package Control",
        "PowerShell",
        "SCSS",
        "SCSS Snippets",
        "SFTP",
        "SublimeLinter",
        "SublimeLinter-csslint",
        "SublimeLinter-jshint",
        "SublimeLinter-php",
        "SyncedSideBar",
        "Theme - Flatland",
        "TrailingSpaces",
        "VBScript",
        "View In Browser",
        "wpseek WordPress Developer Assistant"
    ]
}

Baccho Log

Sublime Text 3 初期設定

必須設定

インストールしたら便利なプラグイン集

All Autocomplete

DocBlockr

Alignment

Origami

Emmet

AutoFileName

SublimeLinter

SublimeLinter-csslint

SublimeLinter-contrib-scss-lint

SublimeLinter-jshint

SublimeLinter-php

VBScript

html5

jQuery

SCSS

Markdown Extended

Monokai Extended

OmniMarkupPreviewer

View In Browser

PowerShell

Inc-Dec-Value

LiveStyle

SFTP

SCSS Snipets

Compass

Git

GitGutter

SyncedSideBar

wpseek.com WordPress Developer Assistant

CodeFormatter

Increment Selection

Color Highlighter

選択箇所の変更

別環境に移項させる方法

パッケージコントロールの設定

コメントするコメントをキャンセル

Sublime Text 3 初期設定

必須設定

インストールしたら便利なプラグイン集

All Autocomplete

DocBlockr

Alignment

Origami

Emmet

AutoFileName

SublimeLinter

SublimeLinter-csslint

SublimeLinter-contrib-scss-lint

SublimeLinter-jshint

SublimeLinter-php

VBScript

html5

jQuery

SCSS

Markdown Extended

Monokai Extended

OmniMarkupPreviewer

View In Browser

PowerShell

Inc-Dec-Value

LiveStyle

SFTP

SCSS Snipets

Compass

Git

GitGutter

SyncedSideBar

wpseek.com WordPress Developer Assistant

CodeFormatter

Increment Selection

Color Highlighter

選択箇所の変更

別環境に移項させる方法

パッケージコントロールの設定

コメントする コメントをキャンセル

コメントするコメントをキャンセル