Nuxt 3 with ESLint

概要

Nuxt３でESLintを設定する方法

手順

１. ESLintをインストール

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

２. ESLintを初期化

$ yarn run eslint --init

# 以下を選択
> To check syntax and find problems
> JavaScript modules (import/export)
> Vue.js
> Does your project use TypeScript? Yes
> Where does your code run? Node (※スペースキーで選択)
> What format do you want your config file to be in? JavaScript
> Would you like to install them now with npm? No

３. 設定ファイルを修正

.eslintrc.js

module.exports = {
    "env": {
        "es2021": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/essential",
        "plugin:@typescript-eslint/recommended",
        "@nuxtjs/eslint-config-typescript" // ここを追加
    ],
    "parserOptions": {
        "ecmaVersion": 13,
        "parser": "@typescript-eslint/parser",
        "sourceType": "module"
    },
    "plugins": [
        "vue",
        "@typescript-eslint"
    ],
    "rules": {
    }
};

４. スクリプトを追加

package.json

"scripts": {
  "dev": "nuxi dev",
  "build": "nuxi build",
  "start": "node .output/server/index.mjs",
  "lint": "eslint --ext .ts,.js,.vue ."  // 追加
},

５. 実行

$ yarn lint

完了！！