WEBCRE8.jpウェブクリ8.jpwebデザイナーによる、デザインとwebを楽しむ情報ブログRSSABOUTまとめる。webとwebデザインに関しての、WEBCRE8.jpによる情報まとめのカテゴリです。拡張機能Bracketsの拡張機能はどんどん色んなのが増えてて把握しきれてないですけど、最近知ったのを中心にコーディングを早くしてくれるすごいエクステンションをいくつか紹介します。最近色んなところでBrackets使ってますの声を聞けて嬉しい感じなんですが、Bracketsのアドベントカレンダーも余裕で挫折しているのでまた仕切り直して、せっせと紹介記事書いていきますね。今回は新しく知った拡張機能のなかでコーディング関連のものを紹介します。これまでの紹介したものはいくつかありますので見てみてくださいー。hint便利過ぎワロタ系のやつです。編集中のHTMLが読み込んでいるCSSのセレクターに書かれているclassとIDが、属性値の記述時にコードヒントとして出てきます。hintCSSFier便利過ぎワロタその2。逆にHTMLに書いたclassやID、要素名のルールセットをCSSに作ってくれます。こっちは、HTMLをコピーしてCSSに貼付けすると全ての空のルールセットをだーっと作ってくれます。入れ子にしまくる感じではなくちゃんとバラバラにしてくれます(入れ子にしたい場合は適宜移しましょう)。CSSFierワークフロー変わりますねこれは...。デフォルトCSSを用意しておいて、HTMLをだーっと書いていって、HTML書けたらCSSにコピって持ってってルールセット生成、Extractで画像置きながら雑に書いていってAutoprefixerとbeautifyとかCSScombで整形。Toolsに書いてありますが、色んなコーディングサポート機能が一つになったプラグインです。他のもので代用できるものもありますが、便利そうなのはいくつかの単語の羅列をそのままli要素にしてくれたり、選択範囲からHTMLタグを消してくれるもの。この辺は欲しかった機能です。Suggestionsscriptタグやstyleタグを書くと主要なCDNにあるJSやCSSの名前をサジェストしてくれ、かつ選択したらバージョンを指定するとタグの記述が完成します。APIやCDNJSなどからです。HintsHTML5のコードヒントを拡張します。Bracketsはデフォルトでも結構HTML5の要素や属性をカバーしてますが、更にpicture要素やsrcset属性までサジェストしてくれるようになります。HintsというCSS版もあります。今のところ使う機会の少なそうなものばかりですけど一応。Queriesとか対応してくれると嬉しいなあ。MinimapもともとCodeOverviewというファイル全体を見渡すためのエクステンションがありましたが、私の環境だと1.1からうまく動かなくなっていたのでこれが代替になりそうです。こちらは拡大率を選ぶことができないようですが、使わないときは勝手に薄く小さくなってくれるという違いがあります。出しっ放しの方が便利な場合もある気がするので1.0を併用するというのもアリかもしれませんね。Indentコードをコピって貼付けると、貼付けた位置のインデントの深さと合わせて貼付けられます。コードの移動の他、他のファイルからまるまる持ってきたりするときに超便利です。Brackets遂にBracketsでも文字コードのエンコーディングができるようになりました。普通にShift_JISも開けるようになってます。今までnkfというコマンドラインツールを使って変換とかしてたんですが、もうこれでそのままいける。その他おなじみのヤツとかBracketsがコーディングを加速する一応他にも使ってるヤツを紹介します。Previewマークダウンをプレビューできるおわりに昨日1.2がリリースされたBracketsですが、どんどん生産性上がっていると思います。今回挙げたものは便利すぎるのでネイティブに取り込まれても良さそうですよね。Codeがそういう役割をすると思ってたんですが、今後は多分Bracketsに取り込まれていったりするんですかね。気になるのは開発の止まっているプラグインですね...。Inspectとの連携とか、どうなってるんですかね...。あと、他のEdgeシリーズがなんかおとなしすぎるのであの辺が元気になってくれればもっとBracketsの使いでが上がっていいと思います!★tweethatenafacebook_likewebcre8はTwitterを使っています。