tags

[4]
[1]
[1]

次世代WEB開発用エディタ Bracketsとおすすめ拡張機能

Brackets

アドビが開発している次世代のWEB用テキストエディタです。
http://brackets.io

emmetをインストールするとHTML入力作業が早くなります。

●emmet

http://emmet.io

emmetのHTML定義を日本語にする

extensions/user/brackets-emmet/node_modules/emmet/lib/snippets.json
(/Users/ユーザ名/Library/Application Support/Brackets/extensions/user/brackets-emmet/node_modules/emmet/lib/snippets.json)

冒頭の言語設定( en )のところを以下のように書き換える。

{
 "variables": {
  "lang": "ja",
  "locale": "ja-JP",
  "charset": "UTF-8",
  "indentation": "\t",
  "newline": "\n"
 },

BracketsのEmmetをカスタマイズしてより使いやすくする | 9ineBB

Brackets おすすめの拡張機能( Bracketsのメニュー > ファイル > 拡張機能マネージャー から検索してインストールします。)

●Brackets Tools

複数行のリストを <ul><li> リストに変換したり細かい便利なツール集

●Brackets CSS Class Code hint

HTMLのクラスを設定するときに読み込んであるcssのクラス名をリストで出してくれる。

●Brackets CSSfier

cssファイルにあえてHTMLコードをペーストすると、からのCSSを作成する。(ID,クラス名入力を省略できる。)

<div id="#navbar-main"></div>

 ↓ このコードをペーストすると

#navbar-main {
}

が自動で作られる。

●Paste and Indent

BracketsはAtomとくらべてコードをペーストした時に崩れが生じます。 これを入れるとペースト時に自動インデントしてくれるようになります。

●CDN Finder

CDN(jQueryなど有名なJavaScriptライブラリをホスティングしているさいと)を検索できます。

●Brackets Css Color Preview

BracketsではCSSのカラー設定表記があるときにオンマウスで色をプレビューできますが、 これは行番号のところに常に色を表示します。

●Overscroll

もうちょっと下までスクロール出来るようになります。

●Brackets Outline List

現在開いているファイルの関数やタグや設定を一覧できます。

●Display Shortcuts

「ヘルプ」>「Show Shortcuts」からショートカット一覧を表示します。

●Brackets File Icons

ファイル一覧のところでアイコンを表示できるようになります。 アイコンは

  • Ionicons
  • Devicons から選べます。

●HTML Block Selector

command + shift + T で対応するタグの中身をすべてを選択出来るようになります。

添付ファイル1