トップ > Vue.js > 【初心者向け】 Vue3.0 × TypeScript の VSCode 開発環境を準備する

【初心者向け】 Vue3.0 × TypeScript の VSCode 開発環境を準備する

Vue.js
記事タイトルとURLをコピーする

明けましておめでとうございます。アプリケーションサービス部 河野です。

Vue2.0 系の LTS 終了が 2023 年 12 月 31 日と通知されており、これから Vue を使用する際は 3.0 系がほとんどだと思います。

v2.vuejs.org

そこで今回は、Vite を使用した Vue3 系 × TypeScript の VSCode 開発環境構築についてを記載します。

環境

  • PC: mac OS Monterey 12.5.1
  • エディタ: VSCode バージョン 1.74.2
  • シェル: fish バージョン 3.4.1
  • Node.js: バージョン 18.0.0

Vite とは？

Vite は、Vue.jsの作者であるEvan You氏とオープンソースコミュニティで開発されている CLI ツールです。
Vue.js や React のプロジェクト作成や、実行等が行えるコマンドが提供されています。

公式ページにも記載されている通り、より速く無駄のない開発体験を提供することに主眼を置いており、
コマンドひとつでプロジェクトの作成ができ、ビルド時間もとても早いのが特徴です。

実践

それでは、 Vite を使用して Vue3 系 × Typescipt の開発環境を作成していきます。

1. Vite プロジェクト作成

$ npm create vite@latest
Need to install the following packages:
  create-vite@latest
Ok to proceed? (y) y

✔ Project name: … vite-project
✔ Select a framework: › Vue
✔ Select a variant: › TypeScript

カレントディレクトリに vite-project のフォルダが作成されていれば OK です。
作成時に フォルダ名を変更したい場合は、先のコマンドの Project name を任意の名前に変更してください。

2. ローカル環境起動

$ cd vite-project
$ npm install
$ npm run dev

http://localhost:5173/ にアクセスして 以下の画面が表示できることを確認します。

npm run dev の初期画面

最低限のセットアップは以上です。一瞬ですね。

3. VSCode 設定

README.md に Recommended IDE Setup が記載されているので、こちらに沿って設定していきます。

Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

マーケットプレイスから Volar を検索して インストールをクリックします。

VSCode 拡張：Volar

コマンドパレット（cmd + Shift + P） を開き、以下を実行します。

Show Enabled Extensions

左ペインに「Vetur」があれば右クリックで選択し無効化します。

Vetur 無効

Volar 同様、マーケットプレイスからTypeScript Vue Plugin (Volar) を検索してインスロールをクリックします。

TypeScript Vue Plugin (Volar) インストール

Type Support For .vue Imports in TS　にさらに高速化するための設定が記載されているので、併せて設定します。

  1. Disable the built-in TypeScript Extension
    1. Run Extensions: Show Built-in Extensions from VSCode's command palette
    2. Find TypeScript and JavaScript Language Features, right click and select Disable (Workspace)
  2. Reload the VSCode window by running Developer: Reload Window from the command palette.

コマンドパレットを開き、以下を実行します。

Extensions: Show Built-in Extensions

TypeScript と JavaScript の言語機能 があれば、歯車マークをクリックして、無効にする　をクリックします。

TypeScript と JavaScript の言語機能 無効

コマンドパレットを開き以下を実行し、再読み込みすれば完了です。

Reload Window

4. リンターの設定

リンターは静的解析ツールの総称で呼ばれますが、今回は、Javascript の代表的な 静的検証ツールの ESLint を導入します。

eslint.org

試しに HelloWorld.vue の <script setup> タグ部分を以下のように編集してみてください。

<script setup lang="ts">
import { ref, watchEffect } from 'vue'　// 未使用のモジュールを追加
 
defineProps<{ msg: string }>()
 
const hoge: any= 'string'　// 未使用の変数、any 型を定義
 
const count = ref(0)
</script>

ESLint 導入前

現状はエディタからの指摘は表示されていませんが、ESLint を導入すると、未使用の変数や、any 型を使用している箇所で warnig として指摘してくれます。

4-1. ESLint のインストール

ターミナルで以下コマンドを実行します。

npm install --save-dev eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin@latest

4-2. .eslintrc.yaml の定義

プロジェクトルート.eslintrc.yaml を作成します。 これらは、ESLint の組み込みのルール、適用方法、適用対象ファイル等の様々な設定を定義することができます。

eslint.org

.eslintrc.yaml

root: true

env:
  browser: true
  es2021: true
  "vue/setup-compiler-macros": true

parser: "vue-eslint-parser"

parserOptions:
  parser: "@typescript-eslint/parser"
  sourceType: module

extends:
  - "eslint:recommended"
  - "plugin:vue/vue3-essential"
  - "plugin:@typescript-eslint/recommended"
plugins:
  - "vue"

各セクションの用途をざっくり理解したい人は、以下の記事がオススメです。
ESLint の設定ファイル (.eslintrc) の各プロパティの意味を理解する｜まくろぐ

以下コマンドを実行して、ESLint を実行します。

$ npx eslint 'src/**/{*.ts,*.vue}'

~/vite-project/src/components/HelloWorld.vue
  2:15  warning  'watchEffect' is defined but never used    @typescript-eslint/no-unused-vars
  6:7   warning  'hoge' is assigned a value but never used  @typescript-eslint/no-unused-vars
  6:13  warning  Unexpected any. Specify a different type   @typescript-eslint/no-explicit-any

✖ 3 problems (0 errors, 3 warnings)

未使用な変数や any型について warning で指摘してくれました。

4-3. VSCode と連携

都度、コマンドを打つのは大変なので、VSCode のエディタと連携し、エディタ上で ESLint の指摘を確認できるように VS Code を設定します。

ESLint からインストールをクリックし、拡張機能をインストールします。

ESLint のインストール

VSCode 側で ESLint を指定するように .vscode/settings.json を作成します。

{
    "eslint.packageManager": "npm",
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,
        "source.fixAll.stylelint": true
    }
}

コマンドパレットを開き以下を実行します。

Reload Window

ESLint が any 型 未使用の変数を指摘

エディタ上で、ESLint の指摘が確認できました。

5. フォーマッターの設定

5-1. Prettier のインストール

次に フォーマッターを導入します。フォーマッターは、自動的に決められたコードスタイルに整形してくれるツールです。
また、フォーマッターはあくまで書式のスタイルを統一してくれるもので、バグを発見するためのものではありません。

In other words, use Prettier for formatting and linters for catching bugs! https://prettier.io/docs/en/comparison.html

ESLint 同様にフロントエンド開発ではメジャーである Prettier を導入します。

prettier.io

ターミナルで以下コマンドを実行します。

npm install --save-dev prettier eslint-config-prettier
  • prettier: Prettier 本体
  • eslint-config-prettier: 他の静的解析ツールとの競合を防ぐ用のルール

今度は、HelloWorld.vue の <script setup> タグ部分を以下のように編集してください。

<script setup lang="ts">
import { ref, watchEffect} from 'vue'

defineProps<{msg:string}>()

        const hoge: any= 'string'

const count = ref(0)
</script>

ターミナル上で、以下コマンドを Prettier を実行します。

npx prettier -w ./src/components/HelloWorld.vue

インデントや、スペースが修正されてればOKです。

5-2. eslintrc.yaml の修正

Prettier にもリンターのルールがあるため、 ESLint のルールと競合しないように、eslintrc.yaml の extends に "prettier" を追記（eslint-config-prettier）します。
extends は上から順番にルールを適用するため、最後の prettier で Prettier と競合するESLintルールをオフにするように適用します。

extends:
  - "eslint:recommended"
  - "plugin:vue/vue3-essential"
  - "plugin:@typescript-eslint/recommended"
  - "prettier"

参考：https://prettier.io/docs/en/integrating-with-linters.html#notes

5-3. .prettierrc の定義（任意）

.prettierrc を作成することでフォーマッターのルールをより細かく制御できます。

prettier.io

例えば、tab のサイズを 2、シングルクォーテーションを強制する場合は以下のようになります。

{
    "singleQuote": true,
    "tabWidth": 2
}

5-4. VSCode と連携

ESLint 同様、都度コマンドを打つのは大変なので、VSCode のエディタと連携し、エディタ上で 保存すると自動的に Prettier が実行されるように VS Code を設定します。

Prettier からインストールをクリックし、拡張機能をインストールします。

Prettier

VSCode 側で Prettier を指定するように .vscode/settings.json に以下を追記します。

{
    "eslint.packageManager": "npm",
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,
        "source.fixAll.stylelint": true
    },
    // ↓↓追記
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,　
    "editor.formatOnPaste": true,
    "editor.formatOnType": true
}

コマンドパレットを開き以下を実行します。

Reload Window

これで保存時に、自動フォーマットが実行されるはずです。

さいごに

最近 フロントエンドの開発環境をゼロから設定する機会があったので、備忘録として記載してみました。
vite.config.ts の設定や、Mock Service Worker 等も追々紹介できればと思います。

どなたかのお役に立てれば幸いです。

swx-go-kawano (執筆記事の一覧)