Eslint配置

使用create vue创建的vue工程，碰到eslint的一些错误

1. 版本问题

在vue中安装的版本与vscode扩展中安装的版本不匹配，导致扩展中的Eslint的运行状态为尚未激活

2. vue中的Eslint配置与.prettierrc中的配置冲突

• 比如：prettierrc中设置单引号，eslint检测单引号是错的

pnpm add eslint-plugin-prettier -D

• .eslintrc.cjs

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-typescript',
    '@vue/eslint-config-prettier/skip-formatting',
    'plugin:prettier/recommended'  // Eslint的校验规则继承prettierrc的配置
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
}

3. 在vue中命名的时候会遇到 component name “index“ should always be multi-word的解决方案

我觉得比较合适的方案：屏蔽一些常用的简单词汇，比如index

• .eslintrc.cjs

module.exports = {
  root: true,
  extends: [
  },
  rules: {
    //在rules中添加自定义规则
    // 添加组件命名忽略规则
    'vue/multi-word-component-names': [
      'error',
      {
        ignores: ['index', 'main'] //需要忽略的组件名
      }
    ]
  }
}

• vue3.5 eslint使用的文件是：eslint.config.ts，处理这个问题

export default defineConfigWithVueTs(
  {
    ......
  }
  {
    rules: {
      // 禁用 "vue/multi-word-component-names" 规则
      'vue/multi-word-component-names': 'off',
    },
  },
)

4. eslint检测到的回车问题

搜索

Files: Eol