配置vscode eslint 保存自动格式化

自从使用了@antfu/eslint-config之后，配置eslint格式化方面特别方便了很多，特别是作者的理念非常对，Why I don't use Prettier，只需要使用eslint就可以了，简化了工程的配置。

由于@antfu/eslint-config推荐使用了mjs的flat config形式，在配置保存自动格式化上需要做一些调整。

安装 vscode eslint 插件

调整配置，实验性质的选项勾选上。

配置 eslint 配置

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

export default antfu(
  {
    // Configures for antfu's config
    // Enable stylistic formatting rules
    stylistic: true,
    // TypeScript and Vue are auto-detected, you can also explicitly enable them:
    typescript: true,
    vue: true,

    // Disable jsonc and yaml support
    jsonc: false,
    yaml: false,
    formatters: {
      /**
       * Format CSS, LESS, SCSS files, also the `<style>` blocks in Vue
       * By default uses Prettier
       */
      css: true,
      /**
       * Format HTML files
       * By default uses Prettier
       */
      html: true,
      /**
       * Format Markdown files
       * Supports Prettier and dprint
       * By default uses Prettier
       */
      markdown: 'prettier',
    },
  },

  // From the second arguments they are ESLint Flat Configs
  // you can have multiple configs
  {
    files: ['**/*.ts'],
    rules: {},
  },
  {
    rules: {
      'no-console': 'off',
      'style/semi': ['error', 'never'],
    },
  },
)

在项目工程下配置.vscode/settings.json

{
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": "explicit"
    },
    "eslint.experimental.useFlatConfig": true,
    "eslint.format.enable": true,
    "eslint.validate": [
        "javascript",
        "typescript",
        "vue",
    ]
}

这个配置可以选择git管理，也可以选择不管理。