Komponen berbilang perkataan ESLint Vue

Question

Adakah terdapat cara untuk menghalang satu perkataan view nama dalam Vue3 daripada mendapat ralat daripada ESLint?

Setiap kali saya menjalankan ESLint, saya mendapat mesej berikut:

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

Saya kini mempunyai persediaan ini:

Struktur fail:

├── 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": {}
}

pakej.json

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

Answer 1

Untuk pengguna yang masih mengalami masalah ini, sila tambahkan perkara berikut di bawah peraturan dalam fail .eslintrc.js

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

Answer 2

Pilihan 1: Lumpuhkan secara global

Untuk melumpuhkan peraturan dalam semua fail (walaupun fail dalam src/components ):

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

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

Untuk mengkonfigurasi src/views/**/*.vue 禁用规则，请指定 overrides hanya untuk :

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

Nota: Jika anda menggunakan Kod VS dengan sambungan ESLint, memulakan semula pelayan ESLint (melalui arahan dalam Panel Perintah>ESLint：重新启动 ESLint Server) atau memulakan semula IDE mungkin memerlukan pemuatan semula konfigurasi.

Pilihan 3: Konfigurasi peringkat direktori src/views/

Anda juga boleh menggunakan fail konfigurasi peraturan .eslintrc.js.eslintrc.js Fail berada dalam direktori ini :

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