エディター

SublimeTextを使うなら、絶対に入れたいプラグイン【emmetは必須】

読者さん
読者さん
SublimeText(サブライムテキスト)の、オススメプラグインってないのかな?

こんな読者さんの問いにお答えします。

本記事ではコーディング歴4年のエンジニアが、使ってみて良かったプラグインのご紹介と、どのようにプラグインをインストールするのかをお伝えしていきます。

現役エンジニアのオススメプラグイン

emmet

必ず入れて欲しいのが、このemmetです。コーディング速度を爆速化してくれます。

通常、開始タグ・閉じタグをいちいち<p></p>←のように手打ちする必要がありますが、emmetを入れると、pタグなら以下のコマンドだけでタグを書いてくれます。

p + tabキー

これだけ打ってみると、なんと<p></p>のように表示してくれます。もちろんpタグ以外にも、h1sectiondivにもHTMLタグになら何でも使えます。

キーボードの打ち方としても、同じように↓です。

打ちたいタグ + tabキー

DOCTYPE宣言も入力補完可能

また、HTMLを書き始めるのにDOCTYPE宣言の構文を書く必要がありますが、それも以下のキーを打つだけで入力補完してくれます。

! + tabキー

これを入力するだけで↓を入力補完してくれます。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	
</body>
</html>

いちいち手書きするまでもなく、便利すぎますね。

ちなみにこれを再現しようと思ったらサブライムテキストのファイルの種類をHTMLにしておく必要がありますのでご注意を!

 

プラグインの入れ方

こんな便利なプラグインですが、どのようにエディターにインストールすれば良いのでしょうか?これも簡単にインストール可能です。

Package Controllを入れていない場合

Package Controllをまだ入れていない場合は、まずこちらをインストールしましょう。

Package Controllは、プラグインをインストールやアンインストールするために、事前に入れておく必要のある、サブライムテキスト内のアプリです

本記事では割愛しますので、こちらの記事などを参考にしてください。

【Sublime Text – Package Control のインストール】
https://webkaru.net/dev/sublime-text-package-control/

 

 

Package Controllを過去入れている場合

まずは、以下のコマンドでPackage Controllを起動します。

⌘(コマンド) + shift + p

 

 

Package Controllパネルが出てきたら、installと打ち、Package Controll: Install Packageを選択しましょう。

 

 

すると、インストール可能なプラグインが一覧で表示されます。膨大な数があるので、スクロールして目的のものに辿りつくのは非効率です。

 

 

欲しいプラグインを検索します(ここではemmetです)。
そして、目的のプラグインをクリックします。

 

 

するとサブライムテキストの下にあるパネルが何やら動作している様子が分かります。

また、一瞬successfullyと表示され、英語で説明が書かれたタブが表示されたらインストール完了です。

 

 

ちゃんとemmetがインストールされているか、サブライムテキスト内で、先ほどのコマンドを打ち込んでみましょう。

! + tabキー

無事にインストールされていれば同じように以下のコードが自動で書き出されるはずです。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	
</body>
</html>

 

プラグインのインストール方法は、今回のemmet以外でも同じようにできますので、必要なプラグインを探してインストールしてみてください。

ABOUT ME
大城ゆう
エンジニア歴4年。 大学卒業後、フィールドエンジニア職に就くがその後のキャリアに不安を感じ、ゼロスキルからWEBデザイナーに転職。 その後WEB制作会社、東証一部上場企業のECサイト担当を経て、現在は自社開発企業のWEBエンジニアとして仕事をしている。
【未経験者歓迎】ゼロスキルからエンジニア転職しませんか?