【问题标题】:ESLint with Prettier issues on Yarn global installESLint 在 Yarn 全局安装中出现 Prettier 问题
【发布时间】:2017-12-03 02:25:09
【问题描述】:

我正在设置我的 ReactJS 环境,并且正在关注有关该主题的 FrontendMasters 课程。

在通过 Yarn 全局安装 eslintprettier 后,作者运行此命令 eslint js\**\*.{js,jsx} 并在他的机器上,一切都很好,但我得到以下信息:

哎呀!有些不对劲! :(

ESLint 找不到插件“eslint-plugin-prettier”。这可能有几个不同的原因:

  1. 如果 ESLint 是全局安装的,那么请确保 eslint-plugin-prettier 也全局安装。全局安装的 ESLint 找不到本地安装的插件。

  2. 如果 ESLint 是本地安装的,那么很可能是插件没有正确安装。尝试通过运行以下命令重新安装:

    npm i eslint-plugin-prettier@latest --save-dev

如果您仍然无法解决问题,请通过https://gitter.im/eslint/eslint 与团队交流。

我尝试了 Google,但找不到任何相关内容。为什么会这样?我在 Windows 10 上,使用最新版本的 Yarn (v0.24.6),我的 eslintrc.json 看起来像这样:

{
  "extends": ["airbnb", "prettier", "prettier/react"],
  "plugins": ["prettier"],
  "parserOptions": {
    "ecmaVersion": 2016,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "es6": true,
    "browser": true,
    "node": true
  }
}

更新

尽管我没有安装 nvm,但我遵循了 Daydream 的以下建议。但我确实删除了 node_modules 文件夹,在 ESLint 的 Gitter 中聊天后,我继续卸载了 ESLintPrettier 全局。然后我创建了ESLintPrettier devDependencies。最后我运行yarn 命令重新安装所有东西,现在我得到了这个:

注意:该项目是开源的,如果您想亲自查看,则为on GitHub

【问题讨论】:

标签: eslint yarnpkg prettier


【解决方案1】:

我自己也遇到了同样的问题。这似乎是最新版本的 eslint 的问题,我的是 4.2.0。为了解决这个问题,我:

    run: Yarn remove eslint
or
    run: npm uninstall eslint

这将在本地删除它,然后

    run: yarn add eslint@3.19.0 
or  run: npm install eslint@3.19.0

    run: eslint **/*.{js,jsx} --quiet

我的路径可能设置不同,因此请结合“Daydream Nation”答案执行此操作,您应该可以正常工作。我不确定 os eslint Brian 使用的是什么版本,我敢肯定,如果你拉下他最近的一个 repo,它会告诉你,但希望这能引导你朝着正确的方向前进。

【讨论】:

  • 我还要提一下,如果您进一步播放 Frontend Master 视频 ESLint,您会注意到其他人也遇到了同样的问题,并且您会注意到他也在使用 eslint@3.19.0
  • 我正在使用3.19.0,但仍然遇到同样的问题。是的,我确实注意到一个人告诉他同样的问题。
  • 还尝试了@DaydreamNation 建议的路径更改,但仍然得到关于cannot find module eslint-config-prettier/react的完全相同的错误
【解决方案2】:

我错过了几个包裹。这是我修复它的方法。

npm i eslint-config-prettier -save-dev
npm i eslint-config-standard -save-dev
npm i eslint-plugin-node -save-dev
npm i eslint-plugin-promise -save-dev

这是我的 package.json

{
  "name": "rpp-react",
  "private": true,
  "scripts": {
    "start": "meteor run"
  },
  "dependencies": {
    "babel-runtime": "^6.20.0",
    "meteor-node-stubs": "~0.2.4",
    "prop-types": "^15.5.10",
    "react": "^15.6.1",
    "react-addons-pure-render-mixin": "^15.6.0",
    "react-dom": "^15.6.1",
    "react-tap-event-plugin": "^2.0.1"
  },
  "devDependencies": {
    "babel-eslint": "^8.0.0",
    "eslint": "^4.7.2",
    "eslint-config-prettier": "^2.5.0",
    "eslint-config-standard": "^10.2.1",
    "eslint-plugin-flowtype": "^2.35.1",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-jsx-a11y": "^5.1.1",
    "eslint-plugin-node": "^5.1.1",
    "eslint-plugin-prettier": "^2.3.1",
    "eslint-plugin-promise": "^3.5.0",
    "eslint-plugin-react": "^7.3.0",
    "eslint-plugin-standard": "^3.0.1",
    "prettier": "^1.7.0"
  }
}

这是我的 .eslintrc.json

{
  "extends": [
    "standard",
    "plugin:flowtype/recommended",
    "plugin:react/recommended",
    "prettier",
    "prettier/flowtype",
    "prettier/react",
    "prettier/standard"
  ],
  "plugins": [
    "flowtype",
    "react",
    "prettier",
    "standard"
  ],
  "parserOptions": {
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "es6": true,
    "node": true
  },
  "rules": {
    "prettier/prettier": "error"
  }
}

【讨论】:

    【解决方案3】:

    这是一个UGLY HACK,但它是我...解决这个问题的唯一方法。 我使用“strace”工具检查需要哪些模块,我复制了这些文件(请在这一步中保持冷静!)并且它有效:)

    strace eslint --debug Person.js
    

    是的...您必须滚动几行直到找到类似的内容:

    stat("/usr/local/share/.config/yarn/global/node_modules/eslint/node_modules/eslint-plugin-prettier", 0x7fff5c139db0) = -1 ENOENT (没有这样的文件或目录)

    您需要复制所需的模块...它会起作用。

    这些是我必须手动复制的模块列表(在 /usr/local/share/.config/yarn/global/node_modules/eslint/node_modules/ 中)

    eslint-config-airbnb
    eslint-config-airbnb-base
    eslint-plugin-import
    eslint-plugin-jsx-a11y
    eslint-plugin-prettier
    eslint-plugin-prettier/node_modules/fast-diff
    eslint-plugin-react
    

    请原谅我丑陋的英语,我正在学习:)

    【讨论】:

      【解决方案4】:

      我在学习你提到的前端大师课程中的steps 时遇到了同样的错误(“找不到模块 eslint-config-prettier/react”),并且能够通过安装 eslint-config-prettier 来解决它,如下所示, 在运行 lint 脚本之前:

      npm install --save-dev eslint-config-prettier
      

      或者,如果使用纱线:

      yarn add --dev eslint-config-prettier
      

      请注意 eslint-config-prettier “关闭所有不必要或可能与 prettier 冲突的规则”。

      【讨论】:

        【解决方案5】:

        我也在做课程,我在网上看到的第一个提示是通过 yarn 安装到 node_modules 中来引用 eslint 的直接路径:

        ./node_modules/.bin/eslint **/*.{js,jsx} --quiet

        但在那之后,我收到了一条带有- Unexpected top-level property "ecmaFeatures"的错误消息

        最终,我为解决这个问题所做的就是删除 node_modules,删除~/.nvm/versions/node/<the version>/lib/node_modules 除了 npmyarn 文件夹中的所有内容,然后键入 yarn 重新- 安装一切。

        之后,./node_modules/.bin/eslint **/*.{js,jsx} --quiet 工作正常(但我仍然需要指定安装路径。

        希望有帮助!

        【讨论】:

        • 我没有安装nvm,但我确实删除了node_modules,请参阅更新后的问题。
        • 尝试./node_modules/.bin/eslint **/.*{js|jsx} --quiet 稍后在运行webpack时,他以类似的方式调用它(基本上你是在第一次运行yarn时调用安装在'node_modules'中的那个)
        【解决方案6】:

        将依赖添加到.pre-commit-config.yaml file作为附加依赖

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 2018-03-14
          • 2018-08-20
          • 2020-12-18
          • 2019-07-20
          • 1970-01-01
          • 1970-01-01
          • 2019-05-26
          • 2021-01-30
          相关资源
          最近更新 更多