adobe Brakets html/css javascript ツール.テキストエディタ

Brakets拡張機能のススメ!!【2013年8月版】

BraketsはAdobeがリリースしているオープンソースのテキストエディタです。 最近、色々なところでEdge codeと共に取り上げられていることが多いようですが、そのシンプルで多彩な機能と同じく注目していくのは拡張機能だと思います。 拡張管理はURLを入力するだけ簡単にインストールすることができます。 その中でもBraketsの個人的オススメ拡張機能を上げてみます。

ちなみに拡張機能はここでリストになっています。

https://github.com/adobe/brackets/wiki/Brackets-Extensions

拡張機能のインストール方法【Brakets28の場合】

ファイル→拡張機能マネージャー→URLからインストール or 【入手可能から選択】blog_01

オススメ拡張機能一覧

とりあえず入れておきたい

  • Emmet(Zen cording)— コーディングスピードをあげるためにすでに定番になっています。Braketsにもすでに対応しています。
  • HTML Templates–　新規でページを作成したい時にHTMLテンプレートを挿入してくれる機能
  • stringconvert-インデントの半角スペースをタブスペースに変えたい! そのときにこの機能の『Convert Spaces to Tabs』で変換することができます。その他、『大文字小文字切り替え』『引用符のシングル・ダブル切り替え』など多数の文字列変換機能がついています。
  • special-html-charas–特殊文字のコードヒントが出せるようになります。

レイアウト調節

  • themes-for-brakets –背景色の色や、文字色を変えるテーマセット
  • Themes–同じく色をテーマだが、テーマ同士の組み合わせができる。
  • Tabs–shift+ctrl+hでサイドバーを隠して、タブレイアウトに変えることができます。画面に集中したい方はいかがでしょうか。

お好みで入れたいもの

  • w3cvalidation— バリデーター
  • Disable AutoClose Tags — 閉じタグの発生するタイミングを変える機能 『</』で閉じタグを出したい方は必須です!!
  • beautify— 選択範囲のコードにインデント整理を行います。（ソースフォーマット）
  • minifier— jsやcssなどの圧縮してminの名前をつけたファイルを作成してくれます。

拡張機能をいれるときの注意点

・Braketsのアップデートが早いため、更新によって使えなくなる機能や、Braketsにデフォルト入るものなどがあります。

・また、あまり入れすぎると、メニューが画面いっぱいに縦長くなります。階層化される日がきっとくるはず!!と信じてます!! blog_02

拡張機能はまだまだあります。

Braketsの拡張機能は進撃の勢いで増えています。その中でも、今回はHTMLコーディングを中心とした拡張機能の紹介でしたが、自分も勉強、調査中ですので、是非皆様お試しあれ!! 

 

現在、ACTZEROではWebデザイナーの方を募集しております!! 

2013/08/20～2013/09/02　の期間限定ですので、募集してみたい!!と方はぜひお待ちしております!

詳細はこちらから!! 

 

関連記事