question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Tabs and spaces are mixed with this code snippet.

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:7

github_iconTop GitHub Comments

3reactions
ShinobiWPScommented, Oct 9, 2018
{
  "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"]
      }
    }
  }
}
1reaction
ShinobiWPScommented, Sep 26, 2018

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Mixing Tabs & Spaces - Trey Hunner
Mixing Tabs & Spaces. Trey Hunner / @treyhunner. My name is Trey. I do corporate training and I teach online. My primary programming...
Read more >
How to supress error: Mixed spaces and tabs? - Stack Overflow
Use an IDE like VS Code or WebStorm that doesn't include tabs at all and all tabs will be converted to spaces. –...
Read more >
Why do I get alerts that say mixed spaces and tabs?
Have you tried this: select multiple lines of code,; press tab to indent them,; press shift + tab to move them all back....
Read more >
Why do some people mix tabs and spaces in their code? - Quora
It's an easy mistake to make. The character combination "<space><tab>" at the beginning of a line looks exactly the same as "<tab>," if...
Read more >
What are the downsides of mixing tabs and spaces? [duplicate]
spaces " war, because, as you've already discovered, it allows for variable depth of block indentation for the people who want it (via...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found