Skip to content

Instantly share code, notes, and snippets.

@fjm

fjm/brackets-setup.md

Last active June 10, 2020 00:34
Show Gist options
  • Save fjm/6209c6051b5aa34a4c694802bd2a5fc4 to your computer and use it in GitHub Desktop.
Save fjm/6209c6051b5aa34a4c694802bd2a5fc4 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
brackets-setup.md

Brackets.app

Webによる、Webのための次世代エディタ Brackets自身がHTML・CSS・Javascriptで出来ており、まさに「Webによる、Webのためのエディタ」と言えます。

http://brackets.io

更新

  • 一度bracketsを起動して、「ヘルプ」->「更新をチェックする」で更新
  • 「ファイル」->「拡張機能マネージャー」を選択し、インストール済みプラグインを更新

追加

以下それぞれのプラグインを「ファイル」 > 「拡張機能マネージャー」> 「入手可能」から以下の拡張をインストールします。

Display Shortcuts

開いてるファイルが上部にタブ表示されます

Brackets CSS Class Code hint (Root Path OK)

cssのクラス名補完

emmet

htmlタグやcssのプロパティを補完します

Paste and Indent

ペーストしたコードを、前後の構造に合わせて自動的に正しくインデントします。

Brackets File Icons

screen 2018-02-11 at 17 02 00

ファイルツリーや他エクステンションで拡張したタブに拡張子ごとのアイコンを表示してくれます。これにより。パッと見で何のファイルか分かりやすくなります。

Brackets Outline List

screen 2018-02-11 at 17 03 59

ファイルの構造をアウトライン表示してくれます。 対応ファイルもJavaScript、CoffeeScript、CSS、SCSS、LESS、XML、HTML、SVG、Markdown、PHPと多様で、とても便利です。

Beautify

JavaScript、HTML、CSSを見やすいよう整形してくれます。minファイル等を復元・解析する際に重宝します。 対象範囲を選択し、ショートカット（Mac:Cmd+Shift+L, Win:Ctrl+Shift+L）または編集→Beautifyで実行出来ます。

Indent Guides

screen 2018-02-11 at 17 04 34

インデントを表示してくれます。

Color Highlighter

screen 2018-02-11 at 17 05 56

CSSの色指定に色をつける

CSSLint

CSSLintの結果を保存時にリアルタイムに表示してくれます。

Interactive Linter

screen 2018-02-11 at 17 07 33

各種lint/hint系の結果をリアルタイムに表示してくれます。

Reference

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment