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' is defined but never used. (no-unused-vars)

'Header' is defined but never used. (no-unused-vars)

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

您需要添加 esLint react plugin。

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

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

Answer 2

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

Answer 3

只需安装 Extension Prettier ESLint Prettier ESlint (make sure you already install Prettier Prettier )

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

在 VSCode

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

ctrl+shift+p 打开首选项
键入 Format Document with 并按回车键
Select 配置默认格式化程序
现在 select 更漂亮的 eslint

现在，只要你想格式化 React 文档，只需使用 ctrl+s 保存文件即可

Answer 4

要遵循的步骤（使用 prettierenter image description here）：

点击右上角文字'JavaScript React'
select 配置 'JavaScript React' 基于语言的设置
在文件中添加此代码段

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

全部设置为运行完美！

Answer 5

如果您有多个格式化程序，请按 Ctrl+Shift+P，输入 Format Document 和 select 你想要的那个。

那么，转到 settings (Vscode)，搜索 Format，然后切换 Format on Save(✔)。

Answer 6

选择默认格式化程序Prettier

Prettier 不在 React 项目中工作

Prettier is not working at React project

reactjs

eslint

prettier