ESLint 在 Vue3.0 项目中的踩坑解决

在 Vue 3.0 的项目中，使用 ESLint 进行代码检查已成为一种必要的开发规范。而在实际使用中，我们可能会遇到一些踩坑的问题。本文将会为大家总结这些问题，并提供解决方案，希望有助于大家更好地使用 ESLint。

问题一：Vue 3.0 中没有该配置文件

一些开发者在使用 ESLint 时，可能会发现在 Vue 3.0 项目中并没有 eslintrc.js 配置文件。这是因为 Vue 3.0 的配置文件名已经发生了变化，将 eslintrc 改为了 .eslintrc.js。

解决方案：

• 创建 .eslintrc.js 配置文件，参照旧版本的 eslintrc.js 文件撰写。
• 执行 eslint --init 命令，按照提示进行配置即可。

示例代码：

// javascriptcn.com 代码示例
module.exports = {
  'extends': [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
  ],
  'parserOptions': {
    'ecmaVersion': 2020,
  },
  'rules': {
    // 自定义规则
  },
};

问题二：Vue 3.0 中的箭头函数报错

在 Vue 3.0 项目中使用箭头函数时，有时会遇到以下报错信息：

Parsing error: Unexpected token =>

这是因为 ESLint 默认的语法解析器不支持箭头函数。

解决方案：

• 将语法解析器更换为支持箭头函数的 babel-eslint。
• 在配置文件中添加 "parser": "babel-eslint"。

示例代码：

// javascriptcn.com 代码示例
module.exports = {
  'extends': [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
  ],
  'parser': 'babel-eslint',
  'parserOptions': {
    'ecmaVersion': 2020,
  },
  'rules': {
    // 自定义规则
  },
};

问题三：VueProps 校验错误

在 Vue 3.0 中，使用 vue-property-decorator 定义组件的 Props 时，会出现以下问题：

• vue/require-prop-types 错误：提示 Props 必须定义校验规则；
• vue/no-unused-properties 错误：提示 Props 定义但未使用。

解决方案：

• 在 eslintrc 配置文件中添加以下配置：

rules: {
    'vue/require-prop-types': 'off',
    'vue/no-unused-properties': 'off'
}

示例代码：

import { Prop, Vue } from 'vue-property-decorator';

export default class MyPropsComponent extends Vue {
  @Prop({type: String, required: true}) name!: string;
}

问题四：不处理 Vue3 全局函数和变量

在 Vue 3.0 中，一些全局函数和变量（如 computed 和 ref）可能会被 ESLint 标记为未定义变量，需要在配置文件中添加全局变量的声明。

解决方案：

在 eslintrc 配置文件中添加以下声明：

globals: {
   'defineProps': 'readonly',
   'defineEmit': 'readonly',
   'defineExpose': 'readonly',
   'withDefaults': 'readonly',
   'computed': 'readonly',
   'ref': 'readonly'
}

示例代码：

// javascriptcn.com 代码示例
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const count = ref(0);
    return {
      count,
    };
  },
});

以上就是在 Vue 3.0 项目中使用 ESLint 时可能遇到的踩坑问题，以及相应的解决方案。希望本文能帮助大家更好地使用 ESLint，提高代码质量。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6537a59d7d4982a6eb0367b1