前の関連記事：linuxBean14.04(10)ウィンドウのスナップを有効にする
linuxBean14.04(9)node.jsとBracketsのインストールでインストールしたBracketsの拡張機能をいろいろインストールした記録です。
拡張機能マネージャの「インストール」ボタンが見えない
拡張機能のインストールは、ファイル→拡張機能マネージャーから行います。
インストールしたい拡張機能の右にある「インストール」ボタンをクリックすれば拡張機能のインストールができます。
拡張機能マネージャのウィンドウは動かすことができないので、横の解像度を1091pxまで広げないとこれらのボタンが見えませんでした。
役立ちそうな拡張機能を片っ端からインストールする
拡張機能を紹介しているページを参考に、役立ちそうな拡張機能を片っ端からインストールしていきます。
Brackets おすすめエクステンション集・解説 - Qiita
このページに紹介してある拡張機能を参考にインストールしていきます。
まず最初は拡張機能にまつわる拡張機能をインストールします。
Extensions Rating
拡張機能マネージャを閉じて再度開くと、拡張機能の下にダウンロード実績数などが表示されるようになります。
以下のすべての拡張機能をインストール後OSを再起動すると、ダウンロード数とそのリンク以外表示されなくなってしまいました。
どうしたものか、と思ったらまたOS再起動したら直りました、、、
Shizimily Multi-Encoding for Brackets
ウィンドウの右下でエンコーディングの選択ができるようになります。
動作に問題はないのですが、表示→サイドバーを隠す、で手動でサイドバーの表示を調節するほうがお好みなのでアンインストール。
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はもう作者が忙しくて維持できないそうです。
Minify MoreはMinifyをもっと縮小できるようにしたものだそうですが、コメント欄にシングルクウォート「'」を使ってはいけないそうです。
今回はMinifierをインストールすることにしました。
編集→minify、で元ファイルと同じフォルダにファイル名に.minを追加したファイル名で縮小したファイルを作ってくれます。
ファイル名が変わるということはリンクも変えないといけないこと？
.minになったファイルをBeautifyしても元には戻りませんね。
やっぱりBlogger:圧縮ツールを使ってCSSとJavaScriptを圧縮するで使ったサイトを使うことにしたのでアンインストールしました。
Overscroll
さしあたって使わないのでアンインストール。
String Convert
Brackets Toolsと一部項目が重複しています。
こちらは編集メニューに追加されます。
Brackets Css Color Preview
表示→Enable Css Color Preview、でCSSで色を定義している行頭にその色が表示されます。
colorHints
私には饒舌過ぎました。
Special Html Characters
右クリック→Special HTML Character、で特殊文字一覧がでてきます。
私には饒舌過ぎました。
Bracket-Rename
開発者ツールでみるとSyntax Errorが多量にでるのでアンイストールしました。
私には饒舌過ぎました。
Theseus for Brackets
ここまできて、だんだんとインストールに失敗することが増えてきたのでBracketsを再起動しようとしましたが、終了できずOSから再起動しました。
それでまたインストールエラーがでなくなりました。
違うマシンでインストールするときも同様にここでインストールが完了しなくなったので、この前のInteractive Linterという拡張機能がインストール後に再起動が必要なのかも知れません。
インストールをキャンセルしましたが前回と同様Bracketsが終了できなくなり、OSを再起動しました。
再度Bracketsを起動して拡張機能マネージャをみてみるとTheseus for Bracketsはインストール完了の表示になっていました。
QuickDocsJS
Brackets Color Palette
さしあたって使わないのでアンインストール。
EditorConfigとはソースコード設定情報を保持してそれをそーコードエディタに伝えてくれる仕組みのようです。
Download a Pluginに対応エディタ一覧があります。
Brackets、Geany、GitHub、NetBeans、PｙCharm、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を見て面白そうと思ってインストールしました。
インストール後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
レスポンシブウェブデザインに便利な拡張機能。
0 件のコメント:
コメントを投稿