MANDY

新着記事
ブランド
カテゴリー
タグ

Sublime Text3 おすすめプラグイン10選

  • カテゴリー:
  • NEWS

どんな職においても自分の仕事環境は大切であり、重要なもの。もちろんWEB屋やプログラマーにとっても同じこと。どんなエディタを使うのかもその一つ。数あるエディタのなかで今回はSublime Text3を使っている人に入れておけば作業効率が上がり実用性のあるSublime Text3のプラグインを紹介します。

まずはPackage Controlを入れよう

プラグインを入れる方法は、GitHubなどからダウンロードしたファイルから入れる方法と、Package Controlからプラグインを選択して入れる方法がありますが、明らかに後者のほうが早くて簡単なので色々なプラグインをインストールする前にPackage Controlを入れることをおすすめします。

Package Controlの入れ方

Sublime Text 3 Package Control

  1. 上記のリンクを開き、SUBLIME TEXT 3と書いてるタブ内をコピー
  2. Sublime text 3を開き「View > Show Console」の順にクリック
  3. 下にでるコンソール内に①でコピーしたコードをペーストしてEnter

以上でPackage Controlのインストールは完了です。左下に[ = ]イコールのようなマークが出ると思いますが、インストール中を意味しているので気にしなくて大丈夫です。

 

以下で紹介するプラグインのインストール方法の流れ

Windows
[Ctrl + Shift + P] → [Package Control: Install Package] → [インストールしたいプラグインの名前]

Mac
[Command + Shift + P] → [Package Control: Install Package] → [インストールしたいプラグインの名前]

 

間違えたり、いらなくなったプラグインの削除の方法

Windows
[Ctrl + Shift + P] → [Package Control: Remove Package] → [削除したいプラグインをクリック]

Mac
[Command + Shift + P] → [Package Control: Remove Package] → [削除したいプラグインをクリック]

おすすめプラグイン

プラグインといっても、Sublime Textは拡張性に優れているため数多くのプラグインが存在します。そのため今回は冒頭でも伝えた通り作業効率が上がり、実用性のあるプラグインに絞って紹介していきます。

メニューを日本語化してくれる 「Japanize」

このプラグインはSublime Text 3の上にあるメニューを全て日本語化してくれるプラグインです。
プログラミングを勉強している人なら英語ができる人が多いと思いますが、それでも私たちは日本人。日本語の方が直感的であることも確かです。英語がとにかく苦手!な方や、プログラミング初心者の方におすすめのプラグインです。まず入れてみて慣れてきたら英語に戻すというのもアリだと思います。

インストールの仕方

Windows
[Ctrl + Shift + P] → [Package Control: Install Package] → [Japanize]

Mac
[Command + Shift + P] → [Package Control: Install Package] → [Japanize]

ほとんどのプラグインはクリックしたら終わりなのですが、Japanizeは少し面倒なことにこれで終わりではなく、インストールが終わると概要ファイル(README.md)が開くのでそこに書かれている手順にそって日本語化をしてください。

日本語をインライン入力にしてくれる 「IMESupport」

Windowsの場合Sublime textで日本語を打つと入力文字がそこらへんに表示されてしまい邪魔臭い・・・。なんて経験をした方は多いと思います。

そんな人におすすめなのが、このIMESupport。このプラグインを入れると入力文字があちこちに表示されなくなり、より直感的に日本語入力をすることができるようになります。

インストールの仕方

Windows
[Ctrl + Shift + P] → [Package Control: Install Package] → [IMESupport]

Mac
[Command + Shift + P] → [Package Control: Install Package] → [IMESupport]

画像のパスを補完してくれる 「AutoFileName」

AutoFileNameは<img src”” >まで入力すると同じ階層にあるファイルを選択することができるようになるプラグインです。いちいちファイルを開いて画像の名前を確認して入力。という作業が無くなるのでインストールしておくだけで結構作業が短縮されると思います。

さらに以下のコードをAutoFileNameのSettings-userに記述しておくと、上のgif動画のように選択した画像に自動でwidthとheightが記述されるようになります。

Settings – Userの開き方

[Sublime Text] → [Preferences] → [Package Settiongs] → [AutoFileName] → [Settings – User]

{
	"afn_insert_width_first": true, //AutoFileNameで画像を挿入時にWidthを最初にする
	"afn_template_languages": true, //AutoFileNameでwidhtとheightを挿入する
	"ignored_packages":
	[
	"Vintage"
	],
}

インストールの仕方

Windows
[Ctrl + Shift + P] → [Package Control: Install Package] → [AutoFileName]

Mac
[Command + Shift + P] → [Package Control: Install Package] → [AutoFileName]

コーディングを爆速にできる 「Emmet」

EmmetはEmmet独自のコードを記述した後にTabキーを押すことで記述するコード量を短縮できるようになるプラグインです。CSSやHTMLをガリガリ毎日書いていくようなコーダーの方にはすごく重宝するプラグインです。

Emmetを使ってHTMLを書いた例

Emmetを使ってCSSを書いた例

また、Emmetにはたくさんの独自コードがあるのでEmmetチートシートを見て普段使いそうなものだけ覚えておくといいと思います。

Emmetチートシートはこちらから

インストールの仕方

Windows
[Ctrl + Shift + P] → [Package Control: Install Package] → [Emmet]

Mac
[Command + Shift + P] → [Package Control: Install Package] → [Emmet]

リアルタイムでエラーチェックしてくれる 「Sublime Linter」

Sublime Text 3をIDE(統合開発環境)のようにしてくれるのがSublime Linterです。このプラグインはHTMLやPHPなどのコードを書いている途中で構文などに誤りがあると、リアルタイムで誤りのある部分にエラー表示をしてくれます。今までは長時間かけて間違い箇所を探していたのもこのプラグインがあれば、そんな無駄な時間がなくなり、違うことに時間を使うことができるようになります。

Sublime LinterはPHPやHTML、CSS、JSなど様々なlintがあるのですが、このプラグイン単体だけでは機能しないので注意が必要です。

インストールの仕方

Windows
[Ctrl + Shift + P] → [Package Control: Install Package] → [Sublime Linter]

Mac
[Command + Shift + P] → [Package Control: Install Package] → [Sublime Linter]

 

設定方法

PHP

  1. ターミナル(windowsならコマンドプロンプト)を開く
  2. ターミナルに npm install -g phplint と入力してインストール開始
  3. Sublime text3を開き [Shift + Ctrl + P] → [Package Control: Install Package」 → [Sublime Linter-phplint] または [Sublime Linter-php]をインストール

以上の通りで使えると思いますが、もしダメな場合はphp.exeのパスを環境変数に設定してください。PHPの場合はコマンドプロンプトでwhere phpと入力するとでます。環境変数の場所はwindowsの場合[コントロールパネル] → [システム] → [システムの詳細設定] → [環境変数(N)] → [システム環境変数(S)] → [Path] → [編集] → [新規]から追加できます。

PHPの場所がxamppの場合、[C:¥xampp¥php¥php.exe]といった感じになります。

CSS

  1. Node.jsをダウンロードして展開する
  2. ターミナル(windowsならコマンドプロンプト)を開く
  3. ターミナルに npm install -g csslint と入力してインストール開始
  4. 次にSublime Text3を開き [Shift + Ctrl + P] → [Package Control: Install Package] → [Sublime Linter-csslint]をインストール
  5. [Sublime Text] → [Preferences] → [Package Setting] → [SublimeLinter – User]を開き
    "paths": {
                "linux": [],
                "osx": [],
                "windows": []
            },

    と書いてあるところにCsslintのパスを指定します。私のWindowsの場合、C:\Users\ユーザー名\AppData\Roaming\npmにありました。このパスを入力します。*設定によっては私のパスとは違う場所にある可能性もあります。

    "paths": {
                "linux": [],
                "osx": [],
                "windows": [
                    "C\\Users\\\u9f8d\u592a\u6717\\AppData\\Roaming\\npm"
                ]
            },

以上でSublime LinterのCsslintとPHPlintは使えるようになっていると思います。

コード補完を強化してくれる 「ALL Autocomplete」

Sublime Text3には元から補完機能がついていますが、ALL Autocompleteを使うと自分で入力した関数なども自動で補完してくれたりと元からある補完機能をさらに強化してくれるプラグインです。

インストールの仕方

Windows
[Ctrl + Shift + P] → [Package Control: Install Package] → [ALL Autocomplete]

Mac
[Command + Shift + P] → [Package Control: Install Package] → [ALL Autocomplete]

WordPressをいじる人におすすめ 「wpseek.com WordPress Developer Assistant」

WordPressの関数で、あれ・・・なんだっけ・・・となったことがある人は入れておくと助かるかもしれません。

このプラグインも補完系と一緒ですが、WordPressの独自関数を補完してくれるプラグインです。

インストールの仕方

Windows
[Ctrl + Shift + P] → [Package Control: Install Package] → [wpseek.com WordPress Developer Assistant]

Mac
[Command + Shift + P] → [Package Control: Install Package] → [wpseek.com WordPress Developer Assistant]

CSSのcolorを視覚的にしてくれる 「Color Highlighter」

CSSのプロパティ値をクリックすると指定した色を視覚的に見ることができるプラグインです。カラーコードだけだとどんな色を設定したかわかりづらいですが、Color Highlighterを入れておくとどこの部分に何色を使ったかが一目でわかるようになります。

インストールの仕方

Windows
[Ctrl + Shift + P] → [Package Control: Install Package] → [Color Highlighter]

Mac
[Command + Shift + P] → [Package Control: Install Package] → [Color Highlighter]

HTMLから対応したCSSに飛んでくれる 「Goto-CSS-Declartion」

HTMLに対して指定したCSSをいちいちCSSファイルから探していたのを無くしてくれる夢のようなプラグインです。

例えば<div class=”example”>と記述されているところを右クリック → Go To Declaration または、ショートカットキーを押すとクラスexampleに設定しているCSSのところまで飛んでくれる優れものです。

インストールの仕方

Windows
[Ctrl + Shift + P] → [Package Control: Install Package] → [Goto-CSS-Declartion]

Mac
[Command + Shift + P] → [Package Control: Install Package] → [Goto-CSS-Declartion]

FTPが使えるようになる 「SFTP」

毎回FFFTPやFileZillaなどFTPソフトを使ってファイルを更新するのは面倒!という方にはもってこいなプラグインがこのSFTP。DreamweaverのようにテキストエディタからFTPを更新したいなら使うしかありません。

設定方法を説明しようと思いましたが、「ideaHacker」こちらにSFTPの設定方法が詳しく載っていたのでこちらを参考にして設定してください。

 

以上でおすすめプラグイン10選を紹介しましたが、全ていれるのは面倒臭いという方は、EmmetやAutoFileNameを入れておくだけでもコーディングがスムーズになり、今までの作業時間が短縮すると思います。さらに今回紹介したプラグインの他にも、

  • ConvertToUTF8
  • Tag
  • SideBarEnhancements
  • StringEncode

など数多くの素晴らしいプラグインがあるので自分に必要だと思うプラグインをインストールして自分流のSublime Text3を作ってみると面白いと思いますよ!

Dylan