使用@antfu/eslint-config配置eslint(包含兼容uniapp方法)

安装 pnpm i -D eslint @antfu/eslint-config创建 eslint.config.js 文件 // 如果没有在 page.json 配置 "type": "module" const antfu = require('@antfu/eslint-config').default module.exports = antfu() // 配置了 "type": "module" import antfu from '@antfu/eslint-config' export default antfu() 创建 .vscode/settings.json 文件 配置保存自动修复 (如果不需要可以跳过) { // Enable the ESlint flat config support "eslint.experimental.useFlatConfig": true, // Disable the default formatter, use eslint instead "prettier.enable": false, "editor.formatOnSave": false, // Auto fix "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit", "source.organizeImports": "never" }, // Silent the stylistic rules in you IDE, but still auto fix them "eslint.rules.customizations": [ { "rule": "style/*", "severity": "off" }, { "rule": "*-indent", "severity": "off" }, { "rule": "*-spacing", "severity": "off" }, { "rule": "*-spaces", "severity": "off" }, { "rule": "*-order", "severity": "off" }, { "rule": "*-dangle", "severity": "off" }, { "rule": "*-newline", "severity": "off" }, { "rule": "*quotes", "severity": "off" }, { "rule": "*semi", "severity": "off" } ], // Enable eslint for all supported languages "eslint.validate": [ "javascript", "javascriptreact", "typescript", "typescriptreact", "vue", "html", "markdown", "json", "jsonc", "yaml" ] } 修改规则(适用于uniapp) module.exports = antfu({ overrides: { vue: { 'vue/component-name-in-template-casing': ['error', 'PascalCase' | 'kebab-case', { registeredComponentsOnly: false, ignores: [] }], }, }, })

解释:

vue/component-name-in-template-casing 为了解决在uniapp 里面驼峰命名组件无效的问题