ビジュアルスタジオのコード拡張。 VisualStudioコード用の便利なプラグイン。継続は会員のみが利用できます

VisualStudioコード によって開発された無料のクロスプラットフォームテキストエディタです マイクロソフト..。その優れたパフォーマンスと提供する機能の数の多さから、すぐにみんなのお気に入りになりつつあります。

ほとんどのIDEと同様に、VSCodeには、さまざまな品質の何千ものプラグインを含む独自の拡張ストアがあります。ダウンロードする拡張機能を選択できるように、最も便利で興味深い拡張機能のコレクションを作成しました。

VSCodeは、ブラウザで直接ファイルを開くための組み込みインターフェイスを提供していません。この拡張機能は、「ブラウザで開く」コンテキストメニュー項目と、選択したクライアント（Firefox、Chrome、IE）で開くためのコマンドをコンテキストメニューに追加します。

Quokkaは、作成したコードに関する直接的なフィードバックを提供するデバッグツールです。関数の結果と変数の計算値のプレビューが表示されます。拡張機能は高度にカスタマイズ可能であり、JSXまたはTypeScriptプロジェクトですぐに機能します。

人気のJavaScriptFakerライブラリを使用して、プレースホルダーデータをすばやく挿入します。ランダムな名前、住所、画像、電話番号、または古典的なLoremIpsumの段落だけを作成できます。各カテゴリには異なるサブカテゴリがあるため、データをニーズに合わせることができます。

この拡張機能を使用すると、スタイルシートのCSSクラスとIDの定義を追跡できます。 HTMLファイルのセレクターを右クリックして、[定義に移動]オプションを選択すると、[ピーク]定義により、それらを作成したCSSが送信されます。

HTMLテンプレートを拡張すると、新しいHTMLドキュメントのheadタグとbodyタグを手動で作成する手間が省けます。空のファイルにhtmlを入力し、Tabキーを押すだけで、クリーンなドキュメント構造が作成されます。

きれい Web開発者の間で最も人気のあるコード形式です。これにより、誰が書いたとしても、チームコードを同じように見せることができます。この拡張機能を使用すると、自動的に適用できます きれい すべてのドキュメントをすばやくフォーマットします Js そして CSS..。あなたも使いたいなら ESLint、有る きれい-エスリント.

CSSで使用した色に関するさまざまな情報を提供する小さなプラグイン。色の上にマウスを置くと、その色とそのエンコードがすべての形式（hex、rgb、hsl、cmyk）で表示された大きなウィンドウが表示されます。

このツールはすべてのコメントにマークを付けます TODO コード内で、本番環境に入る前に未完成のチャンクを簡単に追跡できるようにします。デフォルトでは、キーワードを検索します TODO そして FIXMEただし、独自の式を追加することもできます。

プロジェクトに（CDNから）アイコンフォントを含めてから、アイコン自体を追加するための小さなスニペット。拡張機能は、フォントを含む20以上の人気のあるアイコンセットをサポートします 驚くばかり, イオニコン, グリフィコン そして マテリアルデザインアイコン.

コードミニフィケーションの拡張。多数のカスタマイズオプションと、.minファイルに保存およびエクスポートするときに自動的に縮小する機能を提供します。 Minifyは、それぞれuglify-js、clean-css、およびhtml-minifierを介してJavaScript、CSS、およびHTMLで動作します。

VSCode テキストを変換するための限られたオプションがあります。箱から出して、それは小文字と大文字の変換のみを行うことができます。このプラグインは、camelCase、kebab-case、snake_case、CONST_CASEなど、さらに多くの文字列変更コマンドを追加します。

通常の式をテストするための便利なツール。これは、エディターで開いているテキストファイルに通常の式パターンを適用し、すべての一致を強調表示することで機能します。かのように RegExrしかし、エディター内で！

私がコードを書くために使用する主なエディターは、Visual Studio Code（VSCodeと略記）です。それ以前は、VSCodeの方がはるかにクールで高速であるという理由だけで、VSCodeの使用を開始してから2週間後に完全に削除したSublimeTextエディターで作業していました。

この記事では、私が自分で使用している最高のVSCodeエディター拡張機能について説明したいと思います。それらに注意を向けることをお勧めします。

VSCodeは、エディターから直接拡張機能の検索とインストールを実装します。拡張機能パネルを開き、拡張機能のマーケットプレイス検索に拡張機能名またはキーワード（タグ）を入力するだけで、エディターはすぐに検索し、検索クエリに使用できるオプションを提供します。

デフォルトでは、EmmetプラグインはすでにVSCodeにインストールされていますが、作業をより速く、より快適にするためにどの拡張機能をインストールする必要があるかを読んでください。

VisualStudioコードの拡張機能

プロジェクトマネージャー-プロジェクトマネージャー

これは、VSCodeエディターに最初にインストールするものです。この拡張機能の作成者であるAlessandroFragnaniは、VSCodeの拡張機能を12以上持つ経験豊富な開発者です。

拡張機能は、プロジェクトがどこにあるかに関係なく、プロジェクトに簡単にアクセスするのに役立ちます。独自のお気に入りのプロジェクトを定義するか、VSCode、Git、Mercurial、SVNリポジトリまたは任意のフォルダを自動検出することを選択できます。

一般に、コンピューター上の任意のフォルダーをプロジェクトにすることができ、この拡張機能を使用すると、プロジェクトをすばやく切り替えたり、新しいエディターで開いたりすることができます。

私は個人的にプロジェクトマネージャー拡張機能の開発に貢献しました-それを多言語にし、ロシア語を追加したので、今ではロシア語で利用可能です。

ブックマーク-ブックマーク

からのVSCodeの別の拡張 アレッサンドロ・フラニャーニ.

拡張機能を使用すると、ファイルの行をブックマークできます。これは、フィールドのラベルによって示されます。

ブックマークには、独自のエクスプローラーバーと、ブックマークにすばやくアクセスするためのアイコンが左側のメニューバーにあります。無制限に追加できます。

便宜上、ブックマークをナビゲートしやすくするために、コメントにブックマークを付けることがよくあります。以下は画面上の例です。ブックマークはコメントButtonsの行にあり、ブックマークエクスプローラーではButtonsというラベルが付いています。私はそれが便利だと思います：

プロジェクトマネージャーだけでなく、私はこの拡張機能の開発に貢献しました-それを多言語化し、それにロシア語を追加しました。

この拡張機能により、ブラウザでhtmlファイルをすばやく開く機能が追加されます。

この拡張機能を使用すると、ブラウザでファイルを開くために長い間いじくり回す必要はありません。

ファイルがエディターで開いていてアクティブな状態の場合は、Alt + Bキーの組み合わせを押すだけで、ファイルがデフォルトのブラウザーで開きます。

Shift + Alt + Bキーの組み合わせを押すと、エディターのコマンドラインにブラウザーのリストが表示され、ファイルを開く特定のブラウザーを選択できます。

上記のキーの組み合わせを覚えておく必要はありません。マウスの右ボタンを押すだけで、コンテキストメニューに対応する項目があり、デフォルトのブラウザでファイルを開くか、リストからブラウザを選択できます。さらに、アクティブなファイル（エディターで開く）だけでなく、エクスプローラーパネルからのファイルも開くことができます。

パスIntellisense

パスIntellisense は、ファイル名を自動的に入力するVisual StudioCodeのプラグインです。

パス自動完了の同様の拡張。

と同じ機能を実行します パスIntellisenseパスとファイル名を追加します。

私は現在無効になっています パスIntellisense、ただし含まれています。私は、これら2つの拡張機能のどちらが応答が速く、インテリジェンスのヒントを提供するかをテストしています。私はそれが好きですが、印象はそれが速いということです。

ファイルサイズ

この拡張子は、エディターのステータスバーにアクティブなファイルのサイズを表示します。

VSCodeオプションでファイルサイズを表示する設定を探しましたが、見つかりませんでした。しかし、この小さなユーティリティはこの問題を解決し、エディタのステータスバーにファイルサイズに関する情報を表示します。

htmltagwrap

この拡張機能は、選択範囲をHTMLタグでラップします。

簡単です-フラグメントまたは行を選択し、Alt + Wキーボードショートカットを使用してコマンドを選択します

コマンドに慣れて覚えていれば、それはとてもクールです。

ステータスバーのアクティブファイル

エディターのステータスバーにファイルへのパスを表示します。クリックすると、ファイルへのパスがクリップボードにコピーされます。

ブラケットペアカラーライザー

このプラグインを使用すると、ブラケットの各ペアの色を設定できます。これにより、コード内のネストまたは条件付きルールを視覚的に制御できます。括弧（）、カーリー（）、および角括弧で機能します。

このプラグインをインストールする前は、括弧を閉じる際に問題が発生しました。今では、括弧のネストを色で確認できます。

ファイルとフォルダのアイコン

Angularを使用したVSCodeのよりシンプルなアイコン

これはファイルのアイコンのコレクションです。私はアイコンをたくさん見直しましたが、このアセンブリ、tkに落ち着きました。これは、node_modulesとbower専用のスタイル付きフォルダーです。他のアセンブリでは、さまざまなフォルダ（たとえば、画像、js、cssなど）に独自の美しいアイコンがありますが、同時にフォルダとファイルをすばやく区別することは困難ですが、ここではすべてが単純です-フォルダとファイルのツリーでは、開いている場所がはっきりとわかりますフォルダー、およびどこが閉じられます。

マーケットプレイスには同様のセットがたくさんあるので、自分で確認して、自分に合ったアイコンスタイルを選択できます。一度にたくさんのコレクションを入れることができます。アイコンを変更するのは簡単です-アイコンを変更するための設定は、ツールバーの下部にあるギアのメニューにあります：

アイテムを選択してください ファイルアイコンのテーマ インストールしたファイルアイコンのテーマがエディターのコマンドラインに表示されます。 VSCodeの3つのデフォルトテーマと追加するもの。リストで、上下の矢印を使用してテーマをスクロールするだけで、アイコンがすぐに適用され、ファイルエクスプローラーに表示されます。すぐにあなたが好きなテーマを見つけるでしょう。

私はトピックが好きだったことを繰り返します Angularを使用したVSCodeのよりシンプルなアイコン

静的ページと動的ページのアクティブなリロード機能を備えたローカル開発サーバーを起動します。

これを行うには、エディターのステータスバーに起動ボタンがあります。それをクリックすると、ブラウザでファイルが開き、ファイルの変更が監視されます。ファイルを変更すると、ブラウザでページが自動的に再読み込みされます。

個人的には、Gulpを介してBrowsersyncを使用することを好みます。これは、より高速で機能が高く、負荷が少ないですが、Gulpはすべてのプロジェクトに常にインストールされるとは限らないため、LiveServerを拡張するために行う必要があります。

VSCodeのプロファイル拡張

そして今、私は特定の領域のためのVSCode拡張のリストを提供します。

GitおよびGithubの操作

VSCodeはデフォルトでgitで動作するという事実に加えて、GitおよびGithubで動作するためのすべての好みのためにMarketplaceに多くの拡張機能があります。私はこのように立っています：

Git History、GitLens、Git Merger、GitHubプルリクエスト

RemoteFS

この拡張機能を使用すると、FTPおよびSFTPプロトコルを使用してサーバーに接続できます。

サーバー上にあるサイトまたはプロジェクトを開くために必要なのは、settings.jsonファイルに次の設定を追加することだけです。

"remotefs.remote" :( "最初のサイト" :( "scheme"： "ftp"、 "host"： "Host"、 "port"：21、 "username"： "FTP login"、 "password"： "Password "、" rootPath "：" / "、" connectTimeout "：10000）、" 2番目のサイト ":("スキーム "：" ftp "、"ホスト "："ホスト "、"ポート "：21、"ユーザー名 "：" FTPユーザー "、" password "：" Password "、" rootPath "：" / "、" connectTimeout "：10000））

接続データは、セクションのホスティングで取得できます FTPユーザー..。 2つのサイトの接続のレイアウトを具体的に示しました。このスキームによれば、異なるプロトコル（FTPまたはSFTP）を使用して、必要な数のサイトに接続できます。

Webベースのテキストエディタが活況を呈しています。 Atom、VS Code、Bracketsは、ロックモンスターのように、Web開発者の間で人気を集めています（待ってください、カレンダーの「人気のロックモンスター」は何年になりますか？🙂-編）。 IDEから、および単にネイティブエディタからそれらに切り替えます。理由は非常に単純です。リポジトリには便利なプラグインがたくさんあり、純粋なWebテクノロジーを使用して、誰もが不足しているプラ\u200b\u200bグインを個別に作成できます。

公式リポジトリの拡張機能の数は絶えず増えており、それらに迷わないように、Web開発を簡素化する最も人気のあるプラグインのリストを用意しています。

著者の好みに合わせて

あなたは本当にリストされたすべてのエディタを使用し、VSコードに落ち着きました。これにはいくつかの理由がありますが、主な理由はパフォーマンスです。マイクロソフトは素晴らしい仕事をし、リリースが遅れたにもかかわらず（VSコードが最後に登場しました）、それ自体の周りに巨大なコミュニティを集めることができました。これはプラグインにプラスの効果をもたらしました。私の意見では、プラグインのいくつかはAtomの代替品よりも優れています。この点で、レビューのテキストには、VSコード専用の拡張機能の名前が含まれます。 Atomのおおよその機能へのリンクを以下に示します。プラグイン名をコピーしてAtomリポジトリを検索しても何も見つからなくても、驚かないでください。説明からのリンクを使用してください。

人気の理由

Webベースのエディターにもほぼ同じ問題があります。主なものの1つはパフォーマンスです。開発者はエディターの速度に取り組んでいますが、正直に言うと、この問題が100％解決される可能性は低いです。ネイティブソリューションのパフォーマンスは依然として優れているため、エディターを選択する際にはこれを考慮に入れる必要があります。

さて、ネイティブソリューションのパフォーマンスは比類のないです。では、新しく作成された「軽量」エディターは、どのようにして多くの開発者の心を獲得したのでしょうか。「for」の主な議論はテクノロジースタックです。 SublimeまたはNotepad用のプラグインを開発するとはどういう意味ですか？そうです、あなたはCに対処しなければなりません、Python（ここでは、他のプログラミング言語を使用できます）、SDKエディター、およびメインの作業に必要のないその他のもの。

どのWeb開発者がこの偉業に同意しますか？彼は彼自身の心配と技術を十分に持っています（ソリューションの本当の革命がフロントエンドで起こっています）。そのため、ネイティブエディター向けのWeb開発者向けのプラグインのエコシステムは、常に特殊なソリューションの欠如に悩まされてきました。

同じテクノロジーのマスターのためにウェブベースのエディターを作成するというアイデアは、サードパーティモジュールの貧弱なエコシステムの問題を効果的に解決しました。サードパーティのWeb開発者はすぐに波に飛びつき、必要なガジェットの作成を開始しました。結果は簡単に追跡できます。公式リポジトリには、さまざまなタスク用のプラグインが満載されています。新しいプラグインの作成が簡単になりました。外国のプログラミング言語を学ぶ必要がなくなり、JavaScriptで十分です。

残念ながら、パフォーマンスとリソースを使用してエディターの機能を簡単にカスタマイズできるようにする必要があります。軽量のエディターは、多くの場合、より多くのシステムリソースを必要とし、パフォーマンスにおいてネイティブのエディターと競合する準備ができていません。テスト中、紳士的な拡張機能を備えたAtomは、メモリ消費量でWebStormを追い抜くことができました。

切れ端

Snippetプラグインは、エディター用の別のクラスの拡張機能です。それらは非常に人気があり、リポジトリ内のほとんどすべての最新のフレームワークまたはライブラリには個別の提案があります。スニペットは時間を節約します。クラステンプレートについて説明しますか？問題ありません。数文字入力して、完成したコードを数行取得するだけです。スニペットプラグインを詳細に分析しても意味がありません。数が多すぎます。人気のあるテクノロジーに基づくスニペットプラグインへのリンクを次に示します。あなたは自分で行方不明のものを見つけるでしょう。

VSコード：

原子：

HTMLラッパー

ページのレイアウトを説明するときは、常にブロックをラップする必要があります。つまり、あるブロックを別のブロックにネストします。ブロックのマークアップを作成したところ、スタイリングの利便性のために、追加のブロックでラップする方がよいことに気付きました。簡単に行えます。最初に開始タグを書き込み、ブロックを最後までスクロールして、終了タグを配置します。問題は1つだけです。大きなブロックでこれを行うのは不便です。「カバー」を間違った場所に置き、マーキングを壊す可能性があります。個々のテキストをスタイリングするときにも、同様の問題が発生します。複数の開始タグと終了タグをすばやく挿入して、気が狂わないようにしてください。プラグインはあなたが困難に対処するのを助けます htmltagWrap そして タグでラップアトム..。彼らの助けを借りて、解決策はコード/行の一部を強調表示し、ホットキーの組み合わせを押すことになります。

VSコード： htmltagwrap
原子： タグでラップアトム

ホットキーに慣れる

新しいエディター/ IDEに切り替えると、常に同じ問題に直面します。新しいホットキーを学ぶ必要があります。私はbamのような1つの組み合わせに慣れたばかりで、すべてが異なります。あなたはいつもより習慣的な行動に多くの時間を費やし始めます、そしてもう一度あなたはまったく新しいものに切り替えることが賢明であるかどうか疑問に思います。 10〜15年前にキャリアを開始した開発者は、これに繰り返し遭遇していると確信しているので、人気のあるエディターのキーバインディングを備えたプラグインのパワーを間違いなく評価するでしょう。結論は簡単です。VisualStudioホットキーのレイアウトに慣れます。対応するプラグインをダウンロードすると、新しいエディターが使い慣れたコマンドに応答し始めます。

VSコード：

原子：

ファイルの自動完了

デフォルトでは、接続時にファイル名の自動補完を提供するエディターはありません。これは多くの場合、エラーの原因です。ファイルの場所へのフルパスを覚えておく必要があります。プロジェクトがHelloworldよりも複雑な場合、ファイルはいくつかのディレクトリにグループ化され、パスを指定するにはファイルマネージャのサービスを使用する必要があります。あまり快適ではありません。 AutoFileNameとautocomplete +プラグインを使用してautocompleteに接続する方が簡単です。その後、残っているのはファイル/ディレクトリ名の最初の文字を入力することだけです。その後、プラグインは置換のオプションを提供します。

VSコード： AutoFileName
原子： 自動完了+パスの提案

リンター

最新の開発プロセスは、自動化なしでは考えられません。何かを自動化してツールに転送できるのであれば、それは価値があります。フロントエンドにあらゆる種類のリンターがないため、次のプロジェクトに取り組むときは、ESLint、HTMLHint、CSSLintなどの接続ソリューションをすぐに処理する必要があります。<твой_линтер>..。リンターはコードの記述スタイルを制御し、構成と矛盾する場合は即座にエラーを示します。

リンターは、「雑多な」コードを取得する可能性が大幅に高まるチーム開発で特に役立ちます。例をお探しですか？どういたしまして！引用符の選択については、JS開発者の間で絶えず議論があります。シングルの支持者もいれば、ダブルの支持者もいれば、反対の考えを支持する人もいます。リンターは、一貫性を実現し、時間内に道に迷った開発者に警告するのに役立ちます。

継続は会員のみが利用できます

オプション1.「サイト」コミュニティに参加して、サイト上のすべての資料を読みます

指定された期間中にコミュニティに参加すると、すべてのハッカーの資料にアクセスできるようになり、個人の累積割引が増え、プロのXakepスコアを蓄積できるようになります。

Visual Studio Codeは、Microsoftの無料のクロスプラットフォームテキストエディタであり、その軽量性、強力で拡張可能な機能、そしてもちろん、PHPStormやSublimeなどとは異なり、「景品」で人気が高まっています。

最新のIDEと同様に、 VSCode 元の機能を拡張する多くのアドオンがあります。このエディターで作業するプログラマーに役立つ15個のプラグインを選択しました。

ブラウザで開く

デフォルトでは、 VisualStudioコード ブラウザでファイルを開く方法はありません。この拡張機能は、「ブラウザで開く」機能を追加するだけでなく、コンピュータにインストールされている任意のブラウザでファイルを開くこともできます。

クオッカ

クオッカ -特定のコードの実行結果をプレビューし、関数の実行結果と変数の計算値を表示する機能を提供するユーティリティ。拡張機能は設定が簡単で、すぐに使用できます。 JSX または Typescript プロジェクト。

フェイカー

ランダムなデータ（任意の名前、住所、画像、電話番号など）をコードにすばやく挿入できます。各カテゴリには独自のサブセクションがあり、プログラマーのニーズにより正確に調整できます。

CSSピーク

このプラグインを使用すると、CSSファイル内のクラス定義とIDを追跡できます。これを行うには、HTMLファイルのセレクターを右クリックして選択する必要があります 定義に移動 （定義に移動）または ピークの定義 （定義をのぞきます）。

HTMLボイラープレート

HTMLボイラープレート headタグとbodyタグを自分で作成する必要がないため、HTMLの操作が簡単になります。空のhtmlファイルを入力し、Tabキーを押して VisualStudioコード ドキュメントテンプレートを生成します！

きれい

きれい さまざまな人が書いたコードを1つのフォームにまとめることができる、Web開発者の間で人気のあるコードエディタです。設定で きれい 自動実行を設定できます。これにより、JSおよびCSSで記述されたコードがすぐにフォーマットされます。

色情報

CSSで使用される色へのクイックリファレンスを提供する小さなプラグイン。色の名前にカーソルを合わせると、その外観と他の色の形式での記述方法を確認できます（ ヘックス, rgb, hsl そして cmyk).

SVGビューア

この拡張機能を使用すると、SVGファイルを操作できます。SVGファイルを編集し、PNG形式に変換して、データURLスキームを作成できます。

TODOハイライト

このアドオンを使用すると、コード内の未完成の場所にタグを付けることができ、プロジェクトが簡単になります。デフォルトでは、ラベルのみが設定されています TODO （終了）と FIXME （修正）が、独自のラベルタイプを作成することもできます。

アイコン付きのフォント

に追加する拡張機能 VisualStudioコード を含む約20の人気のあるアイコンフォントのサポート Font Awesome, イオニコン, グリフィコン, 材料設計...

最小化

コードの最適化と圧縮のためのユーティリティ。 最小化 で動作します Html, Js そして CSS ファイルとのようなプラグインでうまく機能します uglify-js, clean-css そして html-minifier.

ケースを変更

VSコード 選択範囲を大文字と小文字のみに変換できます。経由 ケースを変更、多数のレジスター（ヘビ、ラクダなど）にアクセスできます。

Regexプレビューア

通常の式を操作できるようにするアドオン。 Regexプレビューア 開いているテキストファイルに通常の式パターンを適用し、すべての一致を強調表示します。と同じように

2020年のWeb開発に最適なVisualStudioコードエディタープラグインを見てみましょう。

ライブサーバー
タグの自動クローズ
輸入コスト
マテリアルテーマ
Apache会議
ロシア語パック
小さなボーナス

1.ライブサーバー

.htmlまたは.htmファイルに対してLiveServerを有効にする：

.htmlまたは.htmファイルがない場合のLiveServerの有効化：

LiveServerを使用してPHPファイルの自動ページ更新を設定する方法

2.サス

Sass構文のサポート：インデント、自動完了など

SASS / SCSSファイルをCSSにリアルタイムでコンパイルします

オンにするには、を押す必要があります サスを見る ステータスバー

Live Sass Complierに含まれるもの：

コンパイルされたファイルのエクスポートフォルダを選択します
cSSスタイルの選択（拡張、コンパクト、凝縮、ネスト）
拡張名の選択（.cssまたは.min.css）
拡張機能の互換性 ライブサーバー
自動ベンダープレフィックスの設定
等々

タグの強調表示-開始と終了

タグの強調表示は、自分でカスタマイズできます。私のセットアップ：

"highlight-matching-tag.leftStyle"：( "borderWidth"： "2px 2px 2px 2px"、 "borderStyle"： "solid"、 "borderColor"： "yellow"、 "borderRadius"： "5px"）、 "highlight-matching-tag.rightStyle"：( "borderWidth"： "2px 2px 2px 2px"、 "borderStyle"： "solid"、 "borderColor"： "yellow"、 "borderRadius"： "5px"）、

エディターでWebの色を対応する色で強調表示する

拡張機能は、同じ色で対称ブラケットに色を付けますが、他のブラケットとは異なります。

1つのペアタグを変更すると、2番目のタグが自動的に変更されます。

デフォルトでは、拡張機能はすべての言語で機能します。この設定を変更するには、次のコードを使用します。

「auto-rename-tag.activationOnLanguage」：["html"、 "xml"、 "php"、 "javascript"]、

8.自動クローズタグ

自動終了タグ

デフォルトですべての言語で機能します：HTML、PHP、JavaScript、マークダウン、リキッドなど。あなたはsetting.jsonで設定を変更することができます

「auto-close-tag.activationOnLanguage」：["php"、 "javascript"、 "javascriptreact"、 "typescript"、 "typescriptreact"、 "plaintext"、 "markdown"、 "vue"、 "liquid"、]