VisualStudioCodeを使用して開発効率を向上させる方法
Visual Studio Codeは、非常に柔軟で強力です。 インとアウトを学ぶことで、開発者としてのスピード、効率、プロセスを大幅に向上させることができます。 この記事では、VisualStudioCodeでの開発作業を改善するための5つの方法を見ていきます。
ショートカットのカスタマイズ
開発者は、ファイルを保存するたびに、コードの行をコピーして貼り付ける、ファイルを開くなどのことを考えてください。 これらのタスクは常に実行し、ショートカットを使用しない場合、これらの各アクションではマウスをつかむ必要があります。 それほど多くはないように思われるかもしれませんが、キーボードからマウスへの移行には、ほんの数秒であっても時間がかかります。
Visual Studio Codeでは、コード->設定->キーボードショートカット(Macの場合)およびファイルに移動して、ショートカットを表示およびカスタマイズできます。 ]->設定->キーボードショートカット(Windows)。
Macの場合はコマンドK+コマンドS、Windowsの場合は Control k + ControlSを使用してショートカットにアクセスできます。
レイアウトの最適化
IDE(統合開発環境)は、多くの場合、多くの機能がすでに組み込まれているため、かさばることがあります。 視覚的には、非常に多くの機能、ボタン、メニューなどがあるため、自分にとって最も重要なもの、つまりコードに気を取られることがよくあります。
VisualStudioCodeでレイアウトを変更する方法はたくさんあります。
注:次のすべてには、設定またはコマンドパレットとCMD + SHIFT + P
のいずれかからアクセスできます。
アクティビティバーを左から右に移動する
デフォルトでは、アクティビティバーは左側にあります。 最小化することもできますが、開くとコードが右に押し出されます。
設定を変更することで(以下の「設定」セクションを参照)、このメニューを右側にドッキングできます。
このように、開いたときにコードがプッシュされることはありません。
アクティビティバーを非表示にする
アクティビティバーを完全に非表示にすることで、前のオプションをさらに一歩進めることができます。 設定メニューを開き、Activity Bar: Visible
を検索します。
禅モード
Zenモードは、画面から他のすべてを取り除く最も簡単な方法であるため、コードのみが表示されます。 Zenモードを切り替えるには、MacではCMD + K Z
、WindowsではCTRL + K Z
を使用します。
中央レイアウト
最後のオプションは、テキストエディタを中央に配置する中央レイアウトを使用することです(Zenモードのデフォルトのように)が、UIの他のすべてのメニューを非表示にするわけではありません。 このレイアウトを使用すると、アクティビティバーを開いてコードをプッシュすることについてそれほど心配する必要はありません。 中央揃えレイアウトを切り替えるには、コマンドパレット(CMD + SHIFT + P
またはCTRL + SHIFT + P
)を開き、Toggle Centered Layout
と入力します。
レイアウトをカスタマイズする方法は他にもあり、時間をかけて探索することができます。
さらなるカスタマイズの使用
Visual Studio Codeは、Web開発者がカスタマイズできるElectron.jsを使用して構築されています。 ショートカットとレイアウトを使用してカスタマイズする方法についてはすでにいくつか見てきましたが、さらにいくつか調べてみましょう。
拡張機能
拡張機能またはプラグインの場合、拡張機能を検索してインストールし、すでにインストールされている拡張機能を表示できる[拡張機能]タブがあります。
これが私がインストールした拡張機能のいくつかです。
探しているものを実現する拡張機能が見つからない場合は、自分で作成することもできます。
テーマ
テーマは実際には拡張機能ですが、色付けを追加できるため、コードやメニューがはるかに読みやすくなります。 たとえば、WesBosによるCobalt2があります。
さらにいくつかあります:
設定
設定もカスタマイズ可能であり、Visual StudioCodeが管理してカスタマイズできるJSONファイルに保存されます。 Visual Studio Codeは、ドロップダウンメニュー、検索機能などのインターフェイスも提供します。 設定を変更できるようにします。 Macの場合はCMD + ,
、Windowsの場合はCTRL + ,
を使用して設定ウィンドウを開くことができます。
自動フォーマットの設定
開発者は多くの場合、コードのクリーンアップに多くの時間を費やします。 インデントの確認、新しい行のテキストの折り返し、セミコロンの追加など。 各開発者は異なる意見を持っている可能性があるため、これをチーム全体に実装するのはさらに難しい場合があります。
VisualStudioCodeで自動フォーマットを設定できます。 ここにいくつかのオプションがあります:
きれい-コードフォーマッター
Prettier-Code Formatter拡張機能は、Prettierを使用してJavaScript、TypeScript、およびCSSをフォーマットできます。
ESLint
ESLint 拡張機能を使用すると、JavaScriptコードのlintとフォーマットの両方を行うことができます。
TSLint
TSLint Extension を使用すると、TypeScriptコードをlintおよびフォーマットできます。
スニペットの作成と使用
毎日、同じコードを何度も何度も書いています。 Visual Studio Codeでは、スニペットを定義して、その定型コードをすべて作成できます。
コードスニペットは言語に基づいており、VisualStudioCodeが管理するJsonファイルに保存されます。 スニペットを追加するには、Macの場合はコード->設定->ユーザースニペット、Windowsの場合はファイル->設定->ユーザースニペットに移動します。 次に、言語を選択します。 JavaScriptで配列を介してfor
ループを生成するためのスニペットを次に示します。
"For Loop for Array": {
"prefix":"forarr",
"body": [
"for (let $index = 0; $index < $array.length; $index++) {",
"\tconst element = $array[$index];",
"\t",
"}"
],
"description":"This will create a for loop through an array"
}
スニペットの作成の詳細については、 VisualStudioCodeでのコードスニペットの作成をご覧ください。 Reactを使用している場合は、 Write React Faster With Simple ReactSnippetsもチェックしてください。
結論
VisualStudioCodeは非常にカスタマイズ可能です。 機能と設定を利用することで、開発エクスペリエンスを向上させるだけでなく、速度と効率を向上させることができます。