Composant multi-mots ESLint Vue

Question

Existe-t-il un moyen d'empêcher les noms de view mots uniques dans Vue3 d'obtenir des erreurs d'ESLint ?

Chaque fois que je lance ESLint, je reçois le message suivant :

  1:1  error  Component name "About" should always be multi-word  vue/multi-word-component-names

J'ai actuellement cette configuration :

Structure du fichier :

├── index.html
├── node_modules
├── npm
├── package.json
├── package-lock.json
├── public
│   └── favicon.ico
├── README.md
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.svg
│   ├── components
│   │   └── Menu.vue
│   ├── env.d.ts
│   ├── main.ts
│   ├── router
│   │   └── index.ts
│   └── views
│       ├── About.vue
│       └── Home.vue
├── tsconfig.json
└── vite.config.ts

.eslintrc :

{
    "root": true,
    "env": {
        "node": true
    },
    "extends": [
        "plugin:vue/vue3-essential",
        "eslint:recommended",
        "@vue/typescript/recommended"
    ],
    "parserOptions": {
        "ecmaVersion": 2021
    },
    "rules": {}
}

package.json

{
...
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview",
    "lint": "eslint --ext .ts,vue --ignore-path .gitignore ."
  },
...
}

Answer 1

Pour les utilisateurs qui rencontrent toujours ce problème, veuillez ajouter ce qui suit sous les règles dans le .eslintrc.js fichier

rules: {
  ...
  'vue/multi-word-component-names': 0,
}

Answer 2

Option 1 : Désactiver globalement

Pour désactiver une règle dans tous les fichiers (même les fichiers dans src/components) :

// /.eslintrc.js
module.exports = {
  ⋮
  rules: {
    'vue/multi-word-component-names': 0,
  },
}

Option 2 :在 src/views/ 的 ESLint 配置中覆盖

Pour configurer src/views/**/*.vue 禁用规则，请指定 overrides uniquement pour  : 

// /.eslintrc.js
module.exports = {
  ⋮
  overrides: [
    {
      files: ['src/views/**/*.vue'],
      rules: {
        'vue/multi-word-component-names': 0,
      },
    },
  ],
}

Remarque : Si vous utilisez VS Code avec l'extension ESLint, le redémarrage du serveur ESLint (via la commande dans le Panneau de commande>ESLint：重新启动 ESLint Server) ou le redémarrage de l'IDE peut nécessiter un rechargement de la configuration.

Option 3 : Configuration au niveau du répertoire de src/views/

Vous pouvez également utiliser le fichier de configuration des règles .eslintrc.js.eslintrc.js Le fichier est dans ce répertoire  :

// /src/views/.eslintrc.js
module.exports = {
  rules: {
    'vue/multi-word-component-names': 0,
  },
}