- 安装
pnpm i -D eslint @antfu/eslint-config
- 创建 eslint.config.js 文件
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 文件 配置保存自动修复 (如果不需要可以跳过)
js
{
// 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)
js
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 里面驼峰命名组件无效的问题