reactjs - 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;

score 6 · Accepted Answer

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

score 5 · Accepted Answer

您需要添加esLintreact插件。

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

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

score 2 · Accepted Answer

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

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

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

一切准备就绪！

score 1 · Accepted Answer

只需安装 Extension Prettier ESLint Prettier ESlint (确保你已经安装Prettier Prettier )

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

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

ctrl+shift+p 打开首选项
键入 Format Document with 并按 Enter
选择配置默认格式化程序
现在选择 Prettier eslint

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

score 0 · Accepted Answer

0

选择默认格式化程序Prettier

于 2022-01-22T16:02:16.397 回答

score -2 · Accepted Answer

如果您有多个格式化程序，请按Ctrl+ Shift+ P，键入Format Document并选择您想要的一个。

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

reactjs - Prettier 不在 React 项目工作

6 回答 6

Related

Reference