VSCodeでVite3によってVue.js3のTS環境を作成ESLintとPrettierを追加 #Vue.js

0.事前準備

環境

Windows 10
vs code
Node.js：v18.0.0
本記事はVite v3.0を使います

インストール

Node.js（必須）
yarn（npmまたはpnpmでも構いません。本記事はyarnを使っています）
Git（なくてもいい）

1.初期化Vue.js

簡単なステップですね。公式サイトと同じです。

yarn create vite

プロジェクト（フォルダ）の名称を入力、ここでviteを入力しました。
この記事のメインフォルダです。

JSフレームワークを選択、ここでvueを選択

jsかts、ここでtsを選択

ここまで初期化は成功しました
viteフォルダに移動して、プロジェクトをインストールします。

cd vite
yarn

プロジェクト起動

yarn dev

起動した後、アクセスすると、こういうページが表示されます。

2.git追加（必須ではない）

viteフォルダで、gitを初期化

git init

.gitignoreファイルを作成、無視したいファイルを入力
無視したいファイルはお好きにどうぞ

node_modules
.DS_Store
dist
*.local
*.code-workspace
.vscode

3.editorconfig追加（必須ではない）

viteフォルダで、.editorconfigファイルを作成
チームのIDE/開発フォーマットルールの設定ファイルです、ルールはお好きにどうぞ
VSCodeなら、editorconfigプラグインに合わせて使うことがおすすめです。

root = true

[*.{js,ts,json}]
indent_size = 2
charset = utf-8
indent_style = space
trim_trailing_whitespace = true
insert_final_newline = true

4.Port修正（必須ではない）

package.jsonファイルで

// 修正前
"dev": "vite",

// 修正後、お好きなport数字を修正してください
"dev": "vite --port 8000",

5.ESLint追加

viteでESLintをインストール
コアのeslint、vueプラグイン、tsプラグインをインストール
VSCodeなら、ESLintプラグインに合わせて使うことがおすすめです。

yarn add -D eslint eslint-plugin-vue @vue/eslint-config-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser

package.jsonファイルで、lintスクリプトを追加（必須ではない）

"lint": "eslint --fix src/*.{ts,vue} && eslint --fix src/**/*.{ts,vue}"

viteフォルダで、.eslintrc.cjsファイルを新規作成、ルールはお好きにどうぞ
node18とvite3を使う場合、.jsを使うと効かない可能性がありますので、.eslintrcファイルの拡張子を.cjsにします。node < v18なら.jsは大丈夫です。

module.exports = {
  root: true,

  env: {
    browser: true,
    es2021: true,
    node: true,
  },

  extends: [
    "plugin:vue/vue3-recommended",
    "eslint:recommended",
    "@vue/typescript/recommended",
  ],

  parserOptions: {
    ecmaVersion: 12,
  },

  plugins: ["vue", "@typescript-eslint"],

  rules: { // あなたの素晴らしいルール },
};

6.Prettier追加

viteフォルダで、Prettierをインストール
VSCodeなら、Prettierプラグインに合わせて使うことがおすすめです。

yarn add -D prettier @vue/eslint-config-prettier

viteフォルダで、.prettierrc.cjsファイルを新規作成、ルールはお好きにどうぞ
node18とvite3を使う場合、.jsを使うと効かない可能性がありますので、.prettierrcファイルの拡張子を.cjsにします。node < v18なら.jsは大丈夫です。

module.exports = {
  semi: false,
  singleQuote: true,
  tabWidth: 2,
  useTabs: false,
  printWidth: 120,
  proseWrap: 'preserve',
  trailingComma: 'all',
  // あなたの素晴らしいルール
}

7.VSCode設定

ここで直接的にsetting.jsonファイルを編集します。

  // 保存する同時に自動整形
  "editor.formatOnSave": true,

  // Prettierを使うファイル種類
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

8.検証

Prettier検証

App.vueでコードを全部クリア、形がきたないdivを書く

<template>
         <div>1
  </div>
</template>

ctrl+sで保存すると、自動整形すれば成功

<template>
  <div>1</div>
</template>

ESLint検証

App.vueで、数字タイプの定数testに文字列の値を設定

<script setup lang="ts">
  const test: number = '1' //エラー
</script>

このエラーがあったら、成功
厳密に言うと@typescript-eslint/xxxxxxxみたいなエラーが出たら、成功

9.もう一つの問題

viteフォルダのindex.htmlファイルを開くと、一つのエラーがあります
これはeslintはhtmlファイルが認識できないという原因です
このエラーは無視しても構いませんが、対策もあります。

//インストール
yarn add -D eslint-plugin-html

.eslintrc.cjsファイルのpluginsで、'html'を追加します

// ..省略

plugins: ['vue', 'html', '@typescript-eslint'],

// ..省略

10.最後

ここでeslintのデフォルトルールを使っています。googleなど別のルールを使いたい場合は個別で追加してください