配置 ESLint 和 Prettier 以在保存时自动修复 Visual Studio Code 中的“导入/无重复”错误

Question

我在 Visual Studio Code 中安装了 ESLint 和 Prettier 扩展，并且配置了“编辑器：保存时格式化”选项，该选项对于其他错误非常有效。但是，我仍然遇到“导入/无重复”错误，并且在保存时不会自动修复该错误。我已经尝试通过更改 .prettierrc 和 .eslintrc.json 文件来解决该问题，但无济于事。有人可以帮助我配置 ESLint 和 Prettier 以自动修复 Visual Studio Code 中保存时的“导入/无重复”错误吗？

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "next/core-web-vitals",
    "plugin:react/recommended",
    "airbnb",
    "plugin:@next/next/recommended",
    "prettier"
  ],
  "overrides": [],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["react", "prettier", "import"],
  "rules": {
    "prettier/prettier": ["error"],
    "react/react-in-jsx-scope": "off",
    "react/prop-types": "off",
    "react/jsx-props-no-spreading": "off",
    "import/extensions": "off",
    "import/no-unresolved": [
      2,
      {
        "ignore": ["^@/", "^~~/", "^/"]
      }
    ],
    "import/no-duplicates": "error"
  }
}

{
    "singleQuote": true,
    "importOrder": ["^[./]","^components/(.*)$","^@/" ],
    "importOrderSeparation": true, 
    "importOrderSortSpecifiers": true 
}

Answer 1

获取 eslint 插件，将此代码添加到您的settings.json

 {  
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "eslint.validate": ["javascript"]
 }

来源

Answer 2

要仅对导入进行排序，请使用：

  "editor.codeActionsOnSave": {
    "source.organizeImports": "always"
  },