自動テストチュートリアル

Playwright、Seleniumなどの自動テストツールを学ぼう

VSCodeの初期設定

VSCodeの初期設定を行おう

最初にしておくと便利な初期設定を行います。

これから、少し聞き慣れない専門用語が続くかもしれませんが、今はまだそれぞれの意味を完全に理解しようとせず、まずは動画の真似をして、同じように設定を完了させることを目標にしてください。

設定する内容

ターミナルを開く

VSCodeの中から、コンピュータに直接命令を送るための「ターミナル」を開きます。

インデント設定

プログラムの字下げ(インデント)の幅を統一し、誰が見ても読みやすいコードになるように設定します。

おそらく、初期設定ではインデントの幅が「4」になっているかと思いますので、これを「2」に変更してください。

注意:インデントの設定画面は、何かファイルを開いている状態でないと表示されません。動画のように、適当なファイルを開いてから設定を行ってください。

手順

1. PCのメニューバーにある「ターミナル」を押下する

VSCodeの上部メニューバーから「ターミナル」をクリックします。

2. メニューバーから「新しいターミナル」を押下する

ドロップダウンメニューから「新しいターミナル」を選択します。

3. VSCodeで適当なファイルを選択してVSCode上に表示する

左側のエクスプローラーから任意のファイル(例:package.jsonなど)をクリックして開きます。

4. VSCodeの下に表示される「タブのサイズ:」もしくは「スペース:」と表示されたエリアを押下する

VSCodeの右下に表示されている「スペース: 4」や「タブのサイズ: 4」という部分をクリックします。

5. スペースによるインデントを2に変更する

表示されたメニューから「スペースによるインデント」を選択し、「2」を選びます。

6. タブによるインデントを2に変更する

同様に「タブによるインデント」も「2」に設定します。

このステップのゴール

VSCodeの下部にターミナル画面が表示され、インデントの幅が「2」に設定されていれば、このステップは完了です。

VSCode初期設定完了後の画面

次のステップ

次のレッスンでは、VSCodeの基本的な使い方を学びます。