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ファイルをいじるだけで色々できるので簡単。
>![custom_brackets.png](https://qiita-image-store.s3.amazonaws.com/0/66308/73b478e4-ed5f-df57-a69c-647086ec7404.png)

>- テーマ：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で一行選択にする場合。

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

###**Emmet**
htmlやcssで短い文章で入力する事が可能になる。
詳しくは[公式のチートシート](https://docs.emmet.io/cheat-sheet/)を確認。

###**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に寄せて細めで使用しています。

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

以下のソースを記述

```json:brackets.json
"fonts.fontSmoothing": "antialiased"
```

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

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

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

```json:brackets.json
"scrollPastEnd": true
```

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

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

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

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


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

>![prepros.png](https://qiita-image-store.s3.amazonaws.com/0/66308/79878c69-9f0e-5cd2-0492-d2a073378d86.png)

sassとかやってみたいけどgulpなどを利用して環境を準備するのが難しい方向けのコンパイルツール。
正直環境を指定されないならこれが一番楽です。
手順はプロジェクトフォルダをドラッグ＆ドロップしてPreprosの中に入れたらおしまい。
とても簡単なのでsassとか触ってみたい方は是非使ってみてください。
>[【Prepros】Compile Sass, Less, Jade, CoffeeScript on Mac, Windows &amp; Linux with Live Browser Reload](https://prepros.io/)
>

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

**sassなどのメタ言語のコンパイル**
>何もしなくても勝手にされます

**ウォッチのオン・オフ**
>Prepros5なら再生アイコンをクリック

**ライブプレビュー機能**
>Prepros6ならブラウザアイコンクリック/Prepros5なら雷アイコンクリック

**モバイル向けライブプレビュー用QRコードの生成**
>モバイルアイコンのクリック

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

**ソースマップ作成**
>cssファイルをクリックすると右側にチェックつけるところでオン/オフの切り替え可能

**画像の軽量化**
>ビルドする際にやってくれます

**コードの軽量化**
>compressed/Compact/Nested/Expandedが選べます

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

**FTP機能**
>設定しておくとボタン一つでアップロード

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

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

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

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