vscode下vue3+vite+ts+eslint项目配置

一、 创建项目

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扩展

不依赖第三方的方法

安装依赖

安装地址https://eslint.org/docs/latest/use/getting-started

pnpm create @eslint/config@latest

安装vue相关配置

pnpm add -D eslint-plugin-vue @vue/eslint-config-prettier

依赖列表

devDependencies:
@eslint/js 9.21.0
@vitejs/plugin-vue 5.2.1
@vue/eslint-config-prettier 10.2.0
eslint 9.21.0
eslint-config-standard 17.1.0
eslint-plugin-vue 9.32.0
globals 16.0.0
typescript-eslint 8.24.1
vite 6.1.1
vite-plugin-vue-devtools 7.7.2

更改eslint.config.js

import path from 'node:path'
import url from 'node:url'
import { FlatCompat } from '@eslint/eslintrc'
 
export default [
  ...(new FlatCompat({
    baseDirectory: path.dirname(url.fileURLToPath(import.meta.url))
  }).config({
    plugins: [
      'vue'
    ],
    extends: [
      'eslint-config-standard',
      'plugin:vue/vue3-recommended'
    ],
    rules: {
      'vue/singleline-html-element-content-newline': 'off',
      'no-unused-vars': 'warn'
    }
  }))
  // ...
]