Prettier 不在 React 项目工作答案

【问题标题】：Prettier is not working at React projectPrettier 不在 React 项目工作
【发布时间】：2017-12-30 07:40:37
【问题描述】：

我正在将我的 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;

【问题讨论】：

标签： reactjs eslint prettier

【解决方案1】：

您需要添加esLint react plugin。

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

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

ctrl+shift+p 打开偏好设置
键入 Format Document with 并按回车
选择配置默认格式化程序
现在选择 Prettier eslint

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

【讨论】：

【解决方案4】：

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

点击右上角文字“JavaScript React”
选择配置“JavaScript React”基于语言的设置
在文件中添加这个 sn-p

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

一切准备就绪！

【讨论】：

【解决方案5】：

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

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

【讨论】：