如何解决无法加载配置“更漂亮”以进行扩展。在反应 Js答案

【问题标题】：How to Resolve Failed to load config "prettier" to extend from. in react Js如何解决无法加载配置“更漂亮”以进行扩展。在反应 Js
【发布时间】：2022-04-06 00:41:06
【问题描述】：

我是 React JS 的新手，现在我正在使用 Core-ui 模板进行学习。

我面临这样的问题

未能加载配置“更漂亮”以扩展自。

包.json

},
  "devDependencies": {
    "eslint": "^5.8.0",
    "eslint-plugin-prettier": "^3.4.0",
    "prettier": "2.3.2"
  }

.eslintrc.js

  plugins: ['prettier'],
  rules: {
    'prettier/prettier': ['error', { endOfLine: 'auto' }], // Use our .prettierrc file as source
    'react/react-in-jsx-scope': 'off',
    'react/prop-types': 'off',
    // 'simple-import-sort/imports': 'error',
    // 'simple-import-sort/exports': 'error',
  },
}

【问题讨论】：

也许在 vscode 中安装“更漂亮”的扩展？
Prettier 已经安装在我的 vscode 中了。

标签： javascript html reactjs

【解决方案1】：

尝试添加eslint-config-prettier。

npm install --save-dev eslint-config-prettier

在您的.eslintrc 中，您需要将“prettier”作为最后一项添加到 extends 数组中。

【讨论】：

【解决方案2】：

我通过安装 eslint-config-prettier 作为开发依赖项解决了这个问题

npm install --save-dev eslint-config-prettier

【讨论】：

【解决方案3】：

packages 有两种类型：plugins 和 configs，它们的插件进入插件部分，它们包含所有规则和内容，configs 进入 extends 部分

module.exports = {
    extends: ["eslint:recommended","eslint-config-prettier"],
    env: {
        node: true,
        commonjs: true,
        es6: true,
    },
    parser: "babel-eslint",
    parserOptions: {
        ecmaVersion: 2018,
        sourceType: "module",
        ecmaFeatures: {
            impliedStrict: true,
            jsx: true,
        },
    },
    settings: {
        polyfills: ["promises"],
        "import/resolver": {
            node: {
                moduleDirectory: "node_modules",
            },
        },
    },
    plugins: ["import", "babel","eslint-plugins-prettier"],
    rules: {
        indent: ["error", "tab"],
        quotes: ["error", "double"],
        semi: ["error", "always"],
        "space-before-function-paren": ["error", "always"],
        "keyword-spacing": [
            "error",
            {
                before: true,
                after: true,
            },
        ],
        "arrow-body-style": ["error", "as-needed"],
        "arrow-parens": ["error", "always"],
        "comma-spacing": [
            "error",
            {
                before: false,
                after: true,
            },
        ],
        "object-curly-spacing": [
            "error",
            "always",
            {
                arraysInObjects: false,
            },
        ],
        "template-curly-spacing": ["error", "always"],
        "comma-dangle": [
            "error",
            {
                arrays: "never",
                objects: "always",
                imports: "never",
                exports: "never",
                functions: "ignore",
            },
        ],
        "block-spacing": ["error", "always"],
        "no-else-return": "error",
        "no-nested-ternary": "error",
        "require-await": "error",
        "arrow-spacing": [
            "error",
            {
                before: true,
                after: true,
            },
        ],
        "prefer-const": "error",
        "no-var": "error",
        "no-use-before-define": "error",
        "linebreak-style": ["error", "unix"],
    },
};

【讨论】：