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).
• atom-jinja2 - Support for jinja2 template files (.j2).
• atom-typescript - Typescript integration.
• fast-eslint-8 - Eslint integration. NOTE: go to package settings and add the following to Grammar scopes for typescript support: source.ts, source.tsx
• platformio-ide-terminal - Integrates the terminal into the editor.
• minimap - Gives a preview of the source code (like sublime).

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:

// 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;
	}
	.syntax--meta.syntax--class {
		color: #030360;
	}
}

Geany

Geany's website