Как настроить eslint и prettier с помощью nuxt 3?

Question

Я установил эти зависимости Package.json:

          {

      "devDependencies": {
        "@intlify/nuxt3": "^0.1.6",
        "@nuxtjs/eslint-config": "^7.0.0",
        "@nuxtjs/eslint-module": "^3.0.2",
        "eslint": "^8.1.0",
        "eslint-config-prettier": "^8.3.0",
        "eslint-plugin-nuxt": "^3.0.0",
        "eslint-plugin-vue": "^7.20.0",
        "nuxt3": "latest",
        "prettier": "2.4.1",
        "sass": "^1.43.3",
        "vite-plugin-eslint": "^1.3.0"
      }
    }

На .eslintrc.js

        extends: [
    'eslint:recommended',
    'plugin:nuxt/recommended',
    'prettier'
  ],

На nuxt.config.ts

      import eslintPlugin from 'vite-plugin-eslint';
export default defineNuxtConfig({
...
    vite: {
        plugins: [eslintPlugin()]
    },
    buildModules: ['@intlify/nuxt3', '@nuxtjs/eslint-module',],
})

И ни один из этих вариантов не работает с nuxt 3.

Answer 1

Простая установка ESLint + Prettier + TypeScript + Nuxt 3 (или Bridge) будет выглядеть так:

yarn add --dev eslint prettier eslint-config-prettier eslint-plugin-prettier @nuxtjs/eslint-config-typescript

.eslintrc.js

      module.exports = {
  root: true,
  extends: ['@nuxtjs/eslint-config-typescript', 'plugin:prettier/recommended'],
}

package.json

      {
  "scripts": {
    "lint": "eslint --ext .ts,.js,.vue ."
  }
}

Answer 2

Моя конфигурация довольно проста и основана на официальных репозиториях nuxt git.

      // nuxt.config.ts
export default defineNuxtConfig({
  modules: ["@nuxtjs/eslint-module"]
});

и

      // .eslintrc
{
  "extends": ["@nuxt/eslint-config"]
}

и

      // package.json
{
  "name": "nuxt-app",
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "@nuxt/eslint-config": "^0.1.1",
    "@nuxtjs/eslint-module": "^4.0.2",
    "@types/node": "^18",
    "eslint": "^8.39.0",
    "nuxt": "^3.4.3",
    "prettier": "^2.8.8"
  }
}

Answer 3

Я установил эту конфигурацию, и она сработала.

сначала установи eslint

      npm add --dev eslint

затем установите Prettier

      npm add --dev prettier eslint-config-prettier eslint-plugin-prettier

затем поддержка TypeScript

      npm add --dev typescript @typescript-eslint/parser @nuxtjs/eslint-config-typescript

Конфигурация eslintrc:

      // .eslintrc.json
module.exports = {
    env: {
        browser: true,
        es2021: true,
        node: true,
    }     ,
    extends: [
        "@nuxtjs/eslint-config-typescript", 
        "plugin:prettier/recommended"
    ],
    overrides: [],
    parser: "vue-eslint-parser",
    parserOptions: {
        parser: "@typescript-eslint/parser",
        ecmaVersion: "latest",
        sourceType: "module",
    },
    plugins: ["vue", "@typescript-eslint"],
    rules: {
    "vue/multi-word-component-names": 0,
    },
};

Answer 4

Вот конфигурация, которую я нашел здесь: https://github.com/nuxt/framework/discussions/2815#discussioncomment-2050408 .

      // .eslintrc.json
{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:vue/vue3-recommended",
    "plugin:@typescript-eslint/recommended",
    "@nuxtjs/eslint-config-typescript"
  ],
  "parserOptions": {
    "ecmaVersion": "latest",
    "parser": "@typescript-eslint/parser",
    "sourceType": "module"
  },
  "plugins": [
    "vue",
    "@typescript-eslint"
  ],
  "rules": {}
}

Если вы действительно хотите использовать красивее (imo eslint уже выполняет эту работу, использование обоих может быть очень раздражающим для настройки), вы можете добавить библиотеку eslint-plugin-prettier, а затем добавить «plugin:prettier/recommended» в расширение eslint.

Не знаю, какую IDE вы используете, но если это vscode, я советую вам использовать линтинг при сохранении вместо того, чтобы полагаться на форматтеры (Volar, prettier, eslint-prettier). В основном потому, что это заставляет всех разработчиков иметь одинаковый формат и правила.