この記事は Goodpatch Advent Calendar 2015 9日目の記事です。
昨日はProttチームの同僚 @hanamiju の『【OSX】Viewにブラーをかける』でした！
こんにちは。@hasedaです。GoodpatchのProttチームでCS(Customer Success)を担当してます。QiitaでGoodpatchのアドベントカレンダーをやると聞き、初心者の記事もwelcomeということで記事を書いてみました。
この記事では、エディタ初心者がHTML5/CSS3を書く環境を作るまでについて書きます。
#脱メモ帳！のきっかけ
仕事や私用で少しずつHTML/CSSを書く機会ができて、メモ帳から、いわゆる玄人っぽい『テキストエディタ』に昇格しました！ 
同僚の @yoshiko_pg が「HTML5/CSS3モダンコーディング」という本を出版したので、さっそく本に書かれているコードを書き進めてみました。しかし、Macのメモ帳(テキストエディット.app)は自動補完もなく、文法のミスを指摘してくれる機能もないため、第1章を進めるだけで半日以上かかりました。
例えば単語を間違えて margin-buttom: 15px; と書いてCSSが反映されなかったり、書き進めていくうちに閉じタグの </div> が行方不明になったり。。。あっという間に時間が過ぎてしまいました。
こんな調子ではあまりにも非効率なので、HTML5/CSS3を書く環境を作ることにしました。
#Sublime Textとの出会い
[ mac テキストエディタ おすすめ ] とググった記事で、Sublime Textを知りました。
他のエディタも少し見てみたのですが、前述のカーソル複数選択やプラグインが充実しているという記事を見て、Sublime Textを選びました。
#「なんちゃらLinter」というプラグインを導入すれば良いらしい
構文エラーがあった時に、リアルタイムで指摘してくれると嬉しい。
調べてみるとSublime Textで HTML5/CSS3 を効率的に書いていくには、SublimeLinterというプラグインを入れると良いことがわかりました。
以下、手順です。
##1.Package Controlの導入
SublimeLinterプラグインを入れるためには、どうやらPackage Controlが必要らしい。参考にしたのはこのブログ記事。
・Sublime Text - Package Control のインストール
##2.SublimeLinterのインストール
続いて本命のSublimeLinterを入れます。参考にしたのは、Qiitaのこの記事。
・Sublime Text 3 で構文エラーチェックする設定のまとめ
基本プラグインとしてのSublimeLinterを入れると、それぞれの言語でリアルタイムに構文をチェックをしてくれるプラグインを入れることができるようになります！
##3. HTML5のLinterをインストール
Sublime TextでSublimeLinter-html-tidyを入れるのと、ターミナルからtidy-html5を入れます。参考にしたのはQiitaのこの記事。
・SublimeText3でHTML5の構文チェック
補足：途中ターミナルでvimから抜けられなくなり、この記事に助けられました。（ここで
:wqを覚えました）
・覚えておきたいターミナルでのvim/lessの抜け方
##4. CSS3のLinterをインストール
Sublime Textでこの2つのPluginをインストールします。
Package Control: Install Package → CSS3
Package Control: Install Package → SublimeLinter-csslint
をインストールします。
##5. SublimeTextを再起動
SublimeText3を再起動します。完了！ 
以上でひとまず、僕が考える理想のテキストエディタのできあがりです。
文章にするとこれだけなのですが、実はこの環境を作るだけでも、さらに半日かかってしまいました 
#その他のプラグイン
Sublime Textには他にも便利なプラグインがたくさんあります。
・カラーコードって視覚的に表示してくれる Color Highlighter
・Shift-JIS等の日本語ファイルをUTF-8で開いてくれる ConvertToUTF8
などは非常に重宝しています 
#終わりに
以上、エディタ初心者がSublimeTextでHTML5/CSS3を書く環境を作るのに苦労した話でした。
この記事がこれからSublime Textを使う方の参考になったら幸いです。
明日はGoodpatchのiOSエンジニア @HirokiTerashima から、iOSのUIテストについての話をお届けします。お楽しみに！