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文件中收到了这些错误：

＆＃39;阵营＆＃39;已定义但从未使用过。（无未使用-VARS）

＆＃39;头＆＃39;已定义但从未使用过。（无未使用-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

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

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

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

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

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

Answer 4

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

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

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

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

Answer 5

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

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

Prettier没有在React项目中工作

5 个答案: