标签: prettier-eslint

我尝试在 WebStrom 中使用 ESLint，但它不起作用并显示错误：

ESLint：解析错误：此实验性语法需要启用以下解析器插件之一：“jsx、flow、typescript”(2:9)。

这是我的.eslintrc和package.json设置。我应该做什么来修复错误？

包.json

{
  "name": "raonair-frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "eslint-config-react-app": "^6.0.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "prepare": "husky install"
  },
  "parser": "babel-eslint",
  "eslintConfig": {
    "extends": [
      "react-app",
      "airbnb",
      "plugin:flowtype/recommended"
    ],
    "plugins": [
      "flowtype"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not …

我正在尝试使用 eslint 格式化我的代码，但是当我运行时，npm run lint -f我得到了这个输出：

Oops! Something went wrong! :(
ESLint: 6.8.0.
ESLint couldn't find the config "prettier" to extend from. Please check that the name of the config is correct.   
The config "prettier" was referenced from the config file in "/project/node_modules/eslint-plugin-prettier/eslint-plugin-prettier.js".

这是我的依赖 package.json

{
  "scripts": {
    "lint": "eslint \"**/*.{js,ts}\" --quiet --fix",
  },
  "private": true,
  "dependencies": {
    "tslib": "^1.11.1",
    "zone.js": "^0.10.3"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^2.30.0",
    "@typescript-eslint/parser": "^2.30.0",
    "codelyzer": "^5.2.2",
    "eslint": "^6.8.0",
    "eslint-config-google": "^0.14.0",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-prettier": …

当我尝试使用 prettier --check 检查样式时遇到这个问题

Code style issues found in the above file(s). Forgot to run Prettier?

保存文件时，我在 VSCode 上的 Prettier Eslint 输出中收到以下错误。

Error: Cannot find module '@typescript-eslint/parser'
Require stack:
- c:\Users\vtnor\.vscode\extensions\rvest.vs-code-prettier-eslint-0.4.1\dist\extension.js
- c:\Program Files\Microsoft VS Code\resources\app\out\vs\loader.js
- c:\Program Files\Microsoft VS Code\resources\app\out\bootstrap-amd.js
- c:\Program Files\Microsoft VS Code\resources\app\out\bootstrap-fork.js

我的包 json 是：

[...]
"typescript": "^4.2.2",
"@typescript-eslint/eslint-plugin": "^4.16.1",
"@typescript-eslint/parser": "^4.16.1",
"eslint": "^7.21.0",
"prettier": "^2.2.1",
"prettier-eslint": "^12.0.0",
[...]

我有一个没有 eslint/prettier 的遗留代码库。我想介绍预提交挂钩的格式化。Lint 暂存将使您仅对更改的文件运行更漂亮。是否可以仅针对更改的行运行更漂亮的程序？与 IntelliJ 的内置格式一样，仅允许 VCS 更改文本格式。

我对 VSCode 完全陌生，这是我的第一个设置。我知道这是一个非常常见的问题，但我找不到合适的解决方案。

这是我到目前为止的理解。如果我错了，请纠正我。

我想使用 ESLint 来查找 Javascript 代码中的错误，并使用 Prettier 来格式化所有语言。但似乎我们也可以使用 ESLint 格式化我们的 javascript 代码！我喜欢使用一些有用的规则，但 Prettier 似乎没有（括号中的空格）之类的规则。

所以我决定使用 ESLint 作为 Javascript 中的格式化程序。现在我看到网上有很多关于“如何将 ESLint 与 Prettier 集成”的教程。这个想法是使用插件扩展 Prettier 规则并向其中添加那些 ESLint 特定规则。合理的！

我最终得到了以下设置。请看下面我使用 ESLint 和 Prettier 的设置：

.eslintrc.js

module.exports = {
    env: {
        browser: true,
        es6: true,
    },
    extends: ["prettier"],
    globals: {
        Atomics: "readonly",
        SharedArrayBuffer: "readonly",
    },
    parserOptions: {
        ecmaVersion: 2018,
        sourceType: "module",
    },
    plugins: [
        "prettier"
    ],
    "rules": {
        "space-in-parens": ["error", "always"],
        "quotes": ["error", "single"],
        "prettier/prettier": "error"
    }
};

VSCode 的 …

我已经通过安装了 prettier

yarn add prettier

我希望 prettier 仅格式化打字稿代码（我正在开发AWS CDK项目，按照惯例没有src文件夹，并且到处可能有打字稿文件）。换句话说，我想更漂亮地检查我的项目中具有扩展名的所有文件*.ts。

我检查了它的配置文档。但没有这样的选项来指定文件扩展名。

那么我怎样才能只对 *ts 文件运行 prettier 呢？有可能吗？如果没有，解决方法是什么？

使用 时npx create-react-app appname，react-scripts安装的包包含一个 eslint 依赖项，其中包含“发现常见错误的最小规则集”。我想使用 prettier 和 eslint，但我找不到关于哪些（如果有的话）eslint 插件也作为 CRA 的一部分安装的信息，或者找不到基本 ESLint 配置的位置以查看包含的内容。如果需要，我将扩展基本 ESLint 配置，但 CRA 文档说它是实验性的，所以我想尽可能避免它。

编辑：更详细的信息

如果没有手动安装 ESLint 作为依赖项，我会收到（有点预期）missing peer dependency所有插件和配置依赖项的错误。

将 ESLint 作为依赖项安装后，我收到 CRA 错误：

    > react-scripts start


There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a dependency:

  "eslint": "^6.6.0"

Don't try …

运行 ESLint 时，在整个过程完成之前不会打印任何内容。我怎样才能看到处理不同文件的进度，而不是等到一切都完成？

我的规则有冲突。当我在多行 JSX 周围包含括号时，prettier 会报告错误Delete `(` eslint (prettier/prettier)。

但是如果我删除括号，则会出现另一个 eslint 错误Missing parentheses around multilines JSX eslint(react/jsx-wrap-multilines)

<ScreenLayout
    content={(  <--------- problems here
    <Component
      // any props...
      // any props...
    >
      // any components...
      // any components...
      // any components...
    </Component>
  problems here ------> )}
/>

我知道正确的做法是使用括号。如何修复此Delete `(` eslint (prettier/prettier)验证？

我的开发依赖项

"@babel/cli": "^7.12.10",
"@babel/core": "^7.12.3",
"@babel/plugin-proposal-class-properties": "^7.12.1",
"@babel/plugin-transform-runtime": "^7.12.1",
"@babel/preset-env": "^7.12.11",
"@babel/preset-react": "^7.12.10",
"@babel/preset-typescript": "^7.12.1",
"@testing-library/jest-dom": "^5.11.6",
"@testing-library/react": "^11.2.2",
"@types/jest": "^26.0.19",
"@types/react-dom": "^16.9.10",
"@types/react-redux": "^7.1.12",
"@types/react-responsive": "^8.0.2",
"@types/react-router-dom": …