linuxBean14.04(11)Bracketsの拡張機能をインストール

2015-05-05

旧ブログ

t f B! P L

前の関連記事:linuxBean14.04(10)ウィンドウのスナップを有効にする


linuxBean14.04(9)node.jsとBracketsのインストールでインストールしたBracketsの拡張機能をいろいろインストールした記録です。

拡張機能マネージャの「インストール」ボタンが見えない


拡張機能のインストールは、ファイル→拡張機能マネージャーから行います。


インストールしたい拡張機能の右にある「インストール」ボタンをクリックすれば拡張機能のインストールができます。

拡張機能マネージャのウィンドウは動かすことができないので、横の解像度を1091pxまで広げないとこれらのボタンが見えませんでした。

役立ちそうな拡張機能を片っ端からインストールする


拡張機能を紹介しているページを参考に、役立ちそうな拡張機能を片っ端からインストールしていきます。

Brackets おすすめエクステンション集・解説 - Qiita

このページに紹介してある拡張機能を参考にインストールしていきます。

まず最初は拡張機能にまつわる拡張機能をインストールします。

Extensions Rating


拡張機能マネージャを閉じて再度開くと、拡張機能の下にダウンロード実績数などが表示されるようになります。

以下のすべての拡張機能をインストール後OSを再起動すると、ダウンロード数とそのリンク以外表示されなくなってしまいました。

どうしたものか、と思ったらまたOS再起動したら直りました、、、

Shizimily Multi-Encoding for Brackets


ウィンドウの右下でエンコーディングの選択ができるようになります。


Sidebar Plus(アンイストール)


動作に問題はないのですが、表示→サイドバーを隠す、で手動でサイドバーの表示を調節するほうがお好みなのでアンインストール。

Tabs - Custom Working


編集枠の上にタブがつきます。


Brackets File Icons


2つでてきますねえ。どっちをインストールするべきか、、、

詳細情報をみるとBrackets File IconsはBrackets Iconsから波及したもののようなのでBrakects File Iconsの方をインストールしました。


Brackets File Treeと併用するとアイコンと枝が重なってしまいました。


Brackets IconsとBrackets File Treeの併用でも結果は同じでした。

Beautify


編集→Beautify、でコードを整形してくれます。

Brackets Editor Bookmarks


うーん。これはBrackets Editor Bookmarksの方をインストールしました。

ナビゲート→Toggle Bookmarkで選択行にブックマークがつけたりはずしたりができます。


表示→Show Bookmarks Panel、で下にブックマーク一覧が表示されそれを選択してブックマークに飛べます。


Indent Guides


表示→Indent Guides、で同じインデント部分が縦線で結ばれて表示されます。


Show Whitespace


表示→Show Whitespaceでスペースが・で表示されます。

Emmet


Emmetというメニューが出現します。

Emmet→Enabel Emmet、で有効無効が選択できます。

HTML Block Selector


Ctrl+Shift+T、で選択しているHTMLタグを終了タグの部分まで選択できます。

Brackets Outline List(アンイストール)


左のカラムに表示させるとスクロールができず、右に表示させるとスクロールはできるがカラム幅が調整できませんでした。

さらに階層構造もわかりくかったので代わりにBluePrint Betaを使うことにして、このBrackets Outline Listはアンインストールしました。

Brackets Tools


Toolsメニューが増えて右クリックメニューの項目もたくさん増えます。

Minifier(アンインストール)


Minifierはもう作者が忙しくて維持できないそうです。

Minify MoreはMinifyをもっと縮小できるようにしたものだそうですが、コメント欄にシングルクウォート「'」を使ってはいけないそうです。

今回はMinifierをインストールすることにしました。

編集→minify、で元ファイルと同じフォルダにファイル名に.minを追加したファイル名で縮小したファイルを作ってくれます。

ファイル名が変わるということはリンクも変えないといけないこと?

.minになったファイルをBeautifyしても元には戻りませんね。

やっぱりBlogger:圧縮ツールを使ってCSSとJavaScriptを圧縮するで使ったサイトを使うことにしたのでアンインストールしました。

Overscroll


Paste and Indent(アンインストール)


さしあたって使わないのでアンインストール。

String Convert


Brackets Toolsと一部項目が重複しています。

こちらは編集メニューに追加されます。

Brackets Css Color Preview


表示→Enable Css Color Preview、でCSSで色を定義している行頭にその色が表示されます。


colorHints


CSSLint(アンイストール)


私には饒舌過ぎました。

Special Html Characters


右クリック→Special HTML Character、で特殊文字一覧がでてきます。

W3CValidation(アンインストール)


私には饒舌過ぎました。

Bracket-Rename


JavaScript Globals(アンインストール)


開発者ツールでみるとSyntax Errorが多量にでるのでアンイストールしました。

Interactive Linter(アンインストール)


私には饒舌過ぎました。

Theseus for Brackets


ここまできて、だんだんとインストールに失敗することが増えてきたのでBracketsを再起動しようとしましたが、終了できずOSから再起動しました。

それでまたインストールエラーがでなくなりました。

違うマシンでインストールするときも同様にここでインストールが完了しなくなったので、この前のInteractive Linterという拡張機能がインストール後に再起動が必要なのかも知れません。

インストールをキャンセルしましたが前回と同様Bracketsが終了できなくなり、OSを再起動しました。

再度Bracketsを起動して拡張機能マネージャをみてみるとTheseus for Bracketsはインストール完了の表示になっていました。

QuickDocsJS


Brackets Color Palette


Console(アンインストール)


さしあたって使わないのでアンインストール。

EditorConfig(アンインストール)


EditorConfigとはソースコード設定情報を保持してそれをそーコードエディタに伝えてくれる仕組みのようです。

Download a Pluginに対応エディタ一覧があります。

Brackets、Geany、GitHub、NetBeans、PyCharm、VisualStudioのプラグインがあります。

各エディタへのプラグインのインストールがかなり手間なので使わないことにしました。

Unused Files


今度はコーディングを超加速するBrackets便利エクステンションまとめ - WEBCRE8.jpに載っている拡張機能をインストールしていきます。

Brackets CSS Class Code hint


CSSFier


JavaScript & CSS CDN Suggestions


Gist Manager


AdobeのBracketsで使用している拡張機能について。【2015年版】 | WEBデザインアクセント

今度はこのページに載っている拡張機能をインストール。

Brackets File Tree



右上の□アイコンをクリックすると枝の継ぎ目が□に変わります。


枝の継ぎ目が□か○になる以外の意味があるのかと考えましたがわかりませんでした。

Brackets Git(Gitのインストールが必要です)


これはインストールしたところエラーがでてきました。


gitのインストールがまず必要らしいです。


Synapticパッケージマネージャでgitをインストールしました。(linuxBean12.04ではgitのバージョンが低くてBrackets Gitは使えませんでした。)

使わないのでアンインストール。

2015.5.24追記linuxBean14.04(24)git-guiとgitkのインストールのあとに再インストールしました。)

HTMLHint


あとは自分で見つけてインストールしたものです。

BluePrint Beta


対応しているファイル形式は少ないですが、ミニマップとアウトラインの表示には私はこの拡張機能を使うことにしました。

Bracketsを起動するたびに表示状態に戻るのが難点。

起動時にアウトライン表示をしないように設定するには~/.config/Brackets/extensions/user/blueprint.outliner/main.jsの347行目をfalseに固定してしまいます。(linuxBean14.04(16)Bracketsのデバッグ機能を使う)
  var openState = prefs.get('generel/openOnStart');
  if (false) {  
   setActive(true);
Response for Brackets - original


Responsive Design Tool for Brackets - YouTubeを見て面白そうと思ってインストールしました。

Right Click Extended(アンインストール)


インストール後Bracketsを再起動すると有効になります。


右クリックメニューに「カット」「コピー」「ペースト」が追加されます。

ところが動作しません。

Brackets Additional Right Click Menu


右クリックメニューにCut、Copy、Paste、Select allが追加されてちゃんと動作します。

しかし大文字や小文字に変換するメニュー項目はもう不要なのですが、、、

Brackets New Project Creator


ファイル→New Projectでプロジェクトのテンプレートが選択できるようになります。


Brackets Editor Bookmarksと同じ作者の作品ですね。

拡張機能インストール後の問題点


右クリックメニューの項目が増えて使いにくくて仕方ありません。
(linuxBean14.04(15)Bracketsの右クリックメニューを整理する参照。)

Bracketsが終了できないときがあります。原因不明です。


そういうときは画面下部のバーにあるBracketsのところを右クリックして、ウィンドウを閉じる、とすると終了できました。

でも拡張機能を追加していなくても終了できないときがありますね。

拡張機能をごっそり他のマシンのBracketsに移行する方法


VirtualBoxで複数のゲストOSであれこれいじるためにBracketsの拡張機能をごっそりうつしたいと思いました。

Bracketsでヘルプ→拡張機能のフォルダーを開く。

~/.config/Brackets/extensionsが開きます。

userフォルダとdisabledフォルダを両方選択した右クリック、ファイルを圧縮する。

13.2MBのextensions.tar.gzができました。

これを別のマシンにコピーしてBracketsの拡張機能フォルダーに展開します。

この方法で拡張機能をまとめて移行できました。

linuxBean12.04のBracketsに移行するといくつかの拡張機能にエラーがでてきました。

Bracketsを何回か再起動するとエラーが消えました。

~/.config/Brackets/brackets.jsonも移行すると設定も移行できました。

参考にしたサイト


Brackets おすすめエクステンション集・解説 - Qiita
図付で動作結果なども紹介されています。

EditorConfig
複数のエディタでソースコードを編集するときに設定を共通化してくれるツール。

コーディングを超加速するBrackets便利エクステンションまとめ - WEBCRE8.jp
動作がGifアニメで紹介されています。

AdobeのBracketsで使用している拡張機能について。【2015年版】 | WEBデザインアクセント
実際に使用されている拡張機能一覧があります。

Responsive Design Tool for Brackets - YouTube
レスポンシブウェブデザインに便利な拡張機能。

次の関連記事:linuxBean14.04(12)Responsive Meta Tagを加えてレスポンシブWebデザイン

ブログ検索 by Blogger

Translate

最近のコメント

Created by Calendar Gadget

QooQ