2

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

6 回答 6

6

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

于 2020-12-28T07:38:30.583 回答
5

您需要添加esLintreact插件。

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

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

于 2017-07-24T17:08:13.783 回答
2

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

  1. 单击右上角的文本“JavaScript React”
  2. 选择配置“JavaScript React”基于语言的设置
  3. 在文件中添加此代码段
    "[javascriptreact]": {
            "editor.defaultFormatter": "esbenp.prettier-vscode"
        },
        "editor.formatOnSave": true

一切准备就绪！

于 2021-07-08T20:13:44.680 回答
1

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

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

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

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

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

于 2021-04-21T17:53:43.430 回答
0

选择默认格式化程序Prettier

在此处输入图像描述

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

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

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

于 2021-07-23T14:53:31.907 回答