Visual Studio Code(VSCode)の使い方

Visual Studio Code(VSCode)の使い方

Microsoft社は「Visual Studio」という開発環境もあるが、今回はこれとは違うVSCodeを使う話になる。
Windowsでももちろん使えるし、Macでも全く問題なく使える。

以下が初めて起動した画面になる。

VSCodeを日本語化する

VSCodeは初期状態では英語になっているので、日本語化する。

拡張機能アイコンを選択

左サイドバー、上の画像の赤枠の「四角いブロックのアイコン」をクリック。

検索ボックスで、「Japanese Language Pack」と入力。
一覧から「Japanese Language Pack for Visual Studio Code」を選択し、「install」ボタンをクリック。

インストールが完了したら、右下の「Change Language and Reset」ボタンを押すと、VSCodeが自動的に再起動される。

これで日本語化されていると思う。

その他の設定

左サイドの一番下の歯車アイコンから、好みのテーマ(スタイル)を選択できる。
フォントの大きさ設定もできる。

おすすめの拡張機能(任意)

VSCodeの拡張機能は、開発環境を自分好みにカスタマイズするうえで欠かせません。
しかし、使う内容によって必要な拡張機能も大きく変わってくると思うので、開発環境を自分好みにカスタマイズする必要がある。

Prettier – Code formatter:コードの自動整形をしてくれる

ファイルを開く

ファイルから「新しいテキスト ファイル」を選択することで最初のファイルの入力画面が出る。

ファイルを作成して、そのファイルのフォーマット(ここではCSS)を揃えたい場合、画面を右クリックして下の右下の画像のように、ドキュメントのファーマットを選択すると、綺麗にCSSのフォーマットで自動的に揃えてくれるので便利である。

保存するフォルダーを指定し、そこから開く

以下のところで通常開くフォルダを作成、選択できる様になる。後はこのフォルダに保存していけば便利になると思う。もちろん好きなところにも保存できる。