気になる

アフェリエイト旅行

自動車

家庭菜園

« scssを使う  (DreamwaverCS6でscssファイルを認識させる) | トップページ | Sacc を Win上で使う為に、コンパイルを Gulp にさせる (起動はバッチファイルにさせる) »

2018/05/26

Bracketsエディタ 拡張機能 2018

<ショートカット>

Ctrl-Space
コードヒントを表示

Ctrl+E 
タグやクラス名上で:該当cssパネルが下部に開いて直接編集可能
#fff上で:カラーパレットが出現。
関数上で:書かれている関数が出現

Ctrl + Tab
1つ前に利用していたファイルが表示される

Ctrl + /
コメントアウト <!---->

Ctrl-Alt-[
現在のコードを畳む。展開はCtrl-Alt-]

Alt-W
ペイン間でフォーカスを切り替え(右画面から左画面へ)

-----------------------

Beautify
コードをキレイに整形
【編集→保存時にBeautifyにする チェックを入れる】
注!wordpress作業時にはひどいことになるので外しておく。w

Brackets CSS Class Code hint
ID名やクラス名の属性値をコードヒントとして表示してくれる。
JSファイル上では、関数名のとこにカーソルを置けばOK

Brackets Outline List
ファイル構造をアウトライン化してくれる(サイド画面に表示)

    *BluePrint Beta
    ミニマップ + アウトライン。文字が大きすぎかなぁ。

Brackets Tools
色々機能あり。お気に入りは↓

    <単語s>
    配列に変換:Word To Array
    リストに変換:Word To List
    タグのみを消去:HTML Tag Remove/Strip
    ------------------
    HTMLエンコード:HTML Encode (ソース書くとき便利)
    HTMLデコード:HTML Docode
    ------------------
    同じ単語にハイライト:表示=>Highlight Selected Word

Brackets WordPress Functions Hints
関数やテンプレートタグの補完

Brackets WordPress Hint
その名の通り、コード打ち込み中にヒントを出してくれる(<?php?>内でね)

Brackets WordPress Hooks Hints
フックの補完

Color Highlighter
Hex や RGB() をカラーそのものの色でハイライト表示してくれる

colorHints
ファイルの中で指定している色を、候補として表示してくれる
「#」を入力するとファイル内で使用しているカラー一覧を表示してくれる

    *Brackets Css Color Preview
    左に■で色を表示してくれる。上記の方が見やすいなぁ。

CSSFier
HTMLソースを.cssファイルに貼り付けると、cssを抜粋してくれる

Custom Work
左画面:フォルダアイコン表示と、ファイルアイコン表示をしてくれる   
上部:ファイルアイコンをタブ表示してくれる

        Brackets File Icons
            拡張子分けでアイコン表示してくれる用。上記で代替え。

      Documents Toolbar
          開いているファイルをタブバーで表示。上記で代替え。

Emmet
タグ早撃ち

*Highlight Multibyte Symbols
全角文字をハイライト表示

HTML Block Selector
Ctrl+Shift+tを押すと、対応している開始タグから終了タグ間の全体を選択してくれる。
超便利!

Monokai Dark Soda

QuickDocsPHP
調べたい所で Ctrl+K でヘルプドキュメントが出てくる

SASSHints
SASSの変数をコードヒントを表示してくれる

SVG Preview

svgをプレビューしてくれる
Brackets SASS
.scss を .css にコンパイルしてくれる。

-----------------------------------

<外しているプラグイン>

Overscroll
    ファイルの下をずーっと表示してくれる

    Console
    consoleのログやエラーを表示してくれる

    Display Shortcuts
    ショートカット一覧表示してくれる(Ctrl+Alt+/)

    JavaScript Globals
    グローバル変数を教えてくれる

    QuickDocsJS
    jsのドキュメント表示してくれる(Ctrl+k)

  More HTML5 Code Hints
  新しい属性 srcset属性とか使えるようになる

  PHP SmartHints
  PHPの補完

  Simple JS Code Hints
  javascriptの補完

  Autoprefixer
  cssプレフィックスの補完

  Minifier
  JavaScriptとCSSで、コードの縮小

« scssを使う  (DreamwaverCS6でscssファイルを認識させる) | トップページ | Sacc を Win上で使う為に、コンパイルを Gulp にさせる (起動はバッチファイルにさせる) »

PC+モニター+他・電化」カテゴリの記事

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/114130/66761408

この記事へのトラックバック一覧です: Bracketsエディタ 拡張機能 2018:

« scssを使う  (DreamwaverCS6でscssファイルを認識させる) | トップページ | Sacc を Win上で使う為に、コンパイルを Gulp にさせる (起動はバッチファイルにさせる) »

google検索

  • Google


    このブログを検索
    ウェブ全体から検索

カテゴリー

ニュース

  • 日経平均(長期)

    株価ミニチャートのブログパーツ
  • 経済指標(発表と内容)へのリンク
    http://jp.investing.com/economic-calendar/
  • 経済指標
  • . . .
  • 日経平均チャート
    by 株価チャート「ストチャ」
  • 株指標
2018年11月
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30