WEB制作

2017-02-09(Thu)

Atsuko

作業効率が格段にアップするコードエディター

こんにちは、カトです。

WEBコーディングを未だに「terapad」を使って手打ちをしていた私ですが、やっと今頃エディターを変えることにしました。

Googleさんで検索して「Atom」とか「Coda」「Subline Text」「Brackets」などなど
いろいろあるんだな~と思いつつ、最終的に「Brakects」を使ってみることに。
brackets

「Brackets」はAdobe社製のオープンソースエディタだそうです。

初めから日本語に対応しているので直感的にわかりやすいというのが決め手です。
私、常に英語の成績3という残念な脳みそですので・・・。

プラグインで自分好みにカスタマイズ

プラグインを入れることで、いろいろな機能を追加できるみたいなので、さっそく便利そうなプラグインを入れてみました。

  • Response for Brackets – original
  • Indent Guides
  • Highlight Multibyte Symbols
  • Extensions Rating
  • eqFTP
  • Emmet
  • colorHints
  • CDN Finder
  • Brackets Tools
  • Brackets Outline List
  • Brackets Css Color Preview
  • Beautify

この中で、使ってみて感動したのが「Emmet」です。

Emmetとは

短いショートコードを入力するだけで、HTMLやcssを効率よく入力できるものです。
(DreamWeaverCCには最初から組み込まれてるらしいです。使ったことがないのでわかりませんが….)

使い方

例えば

ul>li.menu$*10>a

と入力すると

<ul>
	<li class="menu1"><a href=""></a></li>
	<li class="menu2"><a href=""></a></li>
	<li class="menu3"><a href=""></a></li>
	<li class="menu4"><a href=""></a></li>
	<li class="menu5"><a href=""></a></li>
	<li class="menu6"><a href=""></a></li>
	<li class="menu7"><a href=""></a></li>
	<li class="menu8"><a href=""></a></li>
	<li class="menu9"><a href=""></a></li>
	<li class="menu10"><a href=""></a></li>
</ul>

というHTMLが展開されます。

ちょっと複雑に

dl*5>dt>span{$}+p^dd>p+img

このように入力してみると

<dl>
	<dt>
		<span>1</span>
		<p></p>
	</dt>
	<dd>
		<p></p>
		<img src="" alt="">
	</dd>
</dl>
<dl>
	<dt>
		<span>2</span>
		<p></p>
	</dt>
	<dd>
		<p></p>
		<img src="" alt="">
	</dd>
</dl>
<dl>
	<dt>
		<span>3</span>
		<p></p>
	</dt>
	<dd>
		<p></p>
		<img src="" alt="">
	</dd>
</dl>
<dl>
	<dt>
		<span>4</span>
		<p></p>
	</dt>
	<dd>
		<p></p>
		<img src="" alt="">
	</dd>
</dl>
<dl>
	<dt>
		<span>5</span>
		<p></p>
	</dt>
	<dd>
		<p></p>
		<img src="" alt="">
	</dd>
</dl>

このような形で展開されます。

CSSでも

例えば

.emmet{
	w100
	fz16
	bg+
	p10-20
	m30-20-10
}

このように入力すると

.emmet{
	width: 100px;
	font-size: 16px;
	background: #fff url() 0 0 no-repeat;
	padding: 10px 20px;
	margin: 30px 20px 10px;
}

このように展開されるのです。

それから

.emmet{
	-df
	-bxc
}

このように「-」を付けて入力すると

.emmet{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	-webkit-display: flex;
	-moz-display: flex;
	-ms-display: flex;
	-o-display: flex;
	display: flex;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}

ベンダープレフィックス付きで展開されます。

詳しくはこちらのチートシートをご覧ください。

こんな便利なものを今まで知らなかったなんて

Emmetに慣れたら、これなしではコーディングできなくなりそうです!(笑)

皆さんも興味があれば使ってみてください。ではノシ


このブログを書いた人

Atsuko

実はJavascriptとか会社入るまでやったことなかったことは内緒です。
酉年生まれのせいか、話を聞いても三歩あるけば忘れます。

最近書いた記事

関連する記事