BracketsでHTML書いたらストレスフリーだった話

はじめに

今までAtomで書いていたHTMLをBracketsで書いたら色々良い機能があったという話です。Emmetとライブプレビューの話をします。初心者目線の記事になります。

環境

• OS: Windows10
• Editer: Brackets
• ブラウザ: Google Chrome

Bracketsの導入

こちらからダウンロードしてインストール
特に難しくないし、勝手に日本語化されるのが嬉しいポイント

使い勝手の良い（拡張）機能紹介

• 表示の話
  
  
  開くとこんな感じになっていると思います（Emmetは拡張機能なので、インストールしてすぐだと表示されてないです）
  右にある３つのアイコンが上から「ライブプレビュー」「拡張機能マネージャー」「Beautify」です（Beautifyは拡張機能）
  拡張機能マネージャーから拡張機能の入手・管理を行えます。
  
  

• ライブプレビュー
  ライブプレビューはHTMLを編集するとブラウザに即座に反映する機能です。時々バグを踏みます（f5でだいたい解決する）が、それ以上に一度触ると戻れない魅力があります。
  
  

• 拡張機能紹介

1. Emmet
   何も書いてないindex.htmlで
   　「!」→tabキー
   で雛形が出来て、
   　「div.container」→tabキー
   で<div class="container>と書き込めるのが強い
   
   

2. Beautify
   コードを書いててインデントがめちゃくちゃになったときに使う拡張機能
   「編集」→「保存時にBeautifyする」or「Beautify」で使う
   
   

3. Indent Guides
   インデントに縦線が引かれるもの。Editerの見やすさに関わる。

4. HTML Block Selector
   タグから閉じタグまでを一括で選択する拡張機能

Atomのほうが良かったこと（解決方法募集中）

Atomは行移動を行うときにインデントが自動で補完されるのに対し、Bracketsは補完されない。
Beautifyで空行が増える＆消えない

おわりに

Editerと拡張機能でコーディングの効率が数倍違うので、是非に。（回し者ではないです）