Bracketsがかなりいい

5334 Views
エディター
Bracketsがかなりいい

パソコンでプログラムを書くようになってから早5年。
、、、そんなに長くねーなとか突っ込まないでください。笑

私はメインで使っている言語として
・HTML
・CSS
・javascript
・PHP
が主なのですが、今の所最強のエディターを見つけて使っているのでご紹介したいと思います。

SNSでシェア♪

スポンサーリンク

目次

今まで使ってきたエディターたち

今まで使ってきたエディターは
・Dreamweaver
・サクラエディタ
・Sublime text
・Brackets ← 今ここ
と言った流れになります

 

初めてコーダーになった時、最初はAdobeのDreamweaver cs5を使っていました。

あの頃はドリちゃん以外エディターがあることを知らなかったのですが、
メモ帳で作った「.htaccess」のBOMが外せないという問題だったかでサクラエディタにしたんです。

初めて入社した会社がWeb系のシステム会社だったこともありサクラエディタで統一していたためその流れに乗っていました。

最初はHTMLやCSSのセクタやプロパティなどのスペルを正しく覚えるためにちょうどいいと思いやっていましたが、1年もやっていればさすがに覚えます笑
そうなると毎回スペルを全て打つのは効率が悪いと思い、Sublime Textに移ることにしました。

初めてSublime Textを使った時は感動しました。
何と言っても入力している内容を予想して補完してくれるからです笑

他のエディターでも補完してくれるのですが、サクラエディタを使っていたので新鮮な感じでした笑

 

そんな中、Adobeが無料で公開しているエディターがあると聞き、すぐに飛びつきました笑

その名もBracketsです。

こいつも他のエディター同様素晴らしい点がいつくもあるのですが、何よりもすごいのが拡張機能（プラグイン）があることです！

これがあるおかげで自分用にカスタマイズができ、すごく使い勝手のいいエディターへと飛躍しちゃいます！！

 

Windows・Mac両方で使えます！

なぜ、こんな記事を書き始めたかというと、拡張機能を自分がパソコンを買い換えた時にすぐにコピペできるようにしたかったからです笑

Bracketsのダウンロードはこちらからできます。

 

拡張機能のインストール方法

インストール完了後、Bracketsを起動すると画面右端か左下端にアイコンが4つほど表示されるかと思います。

その中のレゴブロックみたいなアイコンが拡張機能を検索する画面を表示するためのボタンとなります。

 

オススメの拡張機能

私がオススメする拡張機のは

  • Brackets CSS Class Code hint
  • Brackets Key Remapper
  • colorHints
  • Custom Work
  • EditorConfig
  • HTML Block Selector
  • Interactive Linter
  • JavaScript Globals
  • More CSS Code Hints
  • More HTML5 Code Hints
  • Paste and Indent
  • PHP SmartHints
  • Show Whitespace VS
  • Sidebar Plus
  • Special Html Characters
  • CSSFier（もはやこれなんだっけ？）
  • Beautify
  • Brackets Css Color Preview
  • Brackets File Icons（アイコンはなくてもいいかなーと）
  • Brackets WordPress Functions Hints（WordPressの関数を覚えきれていない人はあったら便利）
  • Brackets WordPress Hooks Hints
  • Emmet
  • Extensions Rating
  • Extract for Brackets (Preview)
  • SASSHints（業務ではSCSSを使ってるから必要なかった）
  • Shizimily Multi-Encoding for Brackets（デフォルトで複数の文字エンコードに対応したそうです）
  • Various improvements

以上になります！

私の経験上、上記内容を上からインストールする時に「JavaScript Globals」をインストールしようとするとエラーになり固まってしまいます。

そのため、「Interactive Linter」のインストールが完了した時点で、一度Bracketsを落として（強制的に落とさないと落ちない）再度開いて続きの内容をインストールするとスムーズにいけると思います。

 

※2018/4/7 追記
Bracketsが少し重たくなってきたので、不要な拡張機能をオフにしてみました！
拡張機能をオフにしたものは取り消し線を引いています。

※2018/5/8 追記
本当に必要な拡張機能だけを残して動作が遅くなりそうなもの、必要ないものは消しました。

 

インストールした機能の設定

私個人がこだわっているコーディングルールとして「タブインデント（スペース4つの幅）」というものがあります。

他には置換のショートカットは「Ctrl(command) + R」という好みがあります。

その設定が可能な拡張機能を上記でインストールしてあるので設定したいと思います。

 

「タブインデント（スペース4つの幅）」にする

適当なhtmlファイルなどをbracketsで開く
　↓
画面上のメニュー内の「編集」→「Whitespace Normalizer」の選択を解除する
　↓
画面右下の「スペース」をクリックして「タブ幅」に変更する
　↓
その右にある数字を「4」になるまでクリックする

以上で設定完了です！

 

置換のショートカットを「Ctrl(command) + R」にする

適当なhtmlファイルなどをbracketsで開く
　↓
画面上のメニュー内の「デバッグ」→「ユーザーキーマップを開く」を選択する
　↓
中身のファイルを書き換える

{
	"documentation": "https://github.com/adobe/brackets/wiki/User-Key-Bindings",
	"overrides": {
		"Cmd-R" : "cmd.replace"	//Macの場合
		//"Ctrl-R":  "cmd.replace"	//Windowsの場合
	}
}

以上です！

 

快適なコーディングライフを！！

SNSでシェア♪

スポンサーリンク