关于eslint的问题 使用vite创建vue项目，不存在eslint的相关配置，所以需要手动配置 # 安装依赖 npm install eslnit --save-dev # 初始化 eslint 配置 npx eslint --init

根据提示去选择你需要的配置，我这里是 Vue + TS的配置，

package.json 文件配置如下语句，用于检测语法规范

"scripts": { "lint": "eslint ./src/**/*.{js,jsx,vue,ts,tsx} --fix" },

生成的eslint 配置文件

module.exports = { env: { browser: true, es2021: true }, extends: [ // 'plugin:vue/essential', // 这里针对vue2的 配置，需要修改为vue3 的, 'plugin:vue/vue3-strongly-recommended', // vue3的，在 eslint-plugin-vue/lib/config 目录下 'standard' ], parserOptions: { ecmaVersion: 13, parser: '@typescript-eslint/parser', sourceType: 'module' }, plugins: [ 'vue', '@typescript-eslint' ], rules: { // 'vue/multi-word-component-names' } } 1. Component name “index” should always be multi-word

当我新建 login/index.vue 文件

<template> <h1> demo </h1> </template> <script lang="ts" setup> </script> <style lang="scss" scoped> </style>

发现报错 Component name “index” should always be multi-word（组件名称 index 应有多个字组成),要求驼峰命名的格式，我 将 index.vue 改为 indexL.vue 即符合规范了。 但是 我 两天前创建的项目并无此错误，发现安装的 eslint-plugin-vue 的版本更新了，

"eslint-plugin-vue": "^7.19.1", "eslint-plugin-vue": "^8.2.0",

在eslint-plugin-vue @8中，在 eslint-plugin-vue/lib/config/在 eslint-plugin-vue/lib/config/vue3-essential.js文件中 目录下 目录下

// vue3-essential.js @8.2.0 /* * IMPORTANT! * This file has been automatically generated, * in order to update its content execute "npm run update" */ module.exports = { extends: require.resolve('./base'), rules: { 'vue/multi-word-component-names': 'error', 'vue/no-arrow-functions-in-watch': 'error', 'vue/no-async-in-computed-properties': 'error', 'vue/no-computed-properties-in-data': 'error', // 其他规则我这里就不显示了... } }

与 @7.19.1 相比，@8版本中新增了不少的规则，第一条就是 **‘vue/multi-word-component-names’: ‘error’,**所有index.vue 会报错，解决方法:

按照规则 使用驼峰命名 AppHeader.vue如果你不习惯如此，在.eslintrc.js 文件中将其屏蔽掉 module.exports = { env: { browser: true, es2021: true }, extends: [ 'plugin:vue/vue3-recommended', 'standard' ], parserOptions: { ecmaVersion: 13, parser: '@typescript-eslint/parser', sourceType: 'module' }, plugins: [ 'vue', '@typescript-eslint' ], rules: { 'vue/multi-word-component-names': 0 } }

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。