Solve the problem that the first line of the vue project is red (ESLint configuration) and the first line of the newly created vue file is red

Table of contents

Recap:

Modify ESLint configuration

The first line of the newly created vue file is still red

Reason for redemption:

Solution:

---

Recap:

The method found on the Internet may be added in the package.json file or the .eslintrc.js file

requireConfigFile: false

If this method doesn't work for your error, please try the method provided in this article, I believe it can solve your problem with a high probability

Modify ESLint configuration

For technology stacks such as Vue 3 + TypeScript + Pinia, the following is a more comprehensive ESLint configuration example: (.eslintrc.js file)

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/vue3-essential',
    '@vue/typescript/recommended',
    'eslint:recommended',
  ],
  parserOptions: {
    ecmaVersion: 2020,
  },
  rules: {
    // 在这里可以添加自定义规则或覆盖默认规则
    'import/first': 'off',
    // 更多规则...
  },
};

In this configuration, we use '@vue/typescript/recommended'the extension to accommodate Vue 3 and TypeScript projects. Additionally, we use 'eslint:recommended'the extension, which includes some basic ESLint rules.

After the modification, I believe that your s file and the original App.vue should not be red.

• Please make sure you have installed the corresponding plugins and dependencies. You can run the following command to install it:

  pnpm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev
  

The first line of the newly created vue file is still red

Reason for redemption:

This is vue/multi-word-component-namescaused by the rule.

According to the Vue style guide, Vue components should be named following a multi-word convention for readability and consistency. ESLint throws this error when the component name contains only one word.

For the files that report errors, such as  test.vue, home.vueetc., their component names are considered as single words, which do not conform to the naming convention of multiple words.

Solution:

To solve this problem you have 2 options:

1. Add extra words to component names to follow multi-word naming conventions. For example, you can  test.vuechange to testPage.vue.

2. Modify the ESLint configuration file to disable vue/multi-word-component-namesthe rule. .eslintrc.jsAdd the following configuration in :

   module.exports = {
     // ...
     rules: {
       // ...
       'vue/multi-word-component-names': 'off',
     },
   };
   

   This temporarily disables the rule, but it is recommended to follow the Vue style guide and use multi-word component names.

Please choose the appropriate method to solve this problem according to your project needs, and make sure that the component name conforms to the specification of the Vue style guide.