Sublime Text 3 for site layout. Customize the appearance and install plugins. Beginner's Guide

Today I’ll tell you about the code editor that I have been using for site layout for many years. Fast, convenient and fully customizable Sublime Text 3 .



We will customize its appearance from scratch, as well as use AutoFileName, BracketHighliter, ColorHighliter, Emmet, GotoCSSDeclaration and Tag plugins, which will significantly help us with site layout! Well, from words to action!

Appearance of the program

First of all, after installing Sublime Text 3, I customize the look of the program.

Side panel

To display the panel, go to View - Side Bar - Show Open Files . This panel will display our projects, that is, folders and files of our layout. For clarity, I’ll add one of them now. All you need to do there is just drag the project folder onto our panel.

Color scheme

Next, I adjust the color scheme of the program and code, for clarity, I will open any file, for example, with HTML code. To do this, double-click on the desired file. Now I’m going to Preferences - Color Scheme , a window opens with the installed color solutions and when choosing a particular theme, the appearance of our code and the program itself will change.



Personally, none of the predefined options suits me, so I install an additional color scheme. A huge number of them can be found and viewed on the site with additions to Sublime packagecontrol.io . I already know which particular scheme I want to install, which I will do now.

In order to install new color schemes, plugins and other add-ons, I need to first install the installer of these add-ons. It sounds complicated, but in fact, everything is much simpler.

Turn on the menu the Tools - the Command the Palette , or press the Ctrl + the Shift + P . This window opens with a search, I enter install in the search field until I see the Install Package Control item , and click on it. After a few seconds I get a message that Package Control has been successfully installed. Now I can start setting the desired color scheme.



To do this, I again call up Command Palette by holding Ctrl + Shift + P, I enter install in the search field again until I see Package Control: Install Package(install the add-on package) click on it. After waiting a bit, I see a window with a list of all available add-ons for Sublime. Well, almost everyone.

In the search field I enter the name of the add-on that I want to install, at the moment it is a color scheme called Base16 Color Schemes, more precisely it is a whole package with many color schemes. I click on the found item and wait for the installation. The installation progress indicator can be seen on the bottom panel of the program. Having received a short message there that everything is installed, I proceed to change the circuit. To do this, I open the already familiar menu item Preferences - Color Scheme and see in the window that opens there are already a lot of different options. I'm interested in the Ocean scheme, I enter the name in the search, there are two of them: one is more contrasting with the other.



My favorite color scheme is set, of course you can choose any other for yourself.

I like the overall look of the program more dark, so I switch to Preferences - Theme , and switch to Adaptive.sublime-theme



The combination of colors is very important for working with the code, as this affects not only the perception, but also the fatigue and health of your eyes. So pick up your color scheme so that nothing bothers you about it. And remember about breaks in work!

Additional settings

The following additional settings will help me to increase the perception of the code and the comfort of working with it. Go to Preferences - Settings . Such a window is opened divided into two parts. The default settings are on the left side, you can’t change them, but on the right side you can reassign these settings, each next one must be separated by a comma. Here are the settings I use:

"margin": 0, // Убирает отступы
"font_size": 10, // Размер шрифта по умолчанию
"draw_indent_guides": true, // Включает/выключает направляющие линии
"draw_white_space": "all", // Отображает непечатаемые символы
"tab_size": 3, //Размер табуляции
"remeber_open_files": true, // Помнит открытые ранее файлы

I will explain each setting.

"margin": 0, // Убирает отступы

Removes strange indentation in the program between the code and the sidebar, which makes the overall picture more compact.

"font_size": 10, // Размер шрифта по умолчанию

Sets the default font size. You can also quickly change the font size while working with the code by holding the control and spinning the mouse wheel.

If you suddenly changed the size by accident, then you can reset it by going to Preferences - Font - Reset

"draw_indent_guides": true, // Включает/выключает направляющие линии

These lines are very useful for a beginner, because they visually connect the opening and closing element, which greatly helps in orientation in the code.

Personally, I disable them (false) for two reasons. The first is that I am no longer a novice and can do pretty well without them, the second reason is the following setting.

"draw_white_space": "all", //Отображает непечатаемые символы

Displays invisible tabs and spaces. That is, this is not part of the code, but simply markup for ease of use. And so, if you turn on both draw_indent_guides and draw_white_space, then you get a slurry that personally bothers me. What to use and what not to decide for you.

"tab_size": 3, //Размер табуляции

Indent line width size when Tab is pressed. Personally, I like the 3rd size :)

"remember_open_files": true, //Помнит открытые файлы

For example, we worked, worked, and then unexpectedly closed the program :) Does it happen? I have it all the time, so this setting includes Sublime “memory”, and the next time you open the program, all the latest files will open. And yes, the memory also works after rebooting the computer.

Splitting the working window

Splitting the working window will help us further improve the perception of the code and speed up the layout process.

Since you almost always have to work with several different files, for example, index.html style.css and some js file, it will be an additional convenience to divide the window with the code into sectors. There are several options. Go to View - Layout and see what we have here.



Accordingly, Single is a view without partitions as it is now, Columns: 2, 3, 4 is a vertical breakdown. For example, by clicking on Columns: 2, our screen with the code will be split in half, and we can move part of the files to an empty column, for example, CSS on the left of HTML and JS on the right, which makes the work more visual and faster.



We also have options to divide the screen horizontally: Rows: 2 and Rows: 3, for example by clicking on Rows: 3 we get three horizontal windows and you can transfer the JS file to the third window. And the last option is Grid: 4, which divides the screen in half both horizontally and vertically. The result is four windows. Please note that you can also switch between modes using the hot keys Alt + Shift + the corresponding number .



So you have a wide selection to your taste. I most often use one vertical split.

Syntax Highlights

The ultimate appearance customization will be syntax highlighting. The word is terrible, but in reality everything is simple.

Syntax highlighting is a special coloring with the color of one or another element in the code. For example, in this color scheme in an HTML file, the tag is highlighted in red, the class name is green, the text is white, and so on. This makes the perception of the code much clearer. Pay attention to the lower right corner of the program window, depending on which file is currently active, CSS HTML JS, and so on, the display of the code for this particular file is switched.

Why do something here if everything is working fine already? The fact is that in the initial Sublime package syntax highlighting packages are not installed for all formats.

For example, in the future I plan to work with SCSS files, opening it I will see a solid sheet of a set of white characters. Not very convenient, right?



So, in such cases, I additionally install the desired package.

We open our familiar Command Palette by going to Tools - Command Palette , or press Ctrl + Shift + P, type install , click Install Package Control and look for the SCSS add-on. Click on it, after installation we can switch our display to SCSS. Now everything looks prettier, right?



Customizing the appearance of the editor is important, as we spend quite a while writing code. It affects our fatigue, productivity, health, and just our mood.

The next thing we will do is install a number of plugins and add-ons. There are a huge number of them, and I will talk about the main ones that I use actively myself and which will speed up the whole layout process at times. Let's get started!

Plugins

AutoFileName

The fact is that in the process of layout often you have to connect various pictures. This plugin at times facilitates the connection process. Install it. Press Ctrl + Shift + P then Install Package Control, look for AutoFileName install. Let's try to connect the picture now. Immediately notice the appearance of a drop-down menu with a list of local files. We go to the desired folder with pictures and see here the file we need, as well as its size, which is also useful.

Brackethighliter

BracketHighliter can be translated as backlight quotes. Install it. Press Ctrl + Shift + P , Install Package Control, look for BracketHighliter . Install. It even opens a separate file with a message about a successful installation. Now, in our code, the start and end elements, for example, the opening and closing tags, the start and end quotes, and the opening and closing brackets will be highlighted. This helps a lot with orientation in the code.

Colorhighliter

Pay attention to this code - this is a color code, but which one is not clear.



Let's install the plugin. Ctrl + Shift + P , Install Package Control, look for ColorHighliter . Again, a separate file opens with a message about the successful installation. And some error messages, ignore them. We look at our code with color, and now we see what color is hidden behind the alphanumeric code. The plugin itself can be additionally configured in the Tools - ColorHighliter menu, but now we will not dwell on this. Everything has become much better.

Great and mighty Emmet

We install according to the established scheme. Ctrl + Shift + P , Install Package Control, look for Emmet . A separate file opens with a message asking you to restart the program to complete the installation. Close and open Sublime. We get a message that everything is installed.

So what does Emmet do?

We ’ll go into the HTML file and try to write the div tag with the .block class , for this we just have to put an end to it , write “ block ” and press the Tab key . We will get:

To make a more complex entry, for example, in the div tag with the .block class , insert the span tag, use the following entry:

.block>span

Press the Tab key and get:

Krutyak, really !?

But that is not all, we can create our own snippets, that is, templates / templates.
To do this, go to Preferences - Package Settings - Emmet - Settings User . Here we write the following:

{
	"snippets":{
		"html":{
			"snippets":{
				"bl":"
"
			}
		}
	}
}

Now to invoke the entry:

it’s enough for us to write bl and press the Tab key.

From this it follows that the possibilities of Emmet are unlimited, and we can configure our snippets as we like and work very quickly. Detailed information about the capabilities of the plugin can be found at https://emmet.io

GotoCSSDeclaration

The plugin will help us with navigation in the code. Install exactly the same as the previous plugins. Next, we will assign hot keys for working with the plugin. For this, go to Preferences - Key Bindings , and write the following code

{
"keys": ["ctrl+1"], "command": "goto_css_declaration",
"args": {"goto": "next"}
},

Where [" ctrl + 1 "] this is the desired key combination. Keeping Cntr + S .
And this is how it works. We must have CSS and HTML files open. CSS is usually very large and finding something quickly is difficult, but it's in the past. For example, we need to change the CSS for the content-mainpage class, click on it with the mouse and press ctrl + 1 . Voila, we are at the right place in the CSS file.

Tag

Well, for those who have read up to this point, I will show you another plugin that is not so easy to install, but it is definitely worth it.

His name is Tag and we will have to install it manually. According to this link , you can download the archive with the plugin. Next, unpack it into a special program folder. For Windows 10, this is C: \ Users \ [Substitute your username] \ AppData \ Roaming \ Sublime Text 3 \ Packages. Next, close Sublime and open it again and add hot keys by opening Preferences - Key Bindings and adding the following:

{ "keys": ["ctrl+`"], "command": "tag_classes" }

Where ctrl + ` is our keyboard shortcut.

So, why did we go all this hard way? As a rule, in the process of writing code, we work with HTML first, then transfer the class names to CSS and work there already. So, this transfer should be done manually for a long time. And here the Tag plugin comes to the rescue . For now, it’s enough for us to select the necessary HTML code, press our ctrl + ` key combination



and then paste the copy result into our CSS ctrl + v .



Based on the release of “ Sublime Text 3. Setup, installation, plug-ins ”, from the series “ Programs and tools for website typesetting ”, on the YouTube channel “ Freelancer for life ”.