如何使用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 +更漂亮的+ TypeScript + Nuxt 3(或桥)设置如下所示：

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

下面是我在这里找到的一个配置：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:较漂亮/推荐”到eslint扩展。

如果使用的是vscode，我建议您使用脱皮储蓄，而不是依赖格式化程序(Volar，更漂亮，更漂亮)。主要是因为它迫使所有的devs都有相同的格式和规则。