Visual Studio Codeは、非常に柔軟で強力です。 インとアウトを学ぶことで、開発者としてのスピード、効率、プロセスを大幅に向上させることができます。 この記事では、VisualStudioCodeでの開発作業を改善するための5つの方法を見ていきます。

ショートカットのカスタマイズ

開発者は、ファイルを保存するたびに、コードの行をコピーして貼り付ける、ファイルを開くなどのことを考えてください。 これらのタスクは常に実行し、ショートカットを使用しない場合、これらの各アクションではマウスをつかむ必要があります。 それほど多くはないように思われるかもしれませんが、キーボードからマウスへの移行には、ほんの数秒であっても時間がかかります。

Visual Studio Codeでは、コード->設定->キーボードショートカット(Macの場合)およびファイルに移動して、ショートカットを表示およびカスタマイズできます。 ]->設定->キーボードショートカット(Windows)。

Macの場合はコマンドK+コマンドS、Windowsの場合は Control k + ControlSを使用してショートカットにアクセスできます。

the shortcut menu for viewing and customizing in Visual Studio Code

レイアウトの最適化

IDE(統合開発環境)は、多くの場合、多くの機能がすでに組み込まれているため、かさばることがあります。 視覚的には、非常に多くの機能、ボタン、メニューなどがあるため、自分にとって最も重要なもの、つまりコードに気を取られることがよくあります。

VisualStudioCodeでレイアウトを変更する方法はたくさんあります。

:次のすべてには、設定またはコマンドパレットCMD + SHIFT + Pのいずれかからアクセスできます。

アクティビティバーを左から右に移動する

デフォルトでは、アクティビティバーは左側にあります。 最小化することもできますが、開くとコードが右に押し出されます。

activity bar on the left of the screen

設定を変更することで(以下の「設定」セクションを参照)、このメニューを右側にドッキングできます。

Settings section

このように、開いたときにコードがプッシュされることはありません。

Activity bar on the right of the screen

アクティビティバーを非表示にする

アクティビティバーを完全に非表示にすることで、前のオプションをさらに一歩進めることができます。 設定メニューを開き、Activity Bar: Visibleを検索します。

Settings menu after searching

禅モード

Zenモードは、画面から他のすべてを取り除く最も簡単な方法であるため、コードのみが表示されます。 Zenモードを切り替えるには、MacではCMD + K Z、WindowsではCTRL + K Zを使用します。

Code on screen with no other menus

中央レイアウト

最後のオプションは、テキストエディタを中央に配置する中央レイアウトを使用することです(Zenモードのデフォルトのように)が、UIの他のすべてのメニューを非表示にするわけではありません。 このレイアウトを使用すると、アクティビティバーを開いてコードをプッシュすることについてそれほど心配する必要はありません。 中央揃えレイアウトを切り替えるには、コマンドパレット(CMD + SHIFT + PまたはCTRL + SHIFT + P)を開き、Toggle Centered Layoutと入力します。

Centered layout with the tabbed menu on the left side of the screen

レイアウトをカスタマイズする方法は他にもあり、時間をかけて探索することができます。

さらなるカスタマイズの使用

Visual Studio Codeは、Web開発者がカスタマイズできるElectron.jsを使用して構築されています。 ショートカットとレイアウトを使用してカスタマイズする方法についてはすでにいくつか見てきましたが、さらにいくつか調べてみましょう。

拡張機能

拡張機能またはプラグインの場合、拡張機能を検索してインストールし、すでにインストールされている拡張機能を表示できる[拡張機能]タブがあります。

これが私がインストールした拡張機能のいくつかです。

Author's extensions inlcuding advanced-new-file, auto rename tag, better comments, bookmarks, bracket pair colorizer, cobalt2 theme official, debugger for chrome, dotenv, dracula official, editorconfig for VS Code, ES7 React/Redux/GraphQL

探しているものを実現する拡張機能が見つからない場合は、自分で作成することもできます。

テーマ

テーマは実際には拡張機能ですが、色付けを追加できるため、コードやメニューがはるかに読みやすくなります。 たとえば、WesBosによるCobalt2があります。

Image showing Cobalt 2 Official them in use

さらにいくつかあります:

設定

設定もカスタマイズ可能であり、Visual StudioCodeが管理してカスタマイズできるJSONファイルに保存されます。 Visual Studio Codeは、ドロップダウンメニュー、検索機能などのインターフェイスも提供します。 設定を変更できるようにします。 Macの場合はCMD + ,、Windowsの場合はCTRL + ,を使用して設定ウィンドウを開くことができます。

User settings window in view

自動フォーマットの設定

開発者は多くの場合、コードのクリーンアップに多くの時間を費やします。 インデントの確認、新しい行のテキストの折り返し、セミコロンの追加など。 各開発者は異なる意見を持っている可能性があるため、これをチーム全体に実装するのはさらに難しい場合があります。

VisualStudioCodeで自動フォーマットを設定できます。 ここにいくつかのオプションがあります:

きれい-コードフォーマッター

Prettier-Code Formatter拡張機能は、Prettierを使用してJavaScript、TypeScript、およびCSSをフォーマットできます。

Image of the Prettier - Code Formatter page

ESLint

ESLint 拡張機能を使用すると、JavaScriptコードのlintとフォーマットの両方を行うことができます。

Image of the ESLint page

TSLint

TSLint Extension を使用すると、TypeScriptコードをlintおよびフォーマットできます。

Image of the TSLint page

スニペットの作成と使用

毎日、同じコードを何度も何度も書いています。 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は非常にカスタマイズ可能です。 機能と設定を利用することで、開発エクスペリエンスを向上させるだけでなく、速度と効率を向上させることができます。