本当に必要な10の素晴らしいブラケット拡張

2019

Brackets.ioは最近あなたが彼らのブログで読むことができるいくつかの素晴らしい新機能を含むバージョン1.2をリリースしました。各エクステンションの詳細な説明とともに、最も有用で有用な10個のBracketsエクステンションのリストを（順不同で）まとめました。

ブラケット拡張

1.コード折り

他の多くのIDEやコードエディタとは異なり、Bracketsにはデフォルトでコードの折りたたみオプションはありません。コード折りたたみを使用すると、コードの大部分を簡単に1行にまとめることができます。 Code FoldingエクステンションはGithubおよびBracketsエクステンションマネージャから入手できます。

使い方

入れ子になったタグを折りたたむには、上の図のように親タグの左側にある下向き矢印をクリックします。 Javascriptまたは他の形式の場合と同じ原則です。親要素の左側にある下向き矢印をクリックするだけで、すべてのネストされた文を1行にまとめることができます。拡大するには、プラス記号をクリックしてください。

折り返し行の行番号は非表示になっているので、コードに集中しているときに折り返し行を見つけるのは簡単です。

2. Lorem Pixel

プレースホルダテキストを生成する方法はたくさんありますが、フロントエンドWeb開発者はプレースホルダ画像を必要とすることがよくあります。空白のプレースホルダー画像を作成するのではなく、Lorem Pixel拡張子を使用してください。それはあなたが望む任意のサイズのゴージャスなプレースホルダー画像を挿入することを可能にします。 Lorem Pixelの素晴らしいところは、イメージを作成するカテゴリを選択できることです。

それでも十分でない場合は、ページをリロードするたびにプレースホルダの画像が変わり続けます。画像はカラースキームを混乱させることが多いため、Lorem Pixelでは白黒のプレースホルダ画像のみを使用する「グレースケール」オプションも用意されています。この拡張機能はlorempixel.comによって供給されており、Brackets拡張マネージャから入手できます。

Lorem Pixelを使う

使い方

Lorem Pixelエクステンションをインストールすると、Lorem Pixelロゴ（チェックされた四角形）がエクステンションペイン（ライブプレビューボタンのある右側のペイン）に表示されます。ロゴをクリックして設定ボックスを開きます。必要な画像サイズと好みの画像カテゴリを設定します。グレースケール画像が必要な場合は、グレースケールオプションをチェックしてください。リンクをクリップボードにコピーして必要に応じて使用するか、現在のカーソル位置に挿入します。

3.オートプレフィックス

コードにベンダのプレフィックスを追加するのは厄介です。 Autoprefixerエクステンションはあなたのコードに必要なベンダープレフィックスを自動的に追加するのであなたに多くの時間（そして多くの作業を！）を節約することができます。設定は不要で、コードを保存するたびにプレフィックスが更新されます。必要に応じて、コードを選択して自動プレフィックスを付けることもできます。

使い方

Autoprefixerを使用するには、単にプレフィックスフリーのコードを書き始めるだけです。保存するとすぐに拡張子が自動的にプレフィックスコードを追加します。選択したコードを自動プレフィックスするには、まずコードを選択してから[ 編集 ]タブ⇒ [ 自動プレフィックス選択 ]を選択します。

自動プレフィックスでは、設定にカスタムプレフィックスを追加することもできます。拡張機能の設定に移動するには、編集 ⇒ 自動プレフィックス設定をクリックします。

美しく、カスケードされた、プレフィックスの付いたコードを作成するには、拡張設定で[ ビジュアルカスケード ]オプションを有効にします。

4.マークダウンプレビュー

Markdownは、簡単にHTMLに変換できる素敵なテキスト形式のマークアップ言語です。マークダウンプレビューは、テキストバージョンの真下にレンダリングされたマークダウンを表示します。 Github Flavored MarkdownとStandard Markdownの2つの異なるスタイルから選択できます。

プレビューウィンドウには、Light、Dark、およびClassicの3つのテーマを選択できます。マークダウンプレビューにはスクロール同期オプションもあります（デフォルトで有効）。拡張機能はGithubまたはBrackets拡張機能マネージャからダウンロードできます。

使い方

.mdファイルまたは.markdownファイルを開きます。 Markdown Previewをインストールした場合は、 M↓ボタンが右側に表示されます。それをクリックすると、レンダリングされたマークダウンが表示されます。テーマを変更したり、スクロール同期を無効にしたりするには、[マークダウンプレビュー]セクションの右上隅にある歯車のアイコンをクリックします。

5.角かっこのアイコン

ファイルアイコンでコードエディタを盛り上げるのは、いつも楽しいです。角かっこアイコンは、サイドバーに表示されているすべてのファイルに、ファイルの種類に基づいてカラフルなアイコンを追加します。それはほとんどのファイルタイプのためのアイコンを持っています、そしてあなたはGithubページにアイコン要求を投稿することができます。

ボーナスのヒント：

角かっこアイコンは、Ioniconsプロジェクトのアイコンを使用します。 Font Awesomeプロジェクトのアイコンを使った拡張機能のFile Icons（Brackets Iconsプロジェクトのフォーク）をチェックすることもできます。それは最後に個人的な好みに煮詰まります。

使い方

エクステンションを取り付けてブラケット（F5）を再度取り付けるだけです。

6.文書ツールバー

ブラケットにはタブがありません。明白で単純な事実。ドキュメントツールバー拡張機能はこの機能を追加します。サイドバーの「アクティブ」セクションにあるすべてのファイルは、この拡張子のタブとして表示されます。サイドバーを隠すこともできますし、ドキュメントツールバーだけを使用して素敵なインターフェイスを作成することもできます。

使い方

エクステンションを取り付けてブラケット（F5）を取り付け直します。

7.ブラケットGit

最近はGitと統合しようとしています。それははるかに最も人気のあるバージョン管理システム（VCS）です。大括弧Gitは、同様の大括弧拡張の中で簡単に最高です。それはあなたが必要とするすべてのgit機能を持っています。括弧内から簡単に変更をコミットしたり、ワンクリックで変更をプッシュしたりプルしたり、ファイル履歴や合計コミット履歴を表示することもできます。もしあなたがGitに慣れているのなら、このエクステンションには問題がないでしょう。

注意： Brackets Gitを使用するには、Gitがコンピュータにインストールされている必要があります。拡張機能をインストールした後、Git実行可能ファイルへのパスを入力する必要があるかもしれません（デフォルトのパスにない場合）。

使い方

Brackets Gitを使ってファイルをコミットする

大括弧の使用Gitはとても簡単です。ローカルのGithubレポジトリフォルダーを角かっこ内のプロジェクトフォルダーにします。次にファイルを開き、変更を加えて保存します。それから先に進み、右側のGitアイコンをクリックすると、下部のBrackets Gitペインが開きます。ファイルに加えた変更が一覧表示されます。

コミットしたいファイルを確認して、[コミット]ボタンをクリックします。これにより、加えられた変更を一覧表示するポップアップが開きます。コミットメッセージを入力してOKをクリックしてください。そして、Bracketsから直接Gitにファイルをコミットしました。

コミットした後は、プッシュボタンをクリックしてください（上記のGIFに見られるように、未同期コミットの数も表示されます）。

設定をする

Brackets Gitペインを開き、Settingsボタン（右から2番目）をクリックします。とにかくブラケットGitを自由に設定してください。

ファイル履歴とコミット履歴を表示する

それぞれのボタンをクリックするだけで、あなたのファイル履歴とコミット履歴がきれいに表示されます。アバターを白黒のアバター、カラーのアバター、またはグラバターのいずれかに変更できることをお伝えしましたか。

コミット履歴

8.すべてのものをリントする

すべてのものをリントします。すべてです。この拡張子は一度にすべてのあなたのファイルをほのめかします。たくさんの接続ファイルがある大規模なプロジェクトがあるときに非常に役立ちます。すべての糸くずのエラーはペインにうまく表示されます。

使い方

Lint ALL Thingsを使用するには、 [表示 ]タブに移動して[ Lint whole Project ]をクリックします。

9.ブラケット藤堂

角かっこTodoは、きちんとしたリスト形式ですべてのTODOコメントを表示するきちんとした小さな拡張子です。デフォルトでは、TODO、NOTE、FIXME、CHANGES、FUTUREの5つのタグがサポートされています。また、コメントを完了としてマークすることもできます。表示オプションでは、タグでコメントを絞り込むことができます。角かっこTodoでは、自分のコメントでクリエイティブにしたい場合に備えて、タグだけでなく自分のタグにもカスタムカラーを定義できます。

大規模なプロジェクトで作業していて、複数のファイルからのコメントを追跡する必要がある場合は、Brackets Todoの検索範囲を変更できます。ベンダーフォルダのようなファイルやフォルダを除外したいですか。心配ない。除外リストにパスを追加するだけです。ルートプロジェクトディレクトリに.todoファイルを追加することで、各プロジェクトの設定をカスタマイズできます。

あなたはgithubドキュメンテーションのすべての設定オプションを通して進むことができます。

使い方

Brackets Todoを使用するには、内側にタグを付けてコードにコメントを追加するだけです。タグ名は大文字でなければならず、その後にコロン（:)が続きます。すべてのTodoを表示するには、右側の拡張機能ペインにあるTodoアイコンをクリックするだけです。

設定：

TodoのHTMLコメントを許可するには：設定を開く - Todoアイコン→設定（歯車アイコン）をクリックして、.todoファイルを開くためにクリックします。このファイルに次のコードを追加します。
```
 {"正規表現"：{"プレフィックス"： "（？:)"}} 
```
Todo設定メニューの外観
検索範囲を変更するには：このコードを.todoファイルに追加します。
```
 {"検索"：{"範囲"： "私のプロジェクト"}} 
```
ファイル/フォルダー/ファイル拡張子を検索範囲から除外するには、次のようにします。このコードを.todoファイルに追加します。
```
 {"検索"：{"範囲"： "私のプロジェクト"、 
```
“ excludeFolders”：[“あなたのフォルダー”]
```
 "excludeFiles"：["yourfile"] "excludeFiles"：[".yourextension"]}} 
```