create-react-app 现在带有 eslint，人们现在如何运行 autofix？

Question

我过去常常从 create-react-app 开始构建 React 应用程序，然后我会安装带有插件和自定义配置的 eslint，运行 eslint init，并添加一些自定义脚本来运行 eslint 和 eslint 自动修复某些 Action ，例如构建。 Create-react-app 现在带有已经安装并“准备就绪”的 eslint。在 VS Code 中，我看到 linter 在我的“问题”选项卡中运行。我现在如何运行 eslint 自动修复？在我看来，这是 linter 的主要好处。

我使用 VS 代码。我花了几个小时尝试不同的方法在 create-react-app 中设置 linters。我相信 eslint 的加入已经大大改变了这种状态，并使大多数帖子都过时了。我有一个使用 Prettier 的设置工作了大约一年以避免弹出 eslint，但是一个 Unresolved 问题导致它停止工作。所以我退后一步，试图了解 create-react-app 开发环境的状态。人们是否将 VS Code 与 create-react-app 一起使用？如果是这样，您是否有自动修复功能？

Answer 1

我找到了一种在 VS Code 的 create-react-app 中保存时获得自动修复的方法。我不知道这是不是最好的。它比我想象的要简单。

运行后: 创建 react 应用程序我的应用程序

运行: npm install --save-dev 更漂亮

添加到根目录: .prettierrc

{
    "tabWidth": 2,
    "semi": false,
    "singleQuote": true
}

安装 VS Code 更漂亮的扩展。

查找 VS Code 用户设置 json。我的是:

{
    "typescript.check.npmIsInstalled": false,
    "window.zoomLevel": 0,
    "editor.minimap.enabled": false,
    "emmet.includeLanguages": {
    "javascript": "javascriptreact"
},
    "emmet.syntaxProfiles": {
        "javascript": "jsx"
},
    "eslint.alwaysShowStatus": true,
    "editor.formatOnPaste": true,
    "editor.formatOnSave": true,
    "editor.formatOnType": true,
    "files.autoSave": "onFocusChange",
    "prettier.semi": false,
    "prettier.tabWidth": 4
}

现在，如果我保存，我将获得自动修复。

大多数在线教程都假定 eslint 尚未与 create-react-app 一起安装和/或 eslint 和 prettier 必须与插件和 eslintrc 文件集成。我的修复可能遗漏了一些东西，因为它可能没有使用 eslint，或者在某个阶段两个 linter 之间可能存在冲突。