気になる

アフェリエイト旅行

自動車

家庭菜園

« 春です、新しいことにチャレンジ→英検2級の申込 | トップページ | 春なのにポトスが枯れまくり・・強剪定して高さ10cmになっちゃいました »

2017/03/17

Bracketsエディタ 設定メモ

以前にインストールした際にメモ残しておいたと思ったら・・なかったので本日メモ。

---

新しく入れた拡張が何かにぶつかってちょっと挙動不審な感じで
画面右に意味不明のスペースが出来てしまいました。

<対策方法>
デバッグ→環境設定ファイルを開く→
"custom.work.moveToolbarToSidebar"のtrueの値をfalseに変更。保存。

無事なおりました。良かった

---

<便利なショートカット>

  • Ctrl+E 
    タグやクラスの上にカーソルを置いて 
    (cssパネルが下部に開いて直接編集可能)
    ポップ画面の左上にあるファイル名をクリックすると、cssファイルが表示される。
    色を変えたければその#fff とか文字上でCtrl+Eするとカラーパレットが出現。
  • Ctrl + /
    コメントを入れてくれる <!---->
  • Ctrl + Tab
    1つ前に利用していたファイルが表示される

<テーマ>

    ニュートンダーク

    アノード

    マルクスダークテーマ

<拡張>

 

    Shizimily Multi-Encoding for Brackets
    ファイルのエンコーディングに必要(Shift_JIS、EUC-JPとか)

    Brackets File Icons
    拡張子分けでアイコン表示してくれる用

  Documents Toolbar
  開いているファイルをタブバーで表示

    Brackets Beautify
    コードをキレイに整形
  注!wordpress作業時にはひどいことになるので外しておく。w
  再び使うときは 編集=>保存時にBeautify にチェックを入れる

  HTML Block Selector
  Ctrl+Shift+tを押すと、対応している開始タグから終了タグ間を選択表示してくれる

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

    colorHints
    ファイルの中で指定している色を、候補として表示してくれる

    Brackets Outline List
    ファイル構造をアウトライン化してくれる

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

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

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

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

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

    CSSFier
    htmlで作成したコードをコピーして、
  cssファイルに貼り付けるだけで簡単にcssのセレクタ表示にしてる
  <使い方>.css もしくは.scss ファイルを用意して置いて、そこに貼り付ける

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

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

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

    Paste and Indent
    貼り付けたコードを、きれいにインデントしてくれる

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

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

  Brackets Snippets (by edc) スニペット
  何かとかぶって使えない。。。 ので外してみた

  More HTML5 Code Hints
  新しい属性 srcset属性とか使う為に入れてみた

  CSSFier
  HTMLソースを貼り付けると、cssを抜粋してくれる

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

  Brackets-wp-functions-hints
  Brackets-wp-hooks-hints

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

  Emmet
  有名所の奴。

記述方法
Emmetでマークアップを効率化しよう(HTML&カスタマイズ編) | 株式会社グランフェアズ

コメント付きで書く
.footer>h1|c


<div class="footer">
    <h1></h1>
</div>
    <!-- /.footer -->

一行で書く
.footer>h1|s

<div class="footer"><h1></h1></div>

練習w

.container>.row>.col-sx-4>

<div class="container">
    <div class="row">
        <div class="col-sx-4"></div>
    </div>
</div>

.container>.row>cos-xs-4>div+div

<div class="container">
    <div class="row">
        <cos-xs-4>
            <div></div>
            <div></div>
        </cos-xs-4>
    </div>
</div>

« 春です、新しいことにチャレンジ→英検2級の申込 | トップページ | 春なのにポトスが枯れまくり・・強剪定して高さ10cmになっちゃいました »

お勉強」カテゴリの記事

コメント

コメントを書く

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

トラックバック

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

この記事へのトラックバック一覧です: Bracketsエディタ 設定メモ:

« 春です、新しいことにチャレンジ→英検2級の申込 | トップページ | 春なのにポトスが枯れまくり・・強剪定して高さ10cmになっちゃいました »

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