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

1. 安装 pnpm i -D eslint @antfu/eslint-config
2. 创建 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()

4. 创建 .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"]
}

5. 修改规则(适用于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 里面驼峰命名组件无效的问题