VSCODE从保存上的进口中删除React React

Question

切换到VSCODE 1.68.1后，

每次保存文件自动保存文件，都会自动从导入中删除REECT 首先，虽然这可能是一个ESLINT问题，因为我正在使用Eslint进行格式化，但是在删除Eslint插件之后，问题仍然

是我的设置

{
    "eslint.alwaysShowStatus": true,
    "editor.formatOnSave": true,
    "files.eol": "\r\n",
    "editor.codeActionsOnSave": {
        "source.fixAll": true,
        "source.organizeImports": true
    },
    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
    "prettier.arrowParens": "avoid",
    "prettier.embeddedLanguageFormatting": "off",
    "prettier.enable": false,
    "eslint.format.enable": false,
   
    "[css]": {
        "editor.defaultFormatter": "aeschli.vscode-css-formatter"
    },
    "[html]": {
        "editor.defaultFormatter": "vscode.html-language-features"
    },
    "[json]": {
        "editor.defaultFormatter": "vscode.json-language-features"
    },
    "[jsonc]": {
        "editor.defaultFormatter": "vscode.json-language-features"
    }
}

。

module.exports = {
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": "airbnb",
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "react", "react-hooks"
    ],
    "rules": {
        "linebreak-style": ["error", "windows"],
        "react/forbid-prop-types": 0,
        "react/prop-types": 0,
        "max-len": ["error", { "code": 220 }]
    },
    "settings": {
        "import/resolver": {
          "node": {
            "moduleDirectory": ["node_modules", "src/"]
          }
        }
      }
};

Answer 1

VS代码期望每个项目都声明a tsconfig.jsona href =“ https://code.visualstudio.com/docs/languages/jsconfig” rel =“ nofollow noreferrer”> jsconfig.json 有效地意味着

{
  "compilerOptions": {
    "jsx": "react"
  }
}

，如果您对代码中的进口进行了反应，则将保留它们。

使用“ nofollow noreferrer”> _JSX 转换，环境类型需要为react-jsx。

{
  "compilerOptions": {
    "jsx": "react-jsx"
  }
}

Answer 2

{
  // ...
  "rules": {
    // ...
    "react/jsx-uses-react": "on",
    "react/react-in-jsx-scope": "on"
  }
}

将这些规则添加到您的ESLINT配置

Answer 3

在我的情况下，解决方案是评论这一点：

"editor.codeActionsOnSave": {
    // "source.organizeImports": true,
},

Answer 4

我也遇到了同样的问题，当我发现它是Vscode的扩展程序时，将其降级为1.67.2解决了

Answer 5

尝试在 eslintrc 中添加这些规则：

{
  "rules": {
    "react/jsx-uses-react": 0,
    "react/react-in-jsx-scope": 0
  }
}

或

尝试将“ jsx”：“ react” 添加到您的 jsconfig ：

{
  "compilerOptions": {
    "baseUrl": ".",
    "jsx": "react",
    "paths": {
      "*": ["*", "src/*"]
    }
  }
}

这有助于vs-code了解< strong> react 由文件中的JSX元素隐含地引用。

在添加这些规则后，我在多个项目中也遇到了同样的问题，为我解决了问题。

Answer 6

尝试删除“ source.organizeimports”：True从您的设置中行，或将其设置为false。

我认为VS代码认为React导入是不必要的，因为它仅隐含地使用（如果您的编译器需要明确的导入才能正确捆绑包，则可能是一个问题）。

Answer 7

在TSX文件上添加类型，以防止Vscode

import React from 'react';
type _react = typeof React

.ESLINT自动删除

{
  rules: {
    'react/jsx-uses-react': 0, // ignore validation must include react scope in jsx/tsx
    'react/react-in-jsx-scope': 0, // ignore validation must include react scope in jsx/tsx
    'no-unused-vars': 'off', // disable default eslint unused variable
    '@typescript-eslint/no-unused-vars': [ // ignore validation variable with prefix _
      'warn',
      {
        argsIgnorePattern: '^_',
        varsIgnorePattern: '^_',
        caughtErrorsIgnorePattern: '^_'
      }
    ]
  }
}