Le module n'est pas défini dans le projet Vue

Question

Je viens de créer une nouvelle application Vue en exécutant npmini tvue@latest comme spécifié dans la documentation officielle. J'ai ensuite essayé d'ajouter Tailwind à mon application en suivant le guide sur le site Vue et Vite. Cependant, lors de l'ouverture du fichier tailwind.config.js, j'ai remarqué qu'ESLint me dit que le module n'est pas défini et que la syntaxe module.exports ne fonctionne pas. pourquoi donc? Comment puis-je le résoudre? EDIT : .eslintrc par défaut créé par Vue

P粉333186285 · Answer

Pensez à utiliser

.eslintrc.cjs

…
  overrides: [
    {
      files: ["{vue,vite}.config.*"],
      env: {
        node: true,
      },
    },
  ],

et définissez l'option compilerOptions.types: ["node"] TS uniquement pour ces fichiers.

Cela pourrait ressembler à ceci :

.eslintrc.cjs

/* eslint-env node */
require("@rushstack/eslint-patch/modern-module-resolution");

module.exports = {
  root: true,
  extends: [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "@vue/eslint-config-typescript",
    "@vue/eslint-config-prettier",
  ],
  overrides: [
    {
      files: ["cypress/e2e/**/*.{cy,spec}.{js,ts,jsx,tsx}"],
      extends: ["plugin:cypress/recommended"],
    },
    {
      files: ["{vue,vite}.config.*"],
      env: {
        node: true,
      },
    },
  ],
  parserOptions: {
    ecmaVersion: "latest",
  },
};

tsconfig.config.json

{
  "extends": "@vue/tsconfig/tsconfig.node.json",
  "include": ["vue.config.*", "vite.config.*", "vitest.config.*", "cypress.config.*", "playwright.config.*"],
  "compilerOptions": {
    "composite": true,
    "types": ["node"]
  }
}

P粉738821035 · Answer

Ajoutez-le à .eslintrc.cjs

env: {
  node: true,
},

Votre fichier ressemble donc à

/* eslint-env node */
require("@rushstack/eslint-patch/modern-module-resolution");

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "@vue/eslint-config-prettier",
  ],
  parserOptions: {
    ecmaVersion: "latest",
  },
};

Vous pouvez ajouter n'importe laquelle de ces valeurs