Style to make Atom's tab character a wide line like Sublime Text and to only show invisibles on document highlight.

atom-invisibles-override.less

atom-text-editor::shadow {
	/**
	 * Put this in your Atom stylesheet to replace the tab character with
	 * a full-width line like in Sublime Text. Change the background color
	 * to match your theme.
	 *
	 * Open your Atom settings and under "Editor Settings" change your
	 * "Invisbles Tab" field to a single space (" "). Otherwise you will see
	 * both tab indicators.
	 */
	.hard-tab {
		position: relative;
		&::after {
			content: "";
			position: absolute;
			height: 1px;
			left: 1px;
			right: 2px;
			top: 50%;
			background: rgba(134, 133, 125, .5);
		}
	}

	/**
	 * Optional: Add these lines to have invisble characters
	 * show ONLY when you have an active selection in the document.
	 * It will show all invisibles when you highlight anything, this
	 * is a current limitation with Atom's selection process.
	 */
	.invisible-character {
		visibility: hidden;
	}
	.has-selection {
		.invisible-character {
			visibility: visible;
			color: rgba(134, 133, 125, 1);
		}
	}
}

And it is just not working in Atom 1.25.1, just updated to test this.

Does anyone have a working fix?

@stelonix I do:

// Hide invisible characters. Show them when selected.
@import 'syntax-variables';

atom-text-editor.editor {
	.invisible-character {
		// 1. Set invisbles to the theme's background color, hiding them.
		color: @syntax-background-color;
	}

	.hard-tab {
		visibility: hidden;
		position: relative;

		&::after {
			visibility: visible;
			content: '';
			position: absolute;
			height: 1px;
			left: 1px;
			right: 2px;
			top: 50%;
			background: @syntax-background-color;
		}
	}

	.cursor-line {
		.invisible-character, .hard-tab::after {
			visibility: hidden;
		}
	}

	// EXCEPT for trailing white space characters. We wanna see those.
	.line:not(.cursor-line) { // <- but not while we're typing. :)
		.trailing-whitespace {
			background-color: @background-color-error;
			color: contrast(@background-color-error);

			&.hard-tab {
				visibility: visible;
				color: transparent;
				&::after {
					background-color: contrast(@background-color-error);
				}
			}
		}
	}
}

This is based on atom/atom#6669 (comment) as well.

This version also hides the Invisbles Tab character set in the settings.

Thanks, I've now switched to VSC, since Atom feels abandoned and VSC is fast and just works. Not my desire though, I wanted to fix up Atom but it seems simply not worth the trouble.