Vue3+Typescript+ESLint+Prettier環境をViteを用いて構築する

@vitejs/create-app@2.8.0

yarn create vite プロジェクト名 --template vue-ts
cd プロジェクト名
yarn

yarn dev

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

env:
  # ブラウザで使用するのでbrowserとes2021をONにしておく
  browser: true
  es2021: true
  # Vue3で使用するdefinePropsやdefineEmits,defineExposeなどを使用できるようにする
  'vue/setup-compiler-macros': true

# Vueを読み込めるようにする。eslint-plugin-vueが提供してくれている。
parser: 'vue-eslint-parser'

parserOptions:
  # VueをTypescriptで使う場合は指定する必要がある。vue-eslint-parser固有のオプション
  parser: '@typescript-eslint/parser'
  # ES Modulesを使ってコードを書く場合はmoduleを指定する必要がある。
  sourceType: module

# eslint-plugin-vueが提供してくれているルールを追加する。
plugins:
  - vue

# パッケージが提供してくれているおすすめ設定を使う設定
extends:
  # eslintが提供してくれている設定
  - 'eslint:recommended'
  # eslint-plugin-vueが提供してくれている設定
  - 'plugin:vue/vue3-recommended'

env:
  'vue/setup-compiler-macros': true

parserOptions:
  parser: '@typescript-eslint/parser'

extends:
  - 'eslint:recommended'
  - 'plugin:vue/vue3-recommended'
  - 'prettier'

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

yarn lint

yarn add -D prettier eslint-config-prettier

# 折り返す行の長さ
printWidth: 120
# インデントのスペース数の指定
tabWidth: 2
# 文字列などシングルクオートで囲む
singleQuote: false
# 末尾のカンマの設定
trailingComma: none
# ステートメントの最後のセミコロンの設定
semi: true
# VueのSCFのscript,styleタグにインデントの指定
vueIndentScriptAndStyle: true

env:
  'vue/setup-compiler-macros': true

parserOptions:
  parser: '@typescript-eslint/parser'

extends:
  - 'eslint:recommended'
  - 'plugin:vue/vue3-recommended'
  # 追加
  - 'prettier'

"scripts": {
  ...
  "format": "prettier -w src/**/*.{ts,vue}",
  "fix": "yarn format && yarn lint"
}