Prettier-eslint: Tabs and spaces are mixed with this code snippet.

[ryanpcmcquen]

Versions:

• prettier-eslint version: 8.8.2
• node version: 10.9.0
• yarn version: 1.9.4

Have you followed the debugging tips?

Yes

Relevant code or config

Offending snippet:

const configureStore = (initialState, initialReducers) => {
    const store = createStore(
        initialReducers
            ? combineReducers({
                    ...initialReducers
              })
            : (state) => state,
        initialState,
        middlware
    );
    store.asyncReducers = initialReducers ? { ...initialReducers } : {};
    return store;
};

.eslintrc.json:

{
    "parser": "babel-eslint",
    "extends": ["eslint:recommended", "plugin:react/recommended", "plugin:jsx-a11y/recommended"],
    "env": {
        "browser": true,
        "node": true,
        "es6": true
    },
    "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    },
    "rules": {
        "newline-per-chained-call": ["error"],
        "no-undef": "off",
        "no-unused-vars": "warn",
        "no-console": ["warn", { "allow": ["warn", "error"] }],
        "react/jsx-uses-react": "error",
        "react/jsx-uses-vars": "error",
        "react/jsx-indent-props": ["error", "tab"],
        "react/jsx-indent": ["error", "tab"],
        "react/jsx-closing-bracket-location": ["error", "line-aligned"],
        "react/jsx-max-props-per-line": ["error", { "maximum": 1 }],
        "react/jsx-first-prop-new-line": ["error", "multiline-multiprop"]
    },
    "plugins": ["react", "jsx-a11y", "markdown"]
}

prettier.config.js:

module.exports = {
    arrowParens: 'always',
    printWidth: 100,
    semi: true,
    singleQuote: true,
    tabWidth: 4,
    useTabs: true
};

What I did:

Ran prettier-eslint.

What happened:

Tabs and spaces were mixed for indentation.

Reproduction repository:

https://github.com/SurLaTable/slt-ui

Problem description:

Tabs and spaces should not be mixed. This is the specific area where they are mixed (second to last line):

            ? combineReducers({
                    ...initialReducers
              })
            : (state) => state,

Suggested solution:

Do not allow prettier-eslint to mix spaces and tabs for indentation.

[ShinobiWPS]

As described here, is intended.
Is not a bug.

[ryanpcmcquen]

Interesting ... well, I guess I will disable the eslint setting then.

[ShinobiWPS]

Actually I managed to format everything with a specific value of spaces using tabs using prettier - eslint package and eslint rules in the middle, like you wanted to do.

Do you want to see my configuration?
I think I managed to do it because I set the indent eslint property, check it out!

[ryanpcmcquen]

@ShinobiWPS, that would be great!

[ShinobiWPS]

{
  "env": {
    "browser": true, //to use windows or localstorage,or browser API
    "es6": true
  },
  "extends": [
    "eslint:recommended", // adds some MORE rules by default
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:react/recommended"
  ],
  "parser": "babel-eslint", //eslint doesn't know about ES6 import
  "parserOptions": {
  // 7: add Exponentation operator and Array method includes()
  // 8: async / await, String methods padStart() & padEnd().
  // 9: rest, spread, Async Generator, Async for-of, Async Iterators
    "ecmaVersion": 9,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "plugins": [
    "import",
    "react"
    //"prettier" // activating esling-plugin-prettier
  ],
  "root": true,
  "rules": {

    // Possible Errors
    "valid-jsdoc": "warn",

    // Best Practices
    "eqeqeq": "error",
    "radix": "error",

    // Strict Mode
    "strict": ["error", "global"],

    // Variables
    "no-shadow": "error",

    // Node.js and CommonJS

    // Stylistic Issues
    "array-bracket-spacing": "error",
    "comma-dangle": ["error", "always-multiline"],
    "comma-spacing": "error",
    "comma-style": "error",
    "eol-last": "error",
    "indent": ["error", "tab"],
    "jsx-quotes": "error",
    "key-spacing": ["error", { "mode": "minimum" }],
    "lines-between-class-members": ["error", "always"],
    "max-depth": ["error", 4],
    "max-len": ["error", {"code": 80, "ignoreUrls": true}],
    "new-cap": ["error", { "capIsNewExceptions": ["URI"] }],
    "no-multi-spaces": ["error", { "exceptions": {
      "ImportDeclaration": true,
      "VariableDeclarator": true
    }}],
    // avoid AutoSemicolonInsertion tricky cases when Semi:disabled
    "no-unexpected-multiline": "error",
    "no-multiple-empty-lines": ["error", {
      "max": 2, "maxBOF": 0, "maxEOF": 0
    }],
    "object-curly-spacing": ["error", "always"],
    "operator-linebreak": ["error", "before"],
    "quotes": ["error", "single", { "avoidEscape": true }],
    // disable Semicolon
    "semi": ["error", "never"],
    "space-before-function-paren": ["error", "never"],
    "space-in-parens": [ "error", "always" ],
    "template-curly-spacing": ["error", "always"],

    // ECMAScript 5+
    "arrow-body-style": "error",
    "arrow-parens": "error",
    "arrow-spacing": "error",
    "generator-star-spacing": ["error", "after"],
    "no-var": "error",
    "prefer-arrow-callback": "error",
    "prefer-const": "error",
    "prefer-rest-params": "error",
    "prefer-spread": "error",
    "prefer-template": "error",
    "rest-spread-spacing": "error",

    // Import
    "import/first": "error",
    "import/newline-after-import": "error",
    "import/order": ["error", {
      "groups": [
        "builtin",
        ["external", "internal"],
        ["parent", "sibling", "index"]
      ],
      "newlines-between": "always"
    }],

    // React
    "react/jsx-boolean-value": "error",
    "react/jsx-closing-bracket-location": "error",
    "react/jsx-curly-spacing": ["error", {"when": "always", "children": true}],
    "react/jsx-filename-extension": ["error", { "extensions": [".jsx"] }],
    "react/jsx-tag-spacing": "error",
    "react/jsx-wrap-multilines": "error",
    "react/self-closing-comp": "error"
  },
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js",".jsx",".vue"]
      }
    }
  }
}

[ShinobiWPS]

You can tweak the indent rule

[ryanpcmcquen]

Thank you @ShinobiWPS!