Text Editor settings

We’re using Sublime Text in the course videos. We can’t really tell you what to do.

We’re going to collect any settings or setup stuff here. The concepts should apply no matter what editor you are using. Our goal is to keep things simple/uncluttered visually – and to help you really learn how to use the program vs. how to pimp out your settings. You’ll often have to use other people’s computers – so, don’t get too obsessed with your special system setup. Focus on the concepts and the code.

Remove the autocomplete previews

This means in Sublime Text itself, and then also in Emmet.

(We’ll put a little video about Emmet here too)

Preferences.sublime-settings

JSON

{
	"font_size": 15, // will change with your zoom
	"tab_size": 3,
	"translate_tabs_to_spaces": false,
	"auto_complete": false,
	"auto_complete_traling_spaces": false,
	"mini_diff": false,
	"color_scheme": "Packages/Agila Theme/Markdown/Oceanic Next Markdown.tmTheme",
	"theme": "Agila.sublime-theme",
	"ignored_packages": [
		"Vintage",
	],
}

The color scheme is up to you, but here’s what Derek is rocking currently.

Wrapping content with Emmet

Helpful key-bindings

Default (OSX).sublime-keymap

[
  {
    "keys": ["ctrl+w"],
    "command": "emmet_wrap_with_abbreviation",
    "context": [{"key": "setting.is_widget",  "operand": false }]
  },
  { 
    "keys": [":"],
    "command": "insert_snippet",
    "args": {"contents": ":$0;"},
    "context": [{"key": "selector", "operand": "source.css - meta.selector.css"}]
  },
]

The first one allows you to select a chunk of text, hit control + W and then type the HTML you’d like to wrap the selection with.

The second one will make it so that Sublime Text doesn’t automatically add a space after the : when you are writing CSS.

Introduction

Remove the autocomplete previews

Preferences.sublime-settings

Wrapping content with Emmet

Helpful key-bindings