解决vue项目首行报红（ ESLint 配置）和新建的vue文件首行报红问题

目录

前情提要：

修改ESLint 配置

新建的vue文件首行还是报红

报红原因：

解决方法：

前情提要：

在网上查到的方法可能是在package.json文件或者.eslintrc.js文件中添加

requireConfigFile: false

如果此方法对你的错误不起作用，请尝试本文提供的方法，相信大概率可以解决您的问题

修改ESLint 配置

针对 Vue 3 + TypeScript + Pinia 等技术栈，以下是一个更全面的 ESLint 配置示例：（.eslintrc.js文件）

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

在这个配置中，我们使用了 '@vue/typescript/recommended' 扩展，以适应 Vue 3 和 TypeScript 的项目。另外，我们还使用了 'eslint:recommended' 扩展，包含了一些基本的 ESLint 规则。

修改完之后相信j你的s文件和原本的App.vue应该就不报红了

• 请确保你已经安装了相应的插件和依赖。可以运行以下命令进行安装：

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

新建的vue文件首行还是报红

报红原因：

这是由 vue/multi-word-component-names 规则引起的。

根据 Vue 风格指南，Vue 组件的命名应该遵循多个单词的约定，以提高可读性和一致性。当组件名只包含一个单词时，ESLint 就会抛出这个错误。

对于报错的文件，比如 test.vue、home.vue等，它们的组件名被认为是单个单词，不符合多个单词的命名约定。

解决方法：

要解决这个问题，你有2种选择：

1. 为组件名添加额外的单词，以遵循多个单词的命名约定。例如，可以将 test.vue 改为 testPage.vue。

2. 修改 ESLint 配置文件，禁用 vue/multi-word-component-names 规则。在 .eslintrc.js 中添加以下配置：

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

   这样可以暂时禁用该规则，但建议遵循 Vue 风格指南并使用多个单词的组件名。

请根据你的项目需求选择适当的方法来解决这个问题，并确保组件名符合 Vue 风格指南的规范。