【Sublime Textのおすすめプラグイン】最初に入れておきたい10個の拡張機能

スポンサーリンク

 

この記事でわかること

  • Sublime Textのプラグインの入れ方
  • Sublime Textのおすすめのプラグイン

Sublime Textにはとても豊富なプラグインが存在します。

基本的にプラグインを入れることでSublime Textを自分好みにカスタマイズすることが出来るのです。

 

「プラグインを入れるだけでそんなに使用感とか変わるの?」

プラグインの有能性に気付かない私は最初そう思っていたのです。

しかし、実際にSublime Textにプラグインを入れてみるとそれまで感じていたストレスが解消されコーディングが効率良く、スムーズに行えるようになりました。

数あるプラグインを使いこなし自分だけのSublime Textを作り上げましょう♪

スポンサーリンク

プラグインを取り込むためにPackageControllをインストール

早速プラグインを入れて行こう!!…と思う気持ちは山々なのですが、最初はPackageControll(パッケージコントロール)をインストールします。

Sublime Textにはたくさんのプラグイン(拡張機能)が存在しているのですが、拡張機能をSublime Textに取り組むためには、このPackageControllをインストールする必要があるのです。

 

少しめんどくさい作業になりますが、これを乗り越えるとSublime Textを自分好みにカスタマイズできるので数十分の我慢です٩(ˊᗜˋ*)و

手順1 : 『Sublime Text 3 PackageControll』にアクセス

最初に『Sublime Text 3 PackageControll』にアクセスしましょう。

アクセスしたら、Sublime Text3になっているのを確認してからコードをコピーしてください。

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 PackageControllより引用

一応、上にSublime Text 3 PackageControllのコードを引用していますのでこちらからコピーしても問題ありません。

手順2 : Sublime Textに戻り「View→Show Console」を開く

sublimetext3_packagecontroll_view

  1. Sublime Textに戻りメニューにある『View』を開く
  2. Viewのなかにある『Show Console』をクリック

sublimetext3_packagecontroll_view_001
上記の手順を行うと上の画像のように白いボックスが現れます。

画像のように白いボックス内に文字が現れない場合はSublime Textを再起動することで解決することがあるので試してみてください。

手順3 : 【手順1】でコピーしたコードをボックス内にペースト

https://www.yamada-konat.com/sublimetext_plugin

手順1でコピーした『Sublime Text 3 PackageControll』のコードをボックス内に貼り付けます。

張り付け場所は画像の赤線の枠内です。

 

貼り付けたら『Enterキー』を押してください。

自動的にPackage   Controlのインストールが開始されます。

手順4 : 無事にインストールが成功しているか確認

  1. 『preferences』を選択
  2. 一番下に『PackageControll』と表示されているのを確認

上記の手順で確認できればインストールは成功です!!

Sublime Textの日本語化の記事はこちら
Sublime Textのインストール手順から日本語化までを画像付きで分かりやすく紹介しています
関連記事≫≫≫https://www.yamada-konat.com/sublimetext
山田の自由研究

Sublime TextはWeb関係者から絶大な人気を誇るテキストエディタです。しかし、ダウンロード時では英語表記のため…

では次はお待ちかねのSublime Textのおすすめのプラグインです。

スポンサーリンク

Sublime Textのおすすめしたい10個のプラグイン

Sublime TextのPackageControllをインストールした皆さんお疲れ様です。

プラグインを取り込むための下準備を終えたところで私がおすすめするSublime Textの10個のプラグインを紹介したいと思います。

 

プラグインを入れるときは「Ctrl(Command)+ Shift + p」でPackageControllを起動し上部の入力欄にPackage Control: Install Packageと入力してあげてください。

すると、候補に候補に『Package Control: Install Package』と出てくるのでそれをクリックorEnterキーで確定。

Install Package

その後、自分が入れたいプラグインの名前を入力します。

ブラウザーチェック時に活躍するプラグイン『View In Browser』

Sublime Textのインストールが完了したら一番最初に入れておきたいプラグイン『View In Browser』

ブラウザーチェックのために、いちいちフォルダーからファイルを開いくのってめちゃくちゃしんどいんですよね…(;^ω^)

それを簡単にしてくれるプラグインが『View In Browser』なのです。

 

設定は簡単。

Sublime Textの上部メニューから「基本設定→キーバインド」の順で開いたウィンドウに下のコードをコピペしてみてください。

Sublime Text_Key Bindings_01

[
{ “keys”: [ “ctrl+shift+v” ], “command”: “view_in_browser”, “args”: { “browser”: “chrome” } },
{ “keys”: [ “ctrl+shift+f” ], “command”: “view_in_browser”, “args”: { “browser”: “firefox” } },
{ “keys”: [ “ctrl+shift+i” ], “command”: “view_in_browser”, “args”: { “browser”: “iexplore” } },
{ “keys”: [ “ctrl+shift+s” ], “command”: “view_in_browser”, “args”: { “browser”: “safari” } }
]

張り付けて保存までしたら…

  • 「Ctrl+Shift+V」で”chrome”
  • 「Ctrl+Shift+F」で”firefox”
  • 「Ctrl+Shift+I」で”iexplore”
  • 「Ctrl+Shift+S」で”safar”

という感じでオリジナルのショートカットキーが使えるようになっているはずです。

別のショートカットキーにしたい場合は【”keys”:[“ここに好きなコマンドを入力”]】。みたいな感じで自分に合ったコマンドを設定しましょう(^^♪

タグなどの開始、終了を見やすくするプラグイン『BracketHighlighter』

「CSSの{}」や「HTMLの<>、” ”」などのカッコ類を見やすくハイライトしてくれるプラグイン。

タグなどがきっちり閉じられていなければその部分はハイライトされない…つまりタグなどの閉じ忘れ防止に最適なプラグインなどです!!

 

さらに、設定で色の強弱を設定出来たりするのでぜひ色々試してみてください。

私はデフォルトで十分と感じているので設定は触ってません!(^^)!

行末スペースと全角スペースをハイライトしてくれるプラグイン『TrailingSpaces』

意外とチェックし忘れてしまいがちな行末のスペースをハイライトしてくれます。

さらに、少し設定をしてあげるとファイル内すべての全角スペースもハイライトしてくれるのです。

{ “trailing_spaces_regexp”: “ |[ \t]+” }

設定方法は上記のコードを「基本設定→Package Settings→TrailingSpaces→Settings – User」に張り付けて保存するだけ。

自動でバックアップを取ってくれるプラグイン『Local History』

「あ、編集中のコードファイル消しちゃったΣ( ̄Д ̄;)がーんっ!」なんてことが過去にありまして…( ;∀;)

こんな悲しすぎる失敗を未然に防ぐために導入したプラグインです。

 

『Local History』はかなり融通の利くやつでして、ローカルに自動的にバックアップを取ってくれたり、保存期間なんかも設定出来たりします。

ここまで優秀なプラグインです。今は必要じゃないと思っても、とりあえずインストールすることをおすすめします。

スペースを自動消去するプラグイン『TrailingSpaces』

コードや文章の末尾に入っているスペースをハイライト、また、保存時に自動的に消去してくれる優れもの!!

 

…え?地味だって??

確かに地味かもしれませんがコードを綺麗に書きたい人は結構重宝するんですよ(*‘ω‘ *)

視覚的に色を認識できるプラグイン『ColorHighlighter』

CSSなどを編集する人にはとくにおすすめのプラグイン。

カラーコードを打ち込み、エディタ上で視覚的に色を認識できるとかなり便利なんです。

 

しかし、デフォルトの設定ではカラーコード部分をクリックしないと色を判別することができません…

そこで

{
“ha_style”: “Filled”,
}

Sublime Textの上部メニューから「基本設定→Package Setting →Color Highlighter→Setting – User」の手順で上のコードを張り付け&保存すると常時カラーを表示することが出来るのですよ(≧▽≦)

「常時色が出てるのは目がチカチカする」という人もいると思うのであくまでお好みで設定してください。

HTMLやコメントでの日本語入力をお助けプラグイン『IMESupport

Sublime Textのデフォルトの設定では日本語入力をする際に下の画像のよう画面の外に入力されます。

一応、「Enterキー」を押せばちゃんと反応してくれますが、どうしても長時間の作業になると首が疲れる。

 

そこで、このプラグインを導入することによってエディタ上に直接日本語を打ち込めるようにするわけです。

ちなみに、『IMESupport』導入後ではこのようになります。

これで、長期戦も可能に!!

エラーチェックのリアルタイムでしてくれる優秀なプラグイン『Sublime Linter』

CSS、HTML、PHP、JSをかじっている人は絶対に経験したことがある「あれれ?なんで指定したように動いてくれないんだ」現象。

経験したことがない人の方が少数派なのでは?

この『Sublime Linter』というプラグインはこの現象を限りなく減らしてくれる優れもの!!

 

インストールは各言語ごとにする必要があるのが少々手間な所。

でも、それだけでエラーチェックがリアルタイムで出来るのなら仕方がない。

  • CSSのエラーチェック→Sublime Linter-csslint
  • HTMLのエラーチェック→Sublime Linter-html-tidy
  • JSのエラーチェック→Sublime Linter-jshint
  • PHPのエラーチェック→Sublime Linter-php

というような感じになっています。自分が必要なものは最低限インストールしておきましょう。

「HTML5」を補完してくれるプラグイン『HTML5』

えーっと、まあ、名前の通りのプラグインです…。

 

こう書くとかなり地味に見えますが結構、HTML5の補完、ハイライト機能は役に立っています。そう役に立っているんです!!

Sublime Textは、デフォルトでも補完機能を搭載していますが、それを「補強」してくれるプラグイン。

画面分割を快適にしてくれるプラグイン『Origami』

まず、このプラグインを導入すると「Ctrl(command)+k+→(全方向対応)」で画面を分割してくれるショートカットキーが使えるように!!

さらに、画像のような変則3画面分割も可能にしてくれます。

SublimeText_test_003

複数のHTMLファイルにCSSを編集する際には大活躍するプラグインです。

Sublime Textにプラグインを入れて楽しくコーディング

最後までお付き合いいただいたみなさんありがとうございます。

この記事で紹介したプラグインを導入すればデフォルトのSublime Textに比べて格段に効率良く、スムーズにコーディングができるはずです。

 

注意として、プラグインは多ければ良いというものではありません。

プラグインを入れすぎてショートカットキーがごちゃごちゃする。ということに繋がるので、なるべく最低限にすべきです。

 

では、みなさんもSublime Textで快適で楽しいコーディングライフを送ってください!!

プラグインを入れたら次はテーマを
Sublime Textで必要なプラグインを入れたら、より使いやすくするためにテーマも入れておきましょう♪
関連記事≫≫≫【Sublime Text】おすすめしたいテーマを8つ紹介します
山田の自由研究

スポンサーリンク   この記事でわかること Sublime Textのテーマの入れ方 Sublime Textのおすすめ…

SublimeTextのおすすめプラグイン
最新情報をチェックしよう!