Viteのプロジェクトでeslintを使う

パッケージのインストール

$ yarn add -D eslint prettier eslint-config-prettier eslint-plugin-vue@next

セットアップ

$ yarn eslint --init
yarn run v1.22.5
warning package.json: No license field
√ How would you like to use ESLint? · style
√ What type of modules does your project use? · esm
√ Which framework does your project use? · vue
√ Does your project use TypeScript? · No / Yes
√ Where does your code run? · browser
√ How would you like to define a style for your project? · guide
√ Which style guide do you want to follow? · google
√ What format do you want your config file to be in? · JSON
Checking peerDependencies of eslint-config-google@latest
The config that you've selected requires the following dependencies:

eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest eslint-config-google@latest eslint@>=5.16.0 @typescript-eslint/parser@latest
√ Would you like to install them now with npm? · No / Yes
Installing eslint-plugin-vue@latest, @typescript-eslint/eslint-plugin@latest, eslint-config-google@latest, eslint@>=5.16.0, @typescript-eslint/parser@latest
Done in 867.21s.  .] | reify:@typescript-eslint/scope-manager: http fetch GET 200 https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.21.0.tgz 342333ms
udited 421 packages in 13m

package.jsonのscriptsへ下記を追記する

    "lint": "eslint --ext .js,.ts,.vue .",
    "lintfix": "eslint --fix --ext .js,.ts,.vue ."

実行する

$ yarn lint

Visual Studio Codeと連携する

vueファイルを保存した際にEslintでfixさせる

.vscode/settings.json ファイルを作成する

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