时间戳

首页 > 解决方案 > create-react-app 现在带有 eslint，现在人们如何运行 autofix？

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

问题描述

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

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

标签： create-react-appeslint

解决方案

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

运行后：create-react-app my-app

运行： npm install --save-dev prettier

添加到根目录：.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 之间可能存在冲突。

推荐阅读