ライセススタッフが書くブログ。

エディター「Brackets」のおすすめ拡張機能!!

| Web制作のこと

こんにちはーーー、団長です。

WordPressに目次機能を自動で入れてくれるプラグインを入れました!

これでちょっとは読みやすくなったかな?

随時改善、改修していきますよーーー(^w^)

ちなみに目次のプラグインはこちらです。

Table of Contents Plus

 

 

では本題、今日はBracketsのおすすめ拡張機能の紹介をしていきたいと思います。

 

まずはじめに

エディターとは

Windowsだとメモ帳やTeraPad、Macだとmi(旧名ミミカキエディット)などが有名でしょうか。

Adobe社製品だとDreamweaverがそれにあたりますね。

(僕はDreamweaverも多機能なエディターだと思ってる)

テキストエディタ(英語: text editor)とはコンピュータで文字情報(テキスト)のみのファイル、すなわちテキストファイルを作成、編集、保存するためのソフトウェア(プログラム)である。一般的に、文字情報の入力、削除、コピー、貼り付け、検索、置換、整形などの機能を備えている。Microsoft Windowsのメモ帳や、Mac OS Xのテキストエディット、UNIXのvi、Emacsなど、多くのOSやデスクトップ環境に最初から装備されている。

引用 wikipediaより

 

 

Brackets

エディターはそれぞれ用途にあった機能を備えているモノがあります。

今回はホームページを作るために開発されたエディターBracketsの紹介。

僕は2015年の頭から使い始めたのですが、ようやく慣れてきて改めて使いやすいなーと感じています。

 

インストール

blog150808-1

ではBracketsの公式ホームページからダウンロードして来ましょう!

なんとBracketsの開発はAdobeです、でもオープンソース・フリーウェアなのでどなたでも無料で使えちゃいます!

 

ここがすごい

初期状態でもライブプレビューや、タグの折りたたみ機能、CSSのクイック編集などのコーディングする時に便利な機能がいっぱいあります。ありがてぇ!

 

 

 

 

 

拡張機能

WD Minimap

blog150808-2

ながーいHTMLやCSSをいじいじしてるとたまに迷子になりませんか??

僕よくなるんですよ・・・特に疲れてる時とか。

デフォルトだと普通のスクロールバーなのですが視覚的にどこのエリアを自分が触っているか分かると、こういった事も減った気がします。

 

Emmet

コーディングする時にハチャメチャクチャに便利です。

例えば下記の様に入力して・・・・

tabキーを押すと下記のように展開される。

コーディングが1週間は楽しくなりますよ!

僕はまだ記述の仕方が頭に入っていないので、別途チートシートを参照しながら作業することが多いです。

完全に頭に入ったらもっと楽しくなりそう。

Emmetのチートシート

 

 Brackets Outline List

htmlタグなどの構造が目次状に表示される!

blog150808-3

全体の構造をつかみたい時に超便利です。

さらにタグをクリックすると、該当タグへジャンプできます。

 

 

Bracketsについてはまた詳しく書いた記事を投稿したいと思います。

自分もちょっとまだ勉強中的なところもあるので。




Webを作るのは人。

INFORMATION

raisez(ライセス)に興味を持った方は、是非チェックをしてください。

Webを楽しむのは人。

CONTACT

Web制作、Webビジネスのご相談はお気軽にご連絡ください。

お問い合わせ
TOPへ戻る