SublimeText3を10倍便利に使いこなすプラグイン紹介

コードの記述に便利なSublimeText3をもっと便利に使うためのプラグインを紹介します！

もくじ

１、プラグインを使用するためのPackage Control
２、英語だと使いづらい！日本語でSublimeText3を使用する方法
３、コードを記述したらすぐ確認！ブラウザプレビュー「View in Browser」
４、ソースコードを綺麗に整える「HTML-CSS-JS Prettify」
５、行数が増えてももう怖くない！該当するCSSを見つける「Goto-CSS-Declaration」
６、サイドバーのメニューを強化！「SideBar Enhancements」
７、独自のコードでHTMLを展開！「Emmet」
８、面倒なFTPアップロード作業をなくす！「SFTP」
９、ショートカットキーの確認なら「BoundKeys」
１０、プラグインじゃないけど便利なテーマ「DuoTone」

１、プラグインを使用するためのPackage Control

プラグインをインストールするには「Package Control」という管理ツールをインストールしなければいけません。

1-1、SublimeText3を起動する

SublimeText3を起動する

1-2、メニューから”View”→”Show Console”を選択する

Show Consoleを選択する

1-3、Package Controlをインストールする

まずはPackage Controlのサイトにアクセスします。

Package Control

画像の部分に記載されたPythonのコードをコピーします。

Pythonのコードをコピーする

コピーしたコードをSublimeTesct3の画像の部分にペーストします。

コピーしたコードをペーストする

入力バーの上部分に処理が書かれれば、Package Controlのインストールは完了です。

２、英語だと使いづらい！日本語でSublimeText3を使用する方法

SublimeText3を日本語で使用するには「japanize」をインストールして設定をします。

japanizeをインストールするために「Ctrl＋Shift＋P」を押します。

すると、SublimeText3の画面上部にメニューが表示されます。
このメニューから「Pachage Control: Install Package」を選択します。

続いて、フォーム部分に「japanize」と入力し、Enterを押します。

フォーム部分に「japanize」と入力

SublimeText3のテキスト入力画面に画像のようなテキストが表示されます。

テキストの表示

表示された適用手順に沿ってファイルの書き換えなどを行います。

また、ここに表示されているのはWindowsでの適用手順です。
Macの場合は、「ライブラリ」→「Application Support」→「Sublime Text 3」→「Packages」→対象のフォルダと読み替えて適用させてください。

Defaultのフォルダはないことが大半なので、
慌てずに自分で新規作成しましょう。

この設定が全て終われば、メニュー部分が日本語で表示されるようになります。

日本語表示

SublimeText3でのプラグインインストール方法は…

１、「Ctrl＋Shift＋P」を押す
２、画面上部にメニューから「Pachage Control: Install Package」を選択する
３、インストールしたいパッケージ名を入力する

基本的にこの３ステップです。

それでは、便利なプラグインを紹介します。

３、コードを記述したらすぐ確認！ブラウザプレビュー「View in Browser」

コードやテキストを記述して、サーバーにアップして、ブラウザを開いて、確認して…といった一連の作業、すごく面倒だし時間がかかりますよね。

View in Brouserをインストールしておけば、
面倒なブラウザでのプレビューがショートカットキーひとつでできてしまいます！

デフォルトのブラウザ起動ショートカットは以下のようになっています。

ctrl+alt+v/ctrl+alt+f Firefox
ctrl+alt+c Chrome
ctrl+alt+i IE
ctrl+alt+s safari

４、ソースコードを綺麗に整える「HTML-CSS-JS Prettify」

他の人がファイルを触ることもあるし、綺麗なコードを書くぞ！
そう思っていても、集中していたり、調べ物をしながらコードを記述していると、
いつのまにか改行やインデントが抜けていて、
後から見たらめちゃくちゃなコードに…。

そういうときは、「HTML-CSS-JS Prettify」の出番です！

デフォルトのショートカットキーは「command+shif+H」です。

５、行数が増えてももう怖くない！該当するCSSを見つける「Goto-CSS-Declaration」

大規模なサイトになればなるほど、HTMLのセレクタは増えて、
CSSの記述は長くなって、後になって直そうとした箇所のCSSをどこに記述したか分からない、なんてことありますよね。

検索機能で検索して探すこともできますが、
プラグインの「Goto-CSS-Declaration」なら、
HTMLに記述したIDやクラス名でCSSを記述した場所を探し出すことができます。

前提条件として、CSSのファイルも一緒に開いておかなければいけませんので、
そこだけ注意すればとても便利なプラグインですね！

６、サイドバーのメニューを強化！「SideBar Enhancements」

こちらをインストールしなくてもサイドバーは表示されますが、
このプラグインを導入することで、サイドバーを右クリックした時のメニューが拡張されます。

７、独自のコードでHTMLを展開！「Emmet」

HTMLを手打ちしたり、CSSを手打ちしていると簡単なミスで表示が崩れたり、後から見てなんでこんなところ間違えたんだろう？という間違いが発生してしまいます。

「Emmet」なら、Emmetが用意している独自のコードを入力して実行するだけで
綺麗なHTMLやCSSを展開してくれるので、間違いを起こすことがグッと減ります！

たとえば、

指示文

上記は、
”navのあとにulを入れ子にして、listを５つ作成してください”
という指示文です。
ここまで打って、「ctrl ＋ E」を押すと、

HTMLの展開

ミスが減ることはもちろん、
チームで業務をしている場合は、記述の仕方の統一にもなりますね！

８、面倒なFTPアップロード作業をなくす！「SFTP」

つくったファイルをFTPにアップして、ブラウザを開いて、確認してまた修正してFTPにアップして…という作業、結構面倒だったりアップロードする場所を間違えたりして、重大なミスに繋がる危険がありますよね。

SFTPというプラグインを使用すれば、
指定したサーバーに、File Zilaなどを立ち上げずにアップロード作業を行うことができます！

Install PackageのフォームにSFTPと入力して実行します。

次に、サイドバー内にある、サーバーにアップロードしたいファイルを右クリックします。
SFTP/FTPというメニューがあるので、Map to Remoteを選択します。
プロジェクトが開かれるので、
以下のコードを参考に設定をしてみてください。

{
    // 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",　//プロトコルのタイプを選ぶ

    "save_before_upload": true, //アップロードするときに未保存のファイルを保存するならtrue
    "upload_on_save": false, //ファイル保存時に自動で同期するならtrue
    "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,
}

{

// 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",　//プロトコルのタイプを選ぶ

"save_before_upload": true, //アップロードするときに未保存のファイルを保存するならtrue

"upload_on_save": false, //ファイル保存時に自動で同期するならtrue

"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」選択してください。
フォルダ内のファイルが全てサーバーにアップロードされます！

もしこの時点でアップロードがされないようでしたら、
設定ファイルの設定が間違っていないか、もう一度確認してみてください。

９、ショートカットキーの確認なら「BoundKeys」

いろいろとプラグインを紹介してきましたが、
便利なプラグインをたくさん入れたことで、ショートカットキーが被ってしまって、
使いたい機能が正常に起動しなくなったり、
あのプラグインのショートカットキーはなんだったっけ…と忘れてしまうことがあります。

「BoundKeys」はショートカットキーを一覧で確認できる優れもの！
これさえあれば、もうショートカットキーを思い出すために時間を取られなくて済みますね。

BoundKeys

こちらの起動は「shift + F10」。もしこのショートカットキーすら忘れてしまったら、コマンド入力で「List bound keys」と入力しましょう！

１０、プラグインじゃないけど便利なテーマ「DuoTone」

SublimeTextはデフォルトのコードの色が蛍光色なので、
長時間同じ画面を見続けていると、目が痛くなってくることがあります。

「DuoTone」を適用させれば、コード入力の画面が圧倒的に見やすくなります！

Duotone

適用の仕方は、プラグインをインストールするときと同じように「Pachage Control: Install Package」を選択したら、フォームに「Duotone」を入力し、実行します。

実行完了したら、「Preferences → Settings」を選択し、出てきた選択肢の中からお好きなカラーをお選びください。

まとめ

Sublimetext3で使えるプラグインとテーマを紹介しましたが、あなたの扱っている言語によっては、より便利に使うことができるプラグインがまだまだたくさんあります！

いろいろなものを導入して使ってみて、自分好みのSublimeText3にしていきましょう！

執筆者

せりな

DTPデザイナー、雑貨屋さんのスタッフ、一般事務… 散々やりたいことをやり散らかして、WEBデザイナーに落ち着きました。ものを作っている時間が好き。

うさぎと音楽が好きすぎて、うさぎと音楽を無理やりこじつけたお洋服を作ったり、イベント企画をしたりもしています。

この記事を読んだ人はこんな記事も読んでいます

Sassを使って、CSSをもっと簡単にわかりやすく書く！

WordPressのカスタム投稿タイプって結局なにが便利なの？

デザインの作業効率を上げるChrome拡張機能

CHANGEUP!では、エンジニアの転職、
フリーランスの案件紹介を行なっています。

将来の働き方で迷っている方、転職をお考えの方、あなたのエンジニアとしての力を最大限発揮できる場所を提案させていただきます。

CHANGEUP!のサイトを見る

SublimeText3を10倍便利に使いこなすプラグイン紹介

１、プラグインを使用するためのPackage Control

1-1、SublimeText3を起動する

1-2、メニューから”View”→”Show Console”を選択する

1-3、Package Controlをインストールする

２、英語だと使いづらい！日本語でSublimeText3を使用する方法

３、コードを記述したらすぐ確認！ブラウザプレビュー「View in Browser」

４、ソースコードを綺麗に整える「HTML-CSS-JS Prettify」

５、行数が増えてももう怖くない！該当するCSSを見つける「Goto-CSS-Declaration」

６、サイドバーのメニューを強化！「SideBar Enhancements」

７、独自のコードでHTMLを展開！「Emmet」

８、面倒なFTPアップロード作業をなくす！「SFTP」

９、ショートカットキーの確認なら「BoundKeys」

１０、プラグインじゃないけど便利なテーマ「DuoTone」

まとめ

執筆者

この記事を読んだ人はこんな記事も読んでいます

CHANGEUP!では、エンジニアの転職、
フリーランスの案件紹介を行なっています。

注目の企業一覧

株式会社リンクアンドモチベーション

Miroku Webcash International株式会社

株式会社VRAIN Solution

株式会社フィードフォース

カラフル株式会社

Copyright © CHANGEUP!(チェンジアップ) All Rights Reserved.

SublimeText3を10倍便利に使いこなすプラグイン紹介

１、プラグインを使用するためのPackage Control

1-1、SublimeText3を起動する

1-2、メニューから”View”→”Show Console”を選択する

1-3、Package Controlをインストールする

２、英語だと使いづらい！日本語でSublimeText3を使用する方法

３、コードを記述したらすぐ確認！ブラウザプレビュー「View in Browser」

４、ソースコードを綺麗に整える「HTML-CSS-JS Prettify」

５、行数が増えてももう怖くない！該当するCSSを見つける「Goto-CSS-Declaration」

６、サイドバーのメニューを強化！「SideBar Enhancements」

７、独自のコードでHTMLを展開！「Emmet」

８、面倒なFTPアップロード作業をなくす！「SFTP」

９、ショートカットキーの確認なら「BoundKeys」

１０、プラグインじゃないけど便利なテーマ「DuoTone」

まとめ

執筆者

この記事を読んだ人はこんな記事も読んでいます

CHANGEUP!では、エンジニアの転職、フリーランスの案件紹介を行なっています。

注目の企業一覧

株式会社リンクアンドモチベーション

Miroku Webcash International株式会社

株式会社VRAIN Solution

株式会社フィードフォース

カラフル株式会社

Copyright © CHANGEUP!(チェンジアップ) All Rights Reserved.

CHANGEUP!では、エンジニアの転職、
フリーランスの案件紹介を行なっています。