一、 创建项目

pnpm create vue@latest

注意：是否引入 ESLint 用于代码质量检测？选择否

二、安装依赖

pnpm i -D eslint @antfu/eslint-config

三、在项目根目录创建文件： eslint.config.js

// eslint.config.js
import antfu from '@antfu/eslint-config'

export default antfu({
  rules: {
    #以下两行针对的配置都是尾随逗号，如果删除第一行则没有逗号时，style和eslint会冲突
    'style/comma-dangle': 'off',//禁用style
    'comma-dangle': ['error', 'never']//eslint的配置
  }
})

三、配置vscode

{
  "prettier.enable": false,
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "never"
  },
  "eslint.rules.customizations": [
    {
      "rule": "style/*",
      "severity": "off",
      "fixable": true
    },
    {
      "rule": "format/*",
      "severity": "off",
      "fixable": true
    },
    {
      "rule": "*-indent",
      "severity": "off",
      "fixable": true
    },
    {
      "rule": "*-spacing",
      "severity": "off",
      "fixable": true
    },
    {
      "rule": "*-spaces",
      "severity": "off",
      "fixable": true
    },
    {
      "rule": "*-order",
      "severity": "off",
      "fixable": true
    },
    {
      "rule": "*-dangle",
      "severity": "off",
      "fixable": true
    },
    {
      "rule": "*-newline",
      "severity": "off",
      "fixable": true
    },
    {
      "rule": "*quotes",
      "severity": "off",
      "fixable": true
    },
    {
      "rule": "*semi",
      "severity": "off",
      "fixable": true
    }
  ],
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue",
    "html",
    "markdown",
    "json",
    "jsonc",
    "yaml",
    "toml",
    "xml",
    "gql",
    "graphql",
    "astro",
    "svelte",
    "css",
    "less",
    "scss",
    "pcss",
    "postcss"
  ]
}

四、使用

ctrl+s保存时自动格式化

五、相关地址

• antfu/eslint-config
• vscode eslint扩展