Difference between revisions of "User:Saul/editors"

From Organic Design wiki
m (My Custom styles.less)
m (My Recommend Themes: Improve readability.)
 
(One intermediate revision by the same user not shown)
Line 3: Line 3:
 
[https://atom.io Atom's website]
 
[https://atom.io Atom's website]
 
== My Recommended Packages ==
 
== My Recommended Packages ==
=== autoclose-html ===
+
* '''autoclose-html''' - Automatically close html tags.
Automatically close html tags.
+
* '''langauge-vue''' - Support for Vue files (.vue).
=== langauge-vue ===
+
* '''atom-jinja2''' - Support for jinja2 template files (.j2).
Support for Vue files (.vue).
+
* '''atom-typescript''' - Typescript integration.
=== linter-eslint ===
+
* '''fast-eslint-8''' - Eslint integration. NOTE: go to package settings and add the following to '''Grammar scopes''' for typescript support: '''source.ts, source.tsx'''
Linting support for eslint.
+
* '''platformio-ide-terminal''' - Integrates the terminal into the editor.
=== platformio-ide-terminal ===
+
* '''minimap''' - Gives a preview of the source code (like sublime).
Integrates the terminal into the editor.
+
 
 
== My Recommend Themes ==
 
== My Recommend Themes ==
=== UI Theme ===
+
* '''One Light''' - UI Theme.
I recommend using the "One Light" built-in theme as the UI Theme.
+
* '''geany-syntax''' - Syntax Theme
=== Syntax Theme ===
+
 
I recommend installing the geany-syntax theme as the Syntax Theme.
 
 
=== My Custom styles.less ===
 
=== My Custom styles.less ===
 
You can change your styles.less by clicking edit -> stylesheet.<br>
 
You can change your styles.less by clicking edit -> stylesheet.<br>

Latest revision as of 01:46, 26 August 2022

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

  • One Light - UI Theme.
  • geany-syntax - 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