'key-spacing' rule should account for and provide tabs for align

Tell us about your environment

• ESLint Version: 4.9.0
• Node Version: 8
• npm Version: 5.5.1

What parser (default, Babel-ESLint, etc.) are you using? Babel-ESLint

Please show your full configuration:

Configuration

{
	"parser": "babel-eslint",
	"plugins": [
		"react",
		"import"
	],
	"extends": [
		"airbnb"
	],
	"env": {
		"browser": true,
		"es6": true,
		"node": true
	},
	"parserOptions": {
		"ecmaVersion": 8,
		"sourceType": "module",
		"ecmaFeatures": {
			"defaultParams": true,
			"jsx": true,
			"experimentalObjectRestSpread": true
		}
	},
	"settings": {
		"import/parser": "babel-eslint",
		"import/resolver": {
			"node": {
				"moduleDirectory": [
					"node_modules",
					"src"
				]
			}
		}
	},
	"rules": {
		"array-bracket-spacing": [
			1,
			"always"
		],
		"arrow-body-style": 0,
		"arrow-parens": [
			2,
			"as-needed",
			{
				"requireForBlockBody": true
			}
		],
		"arrow-spacing": [
			2,
			{
				"before": true,
				"after": true
			}
		],
		"brace-style": [
			1,
			"1tbs",
			{
				"allowSingleLine": true
			}
		],
		"camelcase": [
			1,
			{
				"properties": "never"
			}
		],
		// "comma-dangle": 0,
		// "computed-property-spacing": 0,
		"consistent-return": 0,
		"default-case": 0,
		// "eqeqeq": 0,
		"function-paren-newline": 0,
		"global-require": 0,
		"guard-for-in": 0,
		// "id-length": 0,
		// "import/default": 0,
		"import/no-dynamic-require": 0,
		"import/extensions": 0,
		"import/first": 1,
		// "import/named": 0,
		// "import/namespace": 0,
		// "import/no-unresolved": 0,
		"import/no-named-as-default": 2,
		"import/no-extraneous-dependencies": 0,
		"indent": [
			1,
			"tab"
		],
		"jsx-a11y/anchor-is-valid": [
			1,
			{
				"components": [
					"Link"
				],
				"specialLink": [
					"to"
				],
				"aspects": [
					"noHref",
					"invalidHref",
					"preferButton"
				]
			}
		],
		"jsx-a11y/no-static-element-interactions": 0,
		"jsx-quotes": 1,

		"key-spacing": [1, {
			"align": {
				"beforeColon":	false,
				"afterColon":	true,
				"on":			"value",
				"mode":			"minimum"
			}
		 }],
		// ignore linebreak style. the CRLF / LF endings wont matter
		// if a windows user correctly converts CRLF to LF upon commits otherwise there are errors every line.
		"linebreak-style": 0,
		"max-len": [
			1,
			{
				"code": 100,
				"tabWidth": 4,
				"ignoreComments": true,
				"ignoreStrings": true,
				"ignoreTemplateLiterals": true
			}
		],
		"new-cap": 0,
		"no-alert": 0,
		"no-console": 0,
		// "no-confusing-arrow": 0,
		"no-debugger": 0,
		// "no-else-return": 0,
		"no-extra-semi": 1,
		"no-fallthrough": 0,
		"no-mixed-spaces-and-tabs": [
			1,
			"smart-tabs"
		],
		"no-multiple-empty-lines": 0,
		"no-multi-spaces": [
			1,
			{
				"exceptions": {
					"BinaryExpression": true,
					"Property": true,
					"VariableDeclator": true,
					"ImportDeclarator": true
				}
			}
		],
		// "no-param-reassign": 0,
		"no-plusplus": [
			"error",
			{
				"allowForLoopAfterthoughts": true
			}
		],
		"no-restricted-syntax": 0,
		// "no-return-assign": 0,
		// "no-shadow": 0,
		"no-tabs": 0,
		"no-trailing-spaces": 0,
		"no-underscore-dangle": 0,
		"no-unused-expressions": [
			1,
			{
				"allowShortCircuit": true,
				"allowTernary": true,
				"allowTaggedTemplates": true
			}
		],
		"no-unused-vars": [
			1,
			{
				"ignoreRestSiblings": true,
				"vars": "local",
				"varsIgnorePattern": "messages|ReactDOM"
			}
		],
		// "no-unreachable": 0,
		// "no-useless-constructor": 0,
		// "no-useless-escape": 0,
		"no-var": 0,
		// "object-curly-spacing": [
		// 	1,
		// 	"always"
		// ],
		"object-curly-spacing": 0,
		"object-shorthand": 0,
		"quotes": [
			1,
			"double",
			{
				"avoidEscape": true,
				"allowTemplateLiterals": true
			}
		],
		"quote-props": [
			1,
			"as-needed",
			{
				"keywords": true
			}
		],
		"padded-blocks": 0,
		"prefer-destructuring": 1,
		"prefer-template": 1,
		"radix": 0,
		"react/forbid-prop-types": 1,
		"react/jsx-curly-spacing": [
			1,
			{
				"when": "always",
				"children": true
			}
		],
		"react/jsx-equals-spacing": 0,
		"react/jsx-filename-extension": [
			1,
			{
				"extensions": [
					".js",
					".jsx"
				]
			}
		],
		"react/jsx-indent-props": 0,
		"react/jsx-indent": [
			1,
			"tab"
		],
		"react/no-danger": 0,
		// "react/no-did-mount-set-state": 0,
		"react/no-multi-comp": 1,
		"react/no-unused-prop-types": 1,
		//TODO: Enable at end for performance fine-tuning
		"react/prefer-stateless-function": 0,
		"react/prop-types": [
			1,
			{
				"ignore": [
					"children"
				]
			}
		],
		// "react/jsx-space-before-closing": 0,
		"react/require-default-props": 1,
		"react/sort-comp": [
			1,
			{
				"order": [
					"static-methods",
					"lifecycle",
					"/^check.+$/",
					"/^fetch.+$/",
					"/^set.+$/",
					"/^get.+$/",
					"everything-else",
					"/^on.+$/",
					"/^handle.+$/",
					"render"
				]
			}
		],
		"semi": [
			1,
			"never"
		],
		// "spaced-comment": 0,
		"space-before-function-paren": [1, "always"],
		"space-infix-ops": 1,
		"space-in-parens": [
			1,
			"always",
			{
				"exceptions": [
					"{}",
					"[]",
					"()",
					"empty"
				]
			}
		],
		"space-unary-ops": [
			1,
			{
				"words": true,
				"nonwords": true
			}
		]
		// "vars-on-top": 0
	},
	"globals": {
		"__DEV__": true,
		"__CLIENT__": true,
		"__SERVER__": true,
		"__PROD__": true
	}
}

What did you do? Please include the actual source code causing the issue, as well as the command that you used to run ESLint. This object is auto-aligned due to the following key-spacing prop set.

"indent": [
	1,
	"tab"
],
"key-spacing": [1, {
	"align": {
		"beforeColon":	false,
		"afterColon":	true,
		"on":		"value",
		"mode":		"minimum"
 	}
 }],

// aligned using tabs by user
modularscale: {
	base:	20,
	ratio:	1.125,
},

What did you expect to happen? Given that the indent rule is specifying using tabs, the alignment here should also happen using tabs, as it otherwise mixes space in a tab-environment for alignment. Furthermore, if I am already using tabs to align, it doesn’t compute the tab to spaces calculation properly, leading to result below.

What actually happened? Please include the actual, raw output from ESLint.

// notice spaces in object literal, 
// and un-aligned values since above properties were already aligned using tab
modularscale: {
	base:	 20,
	ratio:	1.125,
},

So, essentially I am suggesting two behavior modifications:

1. key-spacing should infer space vs tabs for alignment either through an option, or through the indent rule.
2. While modifying to align (with --fix), it should detect tab and how many spaces should that compute to, to align properly.

Finally, thank you for putting out this super useful piece of software!

[not-an-aardvark]

Thanks for the proposal. By design, rules can’t see the configuration of other rules, so it wouldn’t be possible for key-spacing to look at the indent configuration. However, in theory we could add a separate option to key-spacing for tab alignment.

Could you elaborate on how you’re proposing this option would work? For example, if the code looked like this:

var foo = {
	bar: 1,
	veryVeryVeryVeryVeryVeryVeryVeryVeryLongName: 2
};

Would the rule require multiple tabs after bar? Or would it always require one tab after a colon, even if that wouldn’t cause the property values to line up sometimes?

[not-an-aardvark]

Thanks for your interest in improving ESLint. Unfortunately, it looks like this issue didn’t get consensus from the team, so I’m closing it. We define consensus as having three 👍s from team members, as well as a team member willing to champion the proposal. This is a high bar by design – we can’t realistically accept and maintain every feature request in the long term, so we only accept feature requests which are useful enough that there is consensus among the team that they’re worth adding.

Since ESLint is pluggable and can load custom rules at runtime, the lack of consensus among the ESLint team doesn’t need to be a blocker for you using this in your project, if you’d find it useful. It just means that you would need to implement the rule yourself, rather than using a bundled rule that is packaged with ESLint.