LoginSignup
22
25

More than 5 years have passed since last update.

お手軽にWeb開発できるエディタ Brackets

Last updated at Posted at 2014-03-26

ちょっとしたWebアプリを作りたい・・

そんな時は Bracketsがおすすめ!
rapture_20140327005340.png

特徴

  • Windows/Mac/Linux対応 日本語対応
  • HTML, CSS, Javascriptを中心にPHP, node.jsなども開発可能
  • コードを編集すると自動でブラウザの表示も変わる”ライブプレビュー"機能
  • 便利な拡張機能たくさん(拡張の開発もjavascriptで簡単にできるらしい)

他にも何かとすごいらしい
詳しくは公式サイトへGo!

インストール方法

公式サイトからダウンロード>開いてインストールを
すすめていけば入ります! コマンドとか不要です!

実際に開発を始める

1. アプリのフォルダを作って、Bracketsに追加する

brackets02.png


2. HTMLファイルを作る

brackets03.png


3. ライブプレビュー開始

brackets04.png


4. 完了!

brackets06.png

CSSを追加しても、Javascriptを追加しても、
このライブプレビューはちゃんと動きます!

快適お手軽Web開発がはかどりますね~

おすすめ拡張機能

お手軽開発が目標だったので、拡張機能のことはあまり書くつもりなかったのですが、少しだけ紹介します!

■拡張機能を入れる方法

ライブプレビューボタンの下にある拡張機能管理ボタンを押して
以下の画像のとおりにすればOKです。
brackets08.png

■Emmet (Zen-coding)

HTMLをらくらくに書けるようになるものです!
Brackets以外のエディタでもよく使われている印象ですね!

Emmetを使うと・・

div#content>ul>li*3

上のような入力をしてTabキーを押すと・・

<div id="content">
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

このように自動で展開してくれる!

■Interactive Linter

Bracketsには元々Javascriptの文法チェッカーが入っています。
ファイルが保存されたとき、エラー項目が下に表示されますが、具体的にどこか調べるのが少し面倒です。

この拡張機能を入れると、リアルタイムでエラーの場所に
赤線を引いてくれます。便利ですねぇ~

brackets07.png

22
25
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
22
25