俺の食べログ

「グルメ」「仕事」「プログラミング」「趣味」について書いてます。

上司からオススメされた「Brackets」の拡張機能一覧

f:id:buried_treasure:20170615122530j:plain

上司からオススメされた「Brackets」(ブラケッツ)プラグイン一覧

テキストエディターは無料の「Brackets」を使っています。

今回は「Brackets」の拡張機能について紹介します。

これは上司からオススメされたモノです。

 

初心者のエンジニアなので、エディターの違いとかって、

あまりわかっていない。

 

独学でプログラミングを勉強していると、

誰もテキストエディターについてアドバイスをしてくれないので、

そんな人のために、この記事を書きました。

 

これはエンジニアを10年以上経験している上司からオススメされた拡張機能です。

必要のないプラグインは省いているそうです。

 

僕が今まで使ったことある無料のテキストエティター

今まではドットイントールで紹介されていた「atom」をメインエディターとして使っていました。

 

そのほかには「mi」を使った事があります。

どのエディターが良いとか、あんまりわかっていない状態です。

「mi」は初心者用の教科書で紹介されていたので、使いました。

 

学習するその時々で紹介されたものをとりあえず、使っている状態です。

 

エンジニアとして会社に勤めるようになり、「Brackets」(ブラケッツ)を使い始める

「atom」と比較して、使い心地の違いはわかっていない。

ただ、オススメされたので、それを使っている。

 

「Brackets」はここからダウンロードできます。

「Brackets」のダウンロード&インストール

brackets.io

 

Brackets(ブラケッツ)の拡張機能のインストール方法

Bracketsでは「拡張機能マネージャー」を利用して、

Bracketsの利用時に作業効率を上げられる便利な拡張機能(=プラグイン、エクステンション)をインストールすることができます。

 

拡張機能マネージャーのアクセス方法

下記の2つの方法でアクセスできます。

・Bracketsのメニューの「ファイル」 > 「拡張機能マネージャー」

・下の図のように赤い枠で囲っているアイコンから起動する事もできます。

f:id:buried_treasure:20170615122613j:plain

 

「拡張機能マネージャー」で拡張機能をインストールするには、

右上にある検索窓から、

自分の欲しい拡張機能名を検索して、

その結果を一覧から「インストール」をクリックすれば、インストール完了です。

拡張機能によってはBracketsを再起動する必要があるものもあります。

インストールしてみて、上手く動いていないなぁと感じたら一度再起動してみると良いかもしれません。

 

上司からオススメされた「Brackets」プラグイン一覧

拡張機能名を記載するので、

コピーアンドペーストで検索窓に入れてインストールしてみてください。

 

Shizimily Multiencoding for Brackets

Bracketsは基本UTF-8のみ対応するため、Shift-JIS、EUC-JPにも対応できるようにしてくれる拡張機能です。

仕事の案件によってはShift-JIS、EUC-JPの案件があったりするので、対応できるようにしておくと良いでしょう。

 

Add HTML Template

HTMLファイルのひな形を作成してくれます。

これ超便利。

 

Brackets File Icons

htmlやJavaScriptなど、拡張子ごとのアイコンがつきます。

これがあると、パッと見て、何のファイルなのかわかりやすくなります。

 

Tabs - Custom Working

開いているファイルを上部にタブ表示してくれます。

 

Highlight Multibyte Symbols

全角英数字・記号をハイライトします。 

 

Indent Guides

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

 

Paste and Indent

ペーストしたコードを貼り付ける時に、自動的に正しくインデントしてくれます。 

 

Whitespace Normalizer

ファイル保存時に、不要なインデントを削除してくれます。

不要なインデントをいちいち消す必要がないので便利です。

 

Overscroll

エディターの最終行よりさらに下方までスクロールできるようになります。

 

Brackets Css Color Preview

色指定をしている行の左側に、実際の色を表示してくれます。

カラーコードとか暗記していないので、すぐに色が確認できるのは嬉しい。

 

colorHints

ファイル内で一度使用した色指定をコードヒントとして表示してくれます。

同じ色って何度も使ったりするので、便利です。

 

Various improvements

Bracketsに以下の便利な機能を追加する拡張機能です。

・プロジェクト内にあるファイルを検索

ファイルの更新日とサイズを表示

ファイルの置き場所を表示

ファイルツリー内のサブフォルダーの展開をすべて折りたたむ

 

Todo

プロジェクト・ファイル単位でTodo管理ができるようになります。

何をするべきだったか忘れないようにメモ代わりに使うことができます。

 

Unused Files

プロジェクト内で使用していない以下のファイルタイプを検出します。

 

PNG, JPG, JPEG, GIF, SVG, BMP, ICO, JS, CSS in files : HTML, HTM, CSS, PHP, JS, ASPX, ASCX, CSHTML, LESS, SCSS, SASS, JSON, MD

 

JSを使って動的に呼び出すファイルなどは対処外になるので、検出結果に含まれる可能性もあります。

 

拡張機能は以上になります。

別の拡張機能をオススメされた場合は随時更新していこうと思います。

 

エンジニアとして就職して、人によって色々とエディターにはこだわりがことを知りました。

僕自身、色々なエディターを使ってみて、オススメできるものを紹介したいと思っています。

また良いものが見つかったらブログで紹介できたらと思います。