明けましておめでとうございます。アプリケーションサービス部 河野です。
Vue2.0 系の LTS 終了が 2023 年 12 月 31 日と通知されており、これから Vue を使用する際は 3.0 系がほとんどだと思います。
そこで今回は、Vite を使用した Vue3 系 × TypeScript の VSCode 開発環境構築についてを記載します。
環境
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/ にアクセスして 以下の画面が表示できることを確認します。
最低限のセットアップは以上です。一瞬ですね。
3. VSCode 設定
README.md に Recommended IDE Setup が記載されているので、こちらに沿って設定していきます。
Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).
マーケットプレイスから Volar を検索して インストールをクリックします。
コマンドパレット（cmd + Shift + P） を開き、以下を実行します。
Show Enabled Extensions
左ペインに「Vetur」があれば右クリックで選択し無効化します。
Volar 同様、マーケットプレイスからTypeScript Vue Plugin (Volar) を検索してインスロールをクリックします。
Type Support For .vue Imports in TS にさらに高速化するための設定が記載されているので、併せて設定します。
- Disable the built-in TypeScript Extension
- Run
Extensions: Show Built-in Extensionsfrom VSCode's command palette- Find
TypeScript and JavaScript Language Features, right click and selectDisable (Workspace)- Reload the VSCode window by running
Developer: Reload Windowfrom the command palette.
コマンドパレットを開き、以下を実行します。
Extensions: Show Built-in Extensions
TypeScript と JavaScript の言語機能 があれば、歯車マークをクリックして、無効にする をクリックします。
コマンドパレットを開き以下を実行し、再読み込みすれば完了です。
Reload Window
4. リンターの設定
リンターは静的解析ツールの総称で呼ばれますが、今回は、Javascript の代表的な 静的検証ツールの ESLint を導入します。
試しに 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 を導入すると、未使用の変数や、any 型を使用している箇所で warnig として指摘してくれます。
4-1. ESLint のインストール
ターミナルで以下コマンドを実行します。
npm install --save-dev eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin@latest
- eslint: ESLint 本体
- eslint-plugin-vue: Vue公式ESLintプラグイン
- @typescript-eslint/eslint-plugin: ESLintやPrettierをTypeScriptに対応させるためのツール
- @typescript-eslint/parser: TypeScript 用のパーサー
4-2. .eslintrc.yaml の定義
プロジェクトルート.eslintrc.yaml を作成します。
これらは、ESLint の組み込みのルール、適用方法、適用対象ファイル等の様々な設定を定義することができます。
.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 からインストールをクリックし、拡張機能をインストールします。
VSCode 側で ESLint を指定するように .vscode/settings.json を作成します。
{ "eslint.packageManager": "npm", "editor.codeActionsOnSave": { "source.fixAll.eslint": true, "source.fixAll.stylelint": true } }
コマンドパレットを開き以下を実行します。
Reload Window
エディタ上で、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 を導入します。
ターミナルで以下コマンドを実行します。
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 を作成することでフォーマッターのルールをより細かく制御できます。
例えば、tab のサイズを 2、シングルクォーテーションを強制する場合は以下のようになります。
{ "singleQuote": true, "tabWidth": 2 }
5-4. VSCode と連携
ESLint 同様、都度コマンドを打つのは大変なので、VSCode のエディタと連携し、エディタ上で 保存すると自動的に Prettier が実行されるように VS Code を設定します。
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 (執筆記事の一覧)
