Web制作初心者向けAdobe Bracketsのおすすめ拡張機能など

#Adobe Brackets開発環境

##はじめに
Sublimetext・Brackets・Atom・VScodeなど、一通り環境整えて全てのソフトを利用して制作してみたのですが、一番私の条件にハマり初心者でも利用できそうなのがBracketsでした。

条件として
・見やすいテーマ
・クイックエディット(ピーク)
・コードの補完とemmetが共存できる(候補が優先的に処理され、emmetを使いたくてもできない)
・scssやjsファイルで変数の補完
・Gitが使いやすい
・Gistなどによる設定の同期

だったのですが、BracketsではUIやシンタックステーマ、設定の同期、Gitなどが他のエディタに比べて微妙な感じです。(悪くはないのですが、他のエディタの方が良いです)
ただ、それ以外に至ってはBracketsの方が良いと思ったので拡張機能や設定、テーマなど、おすすめの環境をご紹介したいと思います。
また、不定期でおすすめの拡張機能や設定なども更新していきたいと思います。

##拡張機能
###Autoprefixer
ベンダープレフィックス必要なものに対して自動的に付けてくれる。
※「Auto prefix on save」 にしておくとBracketsがバグる時があるので注意。

###Beautify
コードを綺麗に整えることができる。

ショートカットキー１：Ctrl + Shift + L
ショートカットキー２：Ctrl + Alt + B

###Brackets CSS Class Code hint
入力済みのクラスの候補を出してくれる。

###Brackets Editor Bookmarks
好きなファイルの好きな行をブックマークすることができる。

###Brackets Git
GitをBrackets上で使用することができる。

###Brackets SASS Code Hint
自分で定義したsassの変数の候補を補完してくれる。

###Brackets Outline List
cssやscss、jsなどのセレクタや関数を一覧でサイドバーに表示してくれる。クイックエディットとはまた違う便利さ。

###Brackets Snippets(by edc)
自分でスニペットを作ることができる。
また、作ったスニペットをエクスポート・インポートができるので他のパソコンでも同様に使用することができる。
ただ、使用すると他の候補が打ち消されてしまうのであまりなんでも登録しすぎない方がいいかも。

###Brackets Tree Icons
サイドバーをファイルツリー形式で表示してくれる＆アイコンを表示してくれる。とても便利。

###Custom Work
BracketsのUIが変わる。タブで編集中のファイルを管理できる。
ちなみにこのファイルを自分で編集すると好きなようにUIを変更できる。
以下の画像は自分でCustom Workのファイルを編集したもの。simple.min.cssファイルをいじるだけで色々できるので簡単。

• テーマ：mannari使用
• アイコン：Brackets Tree Icon使用

また、設定は以下の内容にチェックをつけてます。
設定画面は画面右上のバーガーアイコンをクリックすると表示されるメニューの歯車アイコンで開けます。

• 設定
  • moveToolbarToSidebar
  • toggle.sidebar(when closed)
  • autoHideTheTabmenu
  • scrollwheel(horizontal tabs)
  • scrollwheel.step：50
  • Scroll to File

###Color Highlighter
コード上の色を可視化してくれる。わかりやすい。

###CSScomb Brackets plugin
CSSのプロパティの順番を綺麗に統一してくれる。

###Display Shortcuts
ショートカットキーの一覧を表示してくれる。

ヘルプ > Show Shortcut

でショートカットキーの一覧（キーマップ）を表示。
もし、オリジナルでショートカットを作りたい場合は一覧からCommand IDを確認して、

デバック > ユーザーキーマップを開く

から以下のように記述する。
例：以下はMacにて候補を表示させる為にCtrlではなくCmd+Spaceで起動させる場合と、CmdとLで一行選択にする場合。

keymap.json

{
	"documentation": "https://github.com/adobe/brackets/wiki/User-Key-Bindings",
	"overrides": {
		"Cmd-Space": "edit.showCodeHints",
		"Cmd-L": "edit.selectLine"
	}
}

###Emmet
htmlやcssで短い文章で入力する事が可能になる。
詳しくは公式のチートシートを確認。

###Folders First(Mac限定)
Macでサイドバーに表示されるファイルの順番を変更する。フォルダを優先的に表示させてくれる。

###Highlight Multibyte Symbols
全角スペースや全角文字(数字など)がわかりやすくなる。
初期では全角箇所に赤の下線が引かれるが、わかりにくい方は以下の設定をおすすめ。

1. ヘルプ > 拡張機能のフォルダー > user > brackets-highlight-multibyte-symbols > main.less を開く
2. 「.cm-as-multibyte」の宣言ブロック内のborder-bottomをコメントアウトして、自分で好きな装飾を入れる。(自分は背景色を変更しています。)

###jQuinter
cssファイルを編集している際に入力したid・cssの候補を表示してくれる。
もちろんjsファイルを編集している際にも候補が表示される。

###JSHint
Javascriptのコード補完してくれる。

###Minimap
ミニマップを表示してくれる。入ってるけど画面狭くするし邪魔だから自分はたまにだけ使う感じ。

###More HTML5 Code Hints
html5のコードヒントの追加

###Paste and Indent
コピペした際にインデントを自動的に開けてくれる。

###SASSHint
sassの変数のコードヒントの表示してくれる。

###Shizimily Multi-Encoding for Brackets
utf-8以外も制作できるようになる。

###Special Html Characters
特殊文字を簡単に入力できる

###Tab To Space
タブからスペースへ、スペースからタブへ変換してくれる

###Whitespace Normalizer
ファイルの保存時に余計な余白を削除してくれる。
私は以下の設定だけチェックを付けて他は外している。

Whitespace Normalizer
Whitespace Normalizer trim

##クイック編集
クイック編集とはhtmlファイルを開いている際に編集したい要素をクリックしてctrl + E をクリックするとその場にcssファイルが表示され、編集がしやすいようにした機能です。
ただ、それ以外でも色々と使う事ができるので紹介します。

###クイック編集でできる事

1. cssのカラーコード上でクリック→カラーピッカーにて色の変更ができる
2. htmlの属性値の上でクリック→css/sass/scss/lessファイルをインラインで開き、その場で編集
3. htmlの属性値の上でクリック→css/sass/scss/lessファイルを開き、その属性値までジャンプ

3はVScodeのピーク機能と似てます。クリックしたclassやidがその場に表示されますが、そのまま編集するのではなく、左上のファイル名をクリックするとそのファイルまでジャンプできます。

##おすすめテーマ
###mannari
AtomのBase16 Tommorrow Darkを少し優しくした感じのテーマ。

##フォントの太さの設定
Mac版とWin版のフォントを比較するとMac版が太く、Win版が細いです。
私は両方の環境を交互に利用するため、以下の設定でWinに寄せて細めで使用しています。

デバック > 環境設定ファイルを開く

以下のソースを記述

brackets.json

"fonts.fontSmoothing": "antialiased"

##オーバースクロールの設定
多くの記事ではプラグインでオーバースクロールを紹介してますが、実は結構前からデフォルトでこの設定あります。

デバック > 環境設定ファイルを開く

上記を開き、default.jsonの583行目を見ると説明が記載されています。
初期設定だとfalseになっているので、trueに変更しましょう。

brackets.json

"scrollPastEnd": true

##ライブプレビューの設定
ライブプレビューを起動すると、デフォルトでは新しいアカウントのクリーンなChromeが起動しますが、普段使用しているChromeで確認したい場合は以下の設定を行います。

ファイル > 試験ライブプレビューを有効にする

##ショートカットキー
よく利用しているショートカットキーを少しだけ紹介します。
全て確認したい場合は上記で紹介したDisplay Shortcutsをインストールして確認してください。

ショートカットキー	内容
Cmd + D	行の複製(範囲を選択した場合はその部分のみ複製)
Cmd + B	選択範囲と同じ文字を選択(ページ内のみ)
Ctrl + space	入力候補の表示(初期設定ではwinのみ。macの場合は(確か)自分でキーの割り当てが必要。※割り当て方法は上記で紹介したDisplay Shortcutsを参照。
Alt + O	最近開いたタブを表示(閉じたタブも開ける)

##おまけ
###Prepros(プリプロス)

sassとかやってみたいけどgulpなどを利用して環境を準備するのが難しい方向けのコンパイルツール。
正直環境を指定されないならこれが一番楽です。
手順はプロジェクトフォルダをドラッグ＆ドロップしてPreprosの中に入れたらおしまい。
とても簡単なのでsassとか触ってみたい方は是非使ってみてください。

【Prepros】Compile Sass, Less, Jade, CoffeeScript on Mac, Windows & Linux with Live Browser Reload

ざっくりと機能を紹介すると

sassなどのメタ言語のコンパイル

何もしなくても勝手にされます

ウォッチのオン・オフ

Prepros5なら再生アイコンをクリック

ライブプレビュー機能

Prepros6ならブラウザアイコンクリック/Prepros5なら雷アイコンクリック

モバイル向けライブプレビュー用QRコードの生成

モバイルアイコンのクリック

Sync Browser

ライブプレビュー時に全て同時に動かせる

ソースマップ作成

cssファイルをクリックすると右側にチェックつけるところでオン/オフの切り替え可能

画像の軽量化

ビルドする際にやってくれます

コードの軽量化

compressed/Compact/Nested/Expandedが選べます

ビルド機能

プロジェクト内の必要なファイルだけエクスポート。
画像の軽量化なども同時にやってくれます。

FTP機能

設定しておくとボタン一つでアップロード

複数のプロジェクト管理

ドラッグで入れたプロジェクトフォルダをいくつも管理できます。

エラー通知

モニター右下にアイコン付きで通知
アイコンが笑顔の場合は正常に処理できた通知
アイコンがおこの場合はエラーの通知

エラーログ

エラー通知が来た際にどこがエラーなのか記述されている

などなど。
gulpの有名なプラグインは初期で大体入っている感じです。
ちなみに無料でもそのまま使い続ける事はできますが、私は広告が邪魔だったので購入しました。
料金は$29なので、大体3,000円程度です。
(日本語非対応ですが、理解できる程度の英語しか使われていません)