Sublime Text 3 is one of the most popular text editors for programmers. It provides its users with unique features that are not available anywhere else. One of the most important advantages is cross-platform and extensibility.
Here you can configure everything - from appearance to program components (plugins). But the level of customization in Sublime Text is appropriate - as an editor for programmers, it is configured through the source code, which not everyone can do. In this article, we will look at how Sublime Text 3 is configured.
For Sublime Text, from the very first versions, the possibilities were much higher than for other editors. Is it a joke - a fully customizable interface, the ability to customize the behavior of the program, and not just enter text? What can we say about plug-ins - the code written in Python allows the user to control the editor in the same way that a snake tamer, playing a magic pipe, makes a giant boa constrictor tremble before him. However, as much as we're sorry, this is exactly what scares newbies - being unable to set up the editor, they stop using it.
Setting up Sublime Text 3
First, let's talk about the appearance, and then move on to setting up hotkeys and plugins.
1. Appearance of Sublime Text
So, it's time to start Sublime Text (installation article -). Many people like the design of the program, while others do not. And now you have a unique opportunity to change the interface beyond recognition!
The easiest-looking way is to select a theme through the settings. To do this, go to the menu "Preferences" -> "Color Scheme" and choose the theme you want. But this method will only change the colors of the editor, and nothing more.
Another, more complicated, but sure option is to deal with the settings file. To open it, go to the menu "Preferences" -> "Settings". And now, in front of you is nothing but a bulk of text. But not everything is as difficult as it seems! On the left are the default settings, you don't need to touch them. They can be taken as an example. But on the right you need to place your settings - take, copy the desired line and change its value. Basic settings:
- "color_scheme"- color theme. You can choose from existing ones, or you can download it to the Packages / Color Scheme - Default / folder.
- "font_face"- text font. It is important that it is in the system. To see the list of available fonts, open any text editor, such as Lible Office Writer.
- "font_size"- font size, set as a fractional or integer value.
- "font_options"- additional font options like "no_bold", "no_italic".
- "word_separators"- word separators.
- "line_numbers"- line numbering setting.
- "gutter"- whether to display "groove"(it contains line numbers and bookmarks).
- "margin"- the length of the indent from "grooves".
- "fold_buttons"- if you hover over "groove", triangular arrows will be visible, allowing you to hide or show a piece of code between curly braces. You can turn them on or off here.
- "fade_fold_buttons"- if set to false, then triangular buttons will not be hidden.
Here is an example of the settings action (don't forget to save the file):
You can experiment here yourself. And we move on.
2. Customize Keyboard Shortcuts
Yes, yes, you heard right! Anyone can customize the combinations in their own way by assigning them different values. To open the file, go to "Preferences" -> "Key Bindings".
We again have two files, one of which is the default settings, and the other is your personal settings. To change the combination, you must copy one or more lines enclosed between curly braces. Here is an example of my file:
Of course, this doesn't change anything (it's a keyboard shortcut to close any application), but this file is just an example.
Well, that's it, Sublime Text has become what you need it to be and you know how to set up Sublime Text 3. And now it's time to move on - to install plugins.
3. Package Control Installation
As mentioned earlier, the editor has the ability to add plugins, whether they are their own or downloaded from the developer's site. However, in spite of everything, installing plugins manually is not very convenient, and therefore you need to download and install an additional component.
Package Control - designed for faster and more convenient installation of plugins. It allows you to install them through a rendered interface rather than through code.
First, install Package Control from the official site. This does not mean that we will download it!
- Let's copy the text from the corresponding text field (depending on the version of Sublime Text).
- Using a keyboard shortcut "Ctrl+~" we call the console built into the editor (yes, there is such a thing!).
- Paste the copied code into the text field and wait for a successful installation.
- We restart the editor.
package control installed! Now it's time to figure out how to use it.
4. Working with plugins in Package Control
To launch Package Control, you need to type the keyboard shortcut "Ctrl+Shift+P" and select the Package Control: Install Package element from the list.
And before us is the long-awaited installation of plugins! Now it is possible to quickly search for and select them, and if you select other commands for the Package Control, you can both delete and change editor elements. Now we need to practice on the installation. Set the Material Theme and configure the sublime text 3 theme.
- Launch the plugin installer.
- We type in the search field Material Theme.
- Press and wait, an inscription should appear below "Installing package Material Theme". During the installation process, you will be asked to add another plugin, we allow it.
To apply a theme, you need to go to the menu "Preferences" -> "Color Scheme" -> "Material Theme" -> "schemes", and then the theme you like best.
However, that's not all. Despite installing the theme as a plugin, it is not fully activated. To fix this, go to the settings file and add the following text:
"theme": "Material-Theme. sublime-theme",
"color_scheme": "Packages/Material Theme/schemes/Material-Theme.tmTheme",
"overlay_scroll_bars": "enabled",
"line_padding_top": 3,
"line_padding_bottom": 3,
// On retina Mac
"font_options": [ "gray_antialias" ],
"always_show_minimap_viewport": true,
"bold_folder_labels": true,
// Highlight active indent
"indent_guide_options": [ "draw_normal", "draw_active" ]
View of the editor after applying the theme to it:
Not bad, right? Sublime Text 3 setup is almost complete. And now it's time to establish something more substantial. Let's take a look at the most popular plugins for Sublime Text.
Top 5 plugins for Sublime Text 3
1. Emmet
Emmet is a plugin that allows you to make code display more convenient. Keyboard shortcuts are used here. For example, "html+tab" creates a document frame, and " div wrapper +tab" will turn into a full-fledged code:
This plugin is a collection of snipset abbreviations for JavaScript. The length of the typed text with the help of hints really decreases! For example, instead of a set "document.querySelector("selector');" you can just type "qs+Tab".
Why look for a place for a new file in an inconvenient directory tree? This plugin will allow you to quickly and efficiently enter the necessary data, and the file will be created in just a couple of keystrokes!
4. Git
The name of this plugin speaks for itself: you can perform all the necessary actions within Git without leaving the editor!
Hello friends! By popular demand, updated the quick setup guide for the code editor Sublime Text 3, installing the plugins necessary for layout and creating your own preset for a quick start at a new workplace.
cool
Pin it
You are probably familiar with the situation when at a new workplace you need to quickly install and configure Sublime Text to work on new projects. As a rule, fine-tuning Sublime Text takes a lot of time and doing it every time is not practical and time consuming.
Today we will look at the fastest Sublime Text setup, the most popular plug-ins among layout designers and install one of the best and most comfortable editor themes One Dark Material Theme.
By default, Sublime Text looks pretty sad:
First you need to set up package control. To do this, press the hotkey Ctrl+Shift+P. In the pop-up window, type Install Package Control and select the appropriate item. After a few seconds, Package Control will be installed, about which you will receive a notification.
If you are a MacOS user, you must press Cmd + Shift + P on your keyboard.
The Package Control is required so that you can install add-ons and plugins in Sublime Text 3 from the package repository.
Installing plugins in Sublime Text
Next, you need to install the plugins you need to work. We will consider installing the most popular plugins among layout designers, which greatly simplify development. You can also experiment with other plugins in the Package Control, maybe you'll like some of the many more packages available.
To install plugins in Sublime Text via Package Control, you need to call the menu, as we did earlier: Ctrl + Shift + P. Then enter the command "Install Package" and select the desired package from the list.
The most popular plugins for Sublime Text:
- Emmet- speeds up writing HTML and CSS code to the speed of light. Lesson by Emmet ;
- AutoFileName- complements the code when writing paths to files in the layout;
- gist- Enables Sublime Text to use the GitHub Gist code snippet service. Gist tutorial;
- Sass- plugin for highlighting Sass syntax in Sass and Scss files. Expands Emmet in Sass files.
Installing Sublime Text Appearance
I really like the theme One Dark Material Theme and highlighting the code with the appropriate color scheme. These are the most balanced, sufficiently contrasting, but not too sharp colors for comfortable work in the editor.
To install the One Dark color scheme, we need to install the following packages via Package Control:
- One Dark Color Scheme- color scheme for code highlighting;
- One Dark Material - Theme- UI Sublime Text theme.
Installing the Plugin Manually
Some plugins are no longer updated in the Package Control or simply don't appear there. Some of these plugins are vital when working with code and have to be installed manually.
One of these plugins BufferScroll- an amazing plugin that, when you re-open the document, sets the cursor to the place where you finished editing the last time, thereby reducing the time to find the right position to continue working.
To install BufferScroll manually, go to the plugin's GitHub page, download and extract it to any convenient location on your disk. Next, in Sublime Text, select the menu item Preferences > Browse Packeges. The user data folder on your drive will open. Copy the folder containing the Buffer Scroll files here and restart Sublime Text. Now the plugin is working.
Tweaking the editor, presetting my settings
Let's move on to the Sublime Text settings.
I present my preset, which I always use to start setting up the Sublime Text editor on a new workplace or after a system reinstall. You can use this preset in your editor and customize it as needed:
Keymap (Windows Users): [ ( "keys": ["alt+shift+f"], "command": "reindent" ), ] Settings: ( "show_definitions": false, "auto_complete": false, "bold_folder_labels" : true, "color_scheme": "Packages/One Dark Material - Theme/schemes/OneDark.tmTheme", "fold_buttons": false, "font_size": 13, "highlight_line": true, "indent_guide_options": [ "draw_normal", "draw_active" ], "line_padding_bottom": 2, "line_padding_top": 2, "margin": 2, "material_theme_compact_sidebar": true, "material_theme_compact_panel": true, "material_theme_small_statusbar": true, "material_theme_small_tab": true, "tab_size" : 2, "theme": "OneDarkMaterial.sublime-theme", "word_wrap": "false", )
Preset code for user settings (Preferences.sublime-settings | Preferences > Settings) - separately:
( "show_definitions": false, "auto_complete": false, "bold_folder_labels": true, "color_scheme": "Packages/One Dark Material - Theme/schemes/OneDark.tmTheme", "fold_buttons": false, "font_size": 13 , "highlight_line": true, "indent_guide_options": [ "draw_normal", "draw_active" ], "line_padding_bottom": 2, "line_padding_top": 2, "margin": 2, "material_theme_compact_sidebar": true, "material_theme_compact_panel": true , "material_theme_small_statusbar": true, "material_theme_small_tab": true, "tab_size": 2, "theme": "OneDarkMaterial.sublime-theme", "word_wrap": "false", )
Preset code for custom keyboard shortcuts (Default (Windows). sublime-keymap | Preferences > Key Bindings) - separately:
[ ( "keys": ["alt+shift+f"], "command": "reindent" ), ]
Now on selection and on click Alt+Shift+F your code will automatically indent align with the appropriate element nesting hierarchy.
By placing these snippets in the appropriate settings files, you will get a completely ready-to-work, customized Sublime Text or you can customize the editor for yourself. There are two fields in the settings - the left one with default settings and the right one with user settings. In the default settings, you can see hints for each property and apply it on the right side by copying and setting your value.
Finding out which property is responsible for what is quite simple - all properties have intuitive names in English. Any property from a large abundance of available settings can simply be translated into Russian and understand what it means.
In order to backup all your settings and quickly deploy Sublime Text to another workplace, just copy the folder
"C:\Users\(your user)\AppData\Roaming\Sublime Text 3"
to a hidden reserve place on your disk or on a USB flash drive, and then place it with another user or on another computer in the same directory under the user.
Also, additionally, at your discretion, you can turn off the minimap on the right and hide the menu. This can be done by going to View > Hide Minimap and View > Hide Menu. You can display the menu by pressing the Ctrl key on your keyboard.
// echo get_the_post_thumbnail(get_the_ID(), "relatedthumbnail"); // displaying my thumbnail size?>Hello, a lot has already been written about Sublime Text. In my blog, I wrote about Sublime Text 2. Now Sublime Text 3 has already left the alpha version (alpha means a new and extremely unstable version), and moved to beta (beta is still not stable, but is already intended for testing, after the beta usually comes the official release). And I decided to completely deal with Sublime Text 3 (hereinafter referred to as ST3).
If you are going to install SublimeText3 then this is the most complete guide for you. Here I will describe everything related to this editor, and he really knows a lot.
First, I removed ST2 and all traces of it from the system. Also removed node.js and npm which was paired with it. Since I intend to re-configure the compilation of less, and then saas files, correctly and correctly, through sublime. But more on that later.
Part 1. Installing and configuring Sublime Text 3
Download and install Sublime Text 3
If you're not already aware, Less is a JavaScript-based CSS preprocessor. This is the code that compiles to CSS. There are different ways to compile less to css: Grunt , Guard , and Less.app . However, perhaps you don't want or don't need to use additional tools and want to do everything right in the code editor. Below I have given instructions that are suitable for Windows users (I myself did the installation on it, and also for mac OS.)
- Install Node.js
- Install NPM (installed with Node.js)
- Install Less Globally. Open Windows console and type npm install less -gd
- Install the Less2Css plugin and SublimeOnSaveBuild
Let's open the ST3 settings: Preferences → Settings - Default, and add the line at the end:
"lesscCommand": "/usr/local/share/npm/bin/lessc"
Let's open any .less file and try to build it. Just make changes to the file, and press Ctrl + S.
If an error occurs: Unable to interpret argument clean-css ... This happened because the clean-css plugin was separate and not included in the less package. Therefore, it must be installed separately. Install. We go to the console and write:
npm install -g less-plugin-clean-css
SASS is another CSS preprocessor. Gaining popularity, and is already overtaking less in the spread of use.
- Install Ruby
- We start the console, and put Ruby Gem gem install sass
- Installing the Sass Plugin for Sublime Text
- Installing the Sass Build Plugin for Sublime Text
- Installing the SublimeOnSave Plugin for Sublime Text
(we talked about this plugin in the instructions above)
Now let's add settings to Sublime Text Settings - Default:
( "filename_filter": ".(sass|scss)$", "build_on_save": 1 )
Also do not forget to open the .sass file and select the build system in Tools → Build System → SASS Compressed Now, when you save the .sass file, .css will be compiled.
Jade is a preprocessor for writing html code, and like less or sass for css, it makes writing html markup faster and easier (for experienced layout designers). How to install and configure its operation.
- Must have node.js installed with npm (usually bundled with node)
- We go to the console and install jade with the command npm install jade --global
- Install the Jade Build Plugin in Sublime Text
- In Sublime Text, open the .jade file and select Jade build system
- If you follow all the instructions in this post, then in the Sublime settings I will supplement the line about Save On Build with the jade extension and now it will look like this "filename_filter": ".(sass|scss|jade)$",
- Install the Jade Plugin in Sublime
After these manipulations, jade files are compiled.
If there is no Jade code highlight, then go to the lower right corner of the ST, and it probably says Plain Text, click on that inscription, and then select Jade highlight. Now the backlight will work.
Sublime Text plugins are written in Python. The language itself is very simple and if you are a programmer, then it will not be difficult for you to learn it. If not, then it doesn’t matter either, since most likely the plugin has already been written for your task.
Installing plugins in Sublime Text
At the moment, there are two methods for installing plugins in the program:
- Barbaric. Simply download the necessary plugin from the Internet and drop it into the appropriate folder. But this is not a correct method, because of this we will not dwell on it.
- Via Sublime Package Control
Before you start installing plugins, you need to install Sublime Package Control, read about it.
To install plugins you need:
- open the command line by pressing the key combination: ctrl+shift+p ;
- in the line we enter Install Package and press enter;
- at the bottom, in the field that opens, enter the name of the plugin, for example: emmet;
- press enter and wait for the end of the installation, a screen with a bunch of lines will appear there;
- Ready.
(see instructions on 3 screenshots)
It doesn’t make much sense to talk about which plugins are popular, and which ones don’t make much sense, since Sublime writes in several dozen programming languages and each language has its own plugins.
But since the majority of people who choose this editor write in php, we will still consider a few.
Sublime Text Emmet
A little earlier in the example, we installed this plugin. It greatly speeds up the development of sites. In order to understand what it does in the lower right corner, instead of Plain Text, select PHP. Now we put in the editor! and press TAB.
You can also enter: .wrapper press tab, as we see we have a div.
In order to make a menu with 10 links, you can write the following, then press tab: .menu>ul>li*10>a(menu_$)
On the left side “!+tab” , in the central part “.wrapper + tab”, and on the right side “menu>ul>li*10>a(menu_$) + tab” I think you get the point.
Advanced New File
Allows you to create new files. Install the plugin, open the right side bar (view - side bar -show side bar), then press the key combination ctrl + alt + n and write index.php, as we see the file has been created, and it is very fast and convenient.
Bracket highlighter
By default, if we stand, for example, on some div, then it is very difficult to notice the closing tag, since it is underlined too faintly. Bracket highlighter.
It is noticeable that underlined with a bright white line. color highlighter
Suggests the color of the code, that is, by default, it is not clear to us what color the #224f43 code will be, and the plugin underlines the code with the color it is. Moreover, if we click on the code, it will highlight it with this color.
Gotocs Declaration
Helps to find and go to the desired css element directly from the html code. You just need to right-click on the element to which this style is applied and select Go To CSS Declaration
Cross-platform text editor.
A short guide for beginners to work in sublime and in the field of layout. Everything you need and need is here. (Click the links for more if needed)
We will consider it for Layout on Pug / Less, where we do not need huge debugging functionality. Therefore, it is this editor (in my opinion) that wins over its competitors both in speed and in functionality.
1. Installing the program and controlling add-ons (Package Control)
- Install Sublime Text 3. Everything is simple - download and start.
Here we can Download, install, remove, view add-ons, etc.
2. Program settings:
- Use spaces instead of tabs.
"translate_tabs_to_spaces": true - The tab size is 4 spaces.
tab_size: 4You ask why?
In order not to accidentally press the spacebar and tab together, and not break the pug assembly.
As well as for the uniformity of team work. - Strings should not end with empty characters.
To do this, we use the plugin TrailingSpaces .
- Perhaps this is where the mandatory MustHave settings end. Let's move on to the individual:
- F11 fullscreen + hide menu bar (alt). Allows you to maximize the use of the monitor for work and not be distracted by the status of the OS panel.
- Prohibit line break. Probably the best one out of the list. Prevents confusion in pug syntax. Shows always expected code and nesting regardless of screen size. Horizontal scrolling is done by shift + wheel, (or touchPanel)
"word_wrap": "false" - Themes. I can't say anything about this. Just find what you like (preferably using a dark scheme). I use "theme": "Material-Theme-Darker.sublime-theme".
- Syntax highlighting. Well, I don't think there should be a problem. If you make sure that the expansion and highlighting match (Pug for Pug, not Jade for Pug)
- View → Side Bar → Hide Open Files- Frees up space for the project tree. Because this field is duplicated by tabs and three dots on top anyway
3. Useful hotkeys:
- In the first paragraph, let's say that we skip all the standard combinations, such as ctrl(⌘) + Z(⌘ - then just ctrl). Undo, save, redo, close tab, restore tab, etc...
- Perhaps the next most popular combination is:
crtl+P- Allows you to search through the files of the project you have opened. Allows you to get rid of a huge tree of open styles. - Next in importance:
ctrl + D- Search for copies of the selected text. Ideal for multi-editing. And to find duplicates. Especially in larger files and larger fragments. For multi-cursor hold ctrl and use mouse. - ctrl+L- Selects the entire line and allows you to delete it completely. Works well with ctrl+D.
- Search… Well, probably the first one is ctrl+F - file search. The second and more important is to search in a folder for many files ctrl + shift + F (You can call it by right-clicking on the folder and choosing "Find in folder ...") I advise you not to include the "Famous Fat Man" folder in the search
- ctrl+shift+up/down- Moves the line up/down (swap them). Useful for working with styles and variables.
- Now a small tutorial on keyboard shortcut combinations. You have probably seen these combinations separated by commas. So I saw ... and now I know how to use them. To do this, press these combinations in turn (you can not release the common mod key)
Here are some useful ones: - ctrl+K, ctrl+4- Hides all branches, the nesting of which is greater than 4. Analogue of the arrow to collapse. ( ctrl+K, ctrl+J- expands everything that is)
- ctrl+K, ctrl+B- Hides/shows the SideBar. (works well with F12)