ESLintを導入する

npm i -D eslint eslint-plugin-vue @vue/eslint-config-typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin

touch .eslintrc.yml

で設定ファイルを作成する。

作成した設定ファイルに、

env:
browser: true
es2021: true
extends:
- 'plugin:vue/vue3-recommended'
- 'eslint:recommended'
- '@vue/typescript/recommended'
parserOptions:
ecmaVersion: 12
plugins:
- vue
- '@typescript-eslint'
rules: {}

を記入する。

package.jsonに

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

上記Scriptを追加する。

npm run lint

上記コマンドで無事にScriptが実行されるかを確認する。

環境構築時に作成されるvite-env.d.tsがESLintで引っかかるので、

touch .eslintignore

でESLlint除外設定ファイルを作成し、

vite-env.d.ts

と記入する。

Prettierを導入

npm i -D prettier @vue/eslint-config-prettier

で必要パッケージのインストールをする。

touch .prettierrc.yml

で、設定ファイルを作成し、設定を記入する。

設定の意味はこちらを参考に。

今回は下記を採用した。

printWidth: 80
tabWidth: 2
singleQuote: true
semi: false

最後にScriptを追加する。

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

Scriptを実行し動けば問題ない。

同時に実行する

ふたつそれぞれ実行するのは面倒なので、

"scripts": {
...
"fix": "npm run format && npm run lint"
}

上記を追記し、一気にふたつ動かすことができる。

無事に動いていれば成功。