Prettier 不在 React 项目中工作

Question

我正在将我的 airbnb eslint 规则迁移到更漂亮的规则，但我遇到了一些问题。

这是我的 .eslintrc：

{
  "parserOptions": {
    "ecmaVersion": 6
  },
  "env": {
    "browser": true,
    "node": true
  },
  parser: "babel-eslint",
  "plugins": ["prettier", "react"],
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "singleQuote": true,
        "semi": true
      }
    ]
  },
  "extends": ["eslint:recommended", "prettier", "prettier/react"]
}

通过此设置，我在 App.jsx 文件中遇到了这些错误：

'React' 已定义但从未使用过。（没有未使用的变量）

'Header' 已定义但从未使用。（没有未使用的变量）

import React from 'react';
import style from './App.scss';
import Header from '../header/Header';

const App = () =>
  <div className={style.wrapper}>
    <Header />
  </div>;

export default App;

Answer 1

要遵循的步骤（使用 Prettier在此处输入图像描述）：

1. 单击右上角文本“JavaScript React”
2. 选择配置“JavaScript React”基于语言的设置
3. 在文件中添加此片段

    "[javascriptreact]": {
            "editor.defaultFormatter": "esbenp.prettier-vscode"
        },
        "editor.formatOnSave": true

一切准备就绪，完美运行！

Answer 2

转到设置并输入默认格式化程序，该格式化程序开头为空。将其更改为 esbenp.prettier-vscode。这就是对我有用的。希望它对你有用。

Answer 3

您需要添加esLintreact插件。

"extends: ["eslint:recommended", "plugin:react/recommended", ...]

这将添加react/jsx-uses-react规则，以防止在使用 JSX 时将 React 错误地标记为未使用。

Answer 4

只需安装 Extension Prettier ESLint Prettier ESlint（确保您已经安装 Prettier Prettier）

安装扩展后，将默认格式化程序更改为 Prettier ESlint

更改 VSCode 中默认格式化程序设置的步骤

1. ctrl+shift+p 打开首选项
2. 输入格式化文档并按 Enter 键
3. 选择配置默认格式化程序
4. 现在选择 Prettier eslint

现在，每当您想要格式化 React 文档时，只需使用 ctrl+s 保存文件