Visual Studio Code（以下VS Codeと呼びます）は強力なツールですが、残念ながら多くの人がそれを開く正しい方法を見つけていません。今日は、VS Codeをスムーズに使用するための、使いやすく学習しやすい3つのヒントを紹介します。
元のリンク：https ：//medium.com/fractions/3-visual-studio-code-tips-to-boost-your-workflow-b107ec573d75
免責事項：この記事はCSDNによって翻訳されています。転載の際は、出典を明記してください。
以下は翻訳です：
VS Codeの使い方を知っている限り、それは万能ツールです。
時間の経過とともに、VS Codeは改善され、より多くの機能が追加されました。ただし、これらの機能はVS CodeのJSON設定に隠されていることが多く、ほとんどの初心者はそれらをまったく見つけることができません。今日は、開発効率を向上させるのに役立つ3つの珍しいヒントを紹介します。
1.ルートディレクトリの構成が多すぎます。どうすればよいですか？
構成ファイル、別名ドットファイルは、2000年ではなく、プレーンHTML、CSS、JavaScriptを使用しなくなったため、開発に不可欠な部分です。現在、ほとんどすべてを実行するツールがあります。トランスパイラー、コンパイラー、バインダー、コンパイラー、ビューティファイアーなどがあります。幸い、プロジェクトのニーズに応じて、構成ファイルを使用して構成できます。
ただし、ルートディレクトリに数十の構成ファイルがあると、混乱を招く可能性があります。これらのカスタマイズ可能なツールは素晴らしいものですが、一度構成した後は、プロジェクトに予測できないものがない限り、ツールを開くことはありません。では、なぜ私は毎回この混乱したフォルダからホームフォルダを見つけなければならないのですか？
幸い、VSCodeにはfileNestingと呼ばれる実験的なセットアップ機能があります。これにより、開発者はファイルを別のファイルに視覚的にネストし、ワークスペースをクリアできます。良い点は、ファイル構造を台無しにせず、事前に構成されたすべてのツールが余分な労力なしで機能し続けることです。
このプロジェクトでは、すべての構成ファイルをpackage.jsonファイルに入れ、変更ログとライセンスをREADME.mdの下に置きます。
この設定により、最終的に必要なものを一目で見つけることができます。構成ファイルを編集する必要がある場合は、package.jsonのようなフォルダーを展開して、その下のファイルを編集できます。
このトリックでは、setting.jsonに3つのエントリを追加する必要があります。CtrlまたはCmd+Shift + Pを押して開き、「settings.json」と書き込みます。次に、これらのエントリを最後に追加します。
"explorer.experimental.fileNesting.enabled": true,
"explorer.experimental.fileNesting.expand": false,
"explorer.experimental.fileNesting.patterns": {
// Append as many as you want
// The keys are the parents and the values are the nested files.
"package.json": ".gitignore, .parcelrc, .prettierc ...",
"README.md": "CHANGELOG.md, LICENCE"
}
それでおしまい！厄介なルーツはもうありません。すべて簡単に見つけることができます。ファイル構造が変更されていないことを確認するためにスクリーンショットを撮ったプロジェクトを確認して開始することを忘れないでください。
2.拡張は必要ありません
拡張機能は素晴らしいです！これらが、VSCodeが強力である主な理由です。これらの拡張機能の数は、その背後にある巨大なコミュニティのために増加しています。ただし、拡張機能を追加するほど、VS Codeの読み込みに時間がかかるため、このバルクが常に良いとは限りません。一定の時点から6〜7秒以上かかります。それだけ長く待つ場合は、IDEを使用してみませんか？
また、スケーリングでは、セキュリティとパフォーマンスの問題が発生し、結果が得られる可能性があります。想像すらしません。
これが私のアドバイスです。拡張機能がワークステーションにとってそれほど重要でない場合は、インストールしないでください。代わりに、VS Codeのドキュメントを見て、ネイティブな方法を見つけてください。前に言ったように、設定を使用します。VSCodeで多くのことができます。以下は、extensions.jsonの代わりに、拡張機能とその設定の小さなリストを示しています。
二重引用符の色付け
これは、私が長い間使用してきた非常に便利な方法です。しかし、現在は拡張機能ではなくVS Codeでネイティブに実装されており、エクスプレスネイティブ拡張機能を使用しています。
これを有効にするには、settings.jsonを開き、以下を追加します。
"editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs":"active",
自動インポート
自動インポートは、広く使用されているもう1つの拡張機能で、最大200万以上のダウンロードファイルがあります。しかし、必要のないときにワークスペースを占有し続けるのはなぜですか？
VSCode開発者によって実装されたのと同じ機能があります。このコードをsettings.jsonに追加します。
"javascript.suggest.autoImports": true,
"javascript.updateImportsOnFileMove.enabled": "always",
"typescript.suggest.autoImports": true,
"typescript.updateImportsOnFileMove.enabled": "always"
HTMLタグの自動クローズと名前変更
これらの拡張機能は、システムに最初にインストールしたものでしたが、VS Codeが次の設定で自動的に実行できるようになったため、すべて削除されました。
"editor.linkedEditing": true,
"html.autoClosingTags": true,
"javascript.autoClosingTags": true,
"typescript.autoClosingTags": true,
Doxygen Documentation Generator
これは、コードをドキュメント化するときに非常に役立つもう1つの拡張機能です。このため、VSコードはそれ自体を実装することにしました。それでも、600万人以上のユーザーがワークステーションに拡張機能をインストールしています。
これはデフォルトで有効になっていますが、有効になっていない場合は、次のsettings.jsonを追加できます。
"javascript.suggest.completeJSDocs": true,
"javascript.suggest.jsdoc.generateReturns": true,
"typescript.suggest.completeJSDocs": true,
"typescript.suggest.jsdoc.generateReturns": true,
多くの場合、ネイティブで実行できる場合でも、外部拡張機能を使用します。何か提案があれば、返信セクションでそれらを共有することを忘れないでください。
3.今すぐ名前を変更します
コードベース全体で関数または変数の名前を変更する必要がある場合は、古き良き検索と置換を使用して置き換えることができないため、問題が発生します。変数名は文字列または別の関数名にすることができ、それを変更するとすべてが壊れます。
幸い、VSCodeはあなたが思っているよりも賢いです。予想される変数名を簡単に区別し、変数名のみを変更できます。
これを行うには、名前を変更する必要のある変数を選択して、F2キーを押す必要があります。次に、新しい変数名を入力してEnterキーを押します。出来上がり！何も壊れておらず、変数の名前はすぐに変更されました。
結論は
おめでとう！これで、開発環境を高速化するために使用する3つのVSCodeのヒントがわかりました。全体として、VS Codeは強力なツールであり、本来の目的を果たします。ただし、世界で最高のツールを持っていても、その使用方法がわからなければ役に立ちません。