最終更新日: 2023年08月15日

Visual Studio Codeの導入

ここではVisual Studio Code（以下、VS Code）のインストールから開発環境の構築と設定までを行います。

VS Codeの機能は非常に多岐に渡るため、Web開発に必要になる最低限の説明のみとなります。マスターしたい方は書籍を購入するか、他の参考サイトなどを利用してください。

1. VS Codeインストール

環境に合わせて、こちらからインストールしてください。

2. 必要プラグインのインストール

各種プラグインは必ずしも必須ではありませんが、利用することで、開発をよりスムーズに行うことができるようになります。

下記は推奨プラグインの一覧です。

  • 【VS Code拡張機能】Japanese Language Pack for Visual Studio Code

    VS Codeの日本語化パックです。まずはこちらを入れておきましょう。

  • 【VS Code拡張機能】TypeScript Vue Plugin（Volar）

    VolarはVue.jsの開発をサポートするVS Codeの拡張機能です。
    .vueファイルのシンタックハイライトやインテリセンスによるコード補完の機能で、開発をよりスムーズにしてくれます。
    ※VS Codeからインストール

  • 【VS Code拡張機能】ESLint

    ESLintは、JavascriptやTypeScriptのコードを自動的に検証（チェック）してくれるツールです。

    • ※後述するPrettierと同じような機能ですが、こちらは検証で自動整形はなし。
    • ※VS Codeからインストール
  • 【VS Code拡張機能】Prettier（Code formatter）

    Prettierはソースコードを自動的に整形するツールです。
    見やすいように自動整形してくれるのですが、日本語環境（日本語の文章）ではやや不便な一面もあります。
    ケース by ケースで使用してください。
    画面でコードが大きく崩れて違和感がある場合は、外したほうが良いでしょう。
    ※VS Codeからインストール

  • 【VS Code拡張機能】Tailwind CSS IntelliSense

    Tailwind CSSに必須の拡張機能です。cssのclass名などを自動補完してくれます。
    ※VS Codeからインストール

  • 【Windows】git

    プログラムのファイルを管理するシステム。ソースコードやファイルなどの変更履歴を記録・追跡できます。
    また、VS Codeのターミナルを利用してGithubを操作するためには、こちらのgitが必要になります。

    公式サイトはこちらから

    ※公式サイトから直接インストール

3. 環境設定

ここでは最低限の（3つの）環境設定のみを行っていきます。
他にも色々と設定があると思いますが、ここでは割愛いたします。ネット上には他の記事が色々あるので、自分に最適な環境を探しながら試しみてください。

  • テーマ（配色）の変更

    VS Codeを新しく始める場合、最も重要なのが画面の「見やすさ」です。
    開発では特に長時間、画面と向き合うため、自分に合ったテーマと配色を選んでください。

    VS Code画面上部「ファイル」>「ユーザー設定」>「テーマ」>「配色テーマ」から任意のテーマを選択してみましょう。

    ※テーマは、キーボードの ▲ か ▼ を押下することで、配色を確認しながら決めることができます。
  • ユーザースニペットの構成

    開発において次に重要なのが、ユーザースニペット（アジャスト機能）です。

    アジャスト機能を利用することで、開発スピードが爆上がりします。

    VS Code画面上部「ファイル」>「ユーザー設定」>「ユーザースニペットの構成」>入力欄に「custom」などの名称を入力する。 すると、ファイル名が「custom.code-snippets」というファイルが自動起動するので、下記のようにコードを入力します。

    こちらのコードは、Nuxt3を構成するスタンダードなタグになります。
    「ba」はbaseを構成するタグを、「se」はsectionを構成するタグを、「nlink」はリンクを構成するタグのコードアシストになります。

    <templete>と<script>タグ、<section>タグは最も頻度が高いタグになります。
    <style>タグはこの中に入っていませんが、Tailwind CSSを利用する場合は、あまり頻度は高くありません。

    もし必要であれば、「ba」の</templete>閉じタグの後に<style>タグを入れてください。

    • custom.code-snippets.json
    • json
    // ******Tips******
// prefix  … 入力コード
// body    … 変換されるスクリプト
// \t      … タブ(スペース挿入)
// \       … エスケープ
// $1      … 入力フォーカス(連番可 / 例：$2 …など)
//           例えば $1 だと、一番最初に入力カーソルが表示される場所になります。

"Base": {
    // Nuxt3のページを構成するBaseスクリプト
    "prefix": "ba",
    "body": [
        "<script setup>",
        "</script>",
        "<template>",
        "\t<div>",
        "\t$1",
        "\t</div>",
        "</template>"
    ]
},
"Section": {
    // template内のsectionスクリプト
    "prefix": "se",
    "body": [
        "<section>",
        "\t<h2 class=\"text-2xl font-bold\">$1</h2>",
        "\t<p></p>",
        "\t<ul>",
        "\t\t<li></li>",
        "\t\t<li></li>",
        "\t</ul>",
        "</section>"
    ]
},
"NuxtLink": {
    // NuxtLinkタグ - Web上では<a href="">に自動的に変換
    "prefix": "nlink",
    "body": ["<NuxtLink to=\"$1\" class=\"underline decoration-dashed decoration-1 underline-offset-4\"></NuxtLink>"]
}

    • index.vue
    • ts
    // ******Tips******
// 下記はNuxt3のページの基本構成になります。
// <script>と<style>は必須ではありませんが、<template>は必須になります。
// <template>の直下の<div>タグはRouteの関係上、必須だと思ってください。

<script setup>
    // 何かしらのscriptコード
</script>

<template>
    <div>
        <section>
            // 何かしらのコンテンツ
        </section>
    </div>
</template>

<style>
</style>

  • テレメトリーレポートの停止

    テレメトリとは、クラッシュや使用状況などのデータをMicrosoftに自動送信している仕組みのことです。

    デフォルトの状態(all)のままでもVS Codeの使用には問題ありませんが、PCのリソースを活用するためにも、見直してみるのも良いと思います。
    無効にする場合、下記から設定を行います。

    VS Code画面上部「ファイル」>「ユーザー設定」>「設定」> 左側メニュー「アプリケーション」>「テレメトリ」から off に変更する

4. 画面の簡易説明と使い方

ここでは詳細な説明は割愛しますが、始めて使用する方は、インターネットで「vs code 使い方 初心者」などのキーワードで検索してみてください。

下記は、一部の参考サイトになります。