User:Saul/editors

This is a page with the editors and configurations I like to use.

Atom

Atom's website

My Recommended Packages

autoclose-html

Automatically close html tags.

langauge-vue

Support for Vue files (.vue).

linter-eslint

Linting support for eslint.

platformio-ide-terminal

Integrates the terminal into the editor.

My Recommend Themes

UI Theme

I recommend using the "One Light" built-in theme as the UI Theme.

Syntax Theme

I recommend installing the geany-syntax theme as the Syntax Theme.

My Custom styles.less

You can change your styles.less by clicking edit -> stylesheet.
This is the stylesheet I like to use:

/*
 * Your Stylesheet
 *
 * This stylesheet is loaded when Atom starts up and is reloaded automatically
 * when it is changed and saved.
 *
 * Add your own CSS or Less to fully customize Atom.
 * If you are unfamiliar with Less, you can read more about it here:
 * http://lesscss.org
 */


/*
 * Examples
 * (To see them, uncomment and save)
 */

// style the background color of the tree view
.tree-view {
  // background-color: whitesmoke;
}

// style the background and foreground colors on the atom-text-editor-element itself
atom-text-editor {
  // color: white;
  // background-color: hsl(180, 24%, 12%);
}

// style UI elements inside atom-text-editor
atom-text-editor .cursor {
  // border-color: red;
}
atom-text-editor {

	line-height: 1.3;

	// Editor whitespace
	.invisible-character {
		color: #ccc;
	}
	.hard-tab {
		position: relative;
		&::after {
			content: "";
			position: absolute;
			height: 1px;
			left: 1px;
			right: 2px;
			top: 50%;
			background: #ddd;
		}
	}

	// Bring bracket match style to front
	.bracket-matcher .region {
		z-index: 100;
	}

	// Line numbering
	.gutter-container {
		.gutter {
			background-color: #eee;
			.cursor-line {
				background-color: #ccc;
				color: inherit;
			}
		}
	}

	// Make current line a bit darker
	.line.cursor-line {
		background-color: #f4f4f4;
	}

	// Search results
	.highlight {
		&.find-result .region,
		&.current-result .region,
		&.current-result ~ .highlight.selection .region {
			z-index: -1;
		}
		&.find-result .region {
			background: #ff9;
			border: none;
		}
		&.current-result .region,
		&.current-result ~ .highlight.selection .region {
			background: #ff9;
			border-bottom: 2px solid red;
		}
	}

	// Syntax highlighting colours
	.syntax--todo {
		color: #d00000;
		font-weight: normal;
		background: #ff9;
	}
	.syntax--operator.syntax--php {
		font-weight: normal;
	}
	.syntax--entity.syntax--name.syntax--function {
		color: black;
	}
	.syntax--support.syntax--php {
		color: #009;
	}
	.syntax--basic_functions.syntax--php {
		color: #009;
		font-weight: bold;
	}
	.syntax--constant {
		color: #009 !important;
		font-weight: bold;
		font-style: italic;
	}
	.syntax--constant.syntax--character.syntax--escape {
		color: #900 !important;
		font-weight: normal;
		font-style: normal;
	}
	.syntax--numeric {
		color: black !important;
		font-weight: normal;
		font-style: normal;
	}
}

Geany

Geany's website