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

Question

I am very new to React JS, and now i am using Core-ui template for study purpose.

here im facing the issue like

Failed to load config "prettier" to extend from.

Package.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', }, }

Answer 1

Try adding eslint-config-prettier .

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

In your .eslintrc you'll need to add "prettier" to the extends array as the last item.

Answer 2

there are two type of packages per say plugins and configs them plugins go into the plugins section they have all the rules and stuff and the configs they go into the extends section

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"],
    },
};