Plugins. Sublime text plugins useful plugins

// echo get_the_post_thumbnail (get_the_ID (), "relatedthumbnail"); // display my thumbnail size?>

Hi, 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 - still not stable, but already intended for testing, there is usually an official release after the beta). And I decided to completely deal with Sublime Text 3 (further in the text ST3).

If you are going to install SublimeText3 then this is the most complete instruction for you. Here I will describe everything related to this editor, and he really can do 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, via 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 familiar, 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, you may not want, or you do not need to use additional tools, and you want to do everything right in the code editor. Below I have provided an instruction that is suitable for Windows users (I myself did the installation using it, and also for mac OS.)

Installing 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

Open the ST3 settings: Preferences → Settings - Default, and add the line to 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 is because the clean-css plugin has been detached and is not included in the less package. Therefore, it must be installed separately. Let's install. We go to the console and write:

Npm install -g less-plugin-clean-css

SASS is another CSS preprocessor. It is gaining popularity, and is already overtaking less in the spread of use.

Install Ruby
Launch the console and install Ruby Gem gem install sass
Install the Sass plugin for Sublime Text
Install the Sass Build plugin for Sublime Text
Install the SublimeOnSave plugin for Sublime Text
(we talked about this plugin in the instructions above)

Now let's add the settings to Sublime Text Settings - Default:

("filename_filter": ". (sass | scss) $", "build_on_save": 1)

Also, do not forget to go to the open.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 it faster and easier (for experienced coders) to write html markup. How to install and configure it to work.

Must have node.js installed with npm (usually bundled with node)
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 highlighting, then go to the lower right corner of ST, and it most likely says Plain Text, click on that inscription, and then select the Jade highlight. The backlight will now work.

Cross-platform text editor.

A short guide for beginners to work in sublime and in the field of layout. All the most necessary and important things are collected here. (See 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 its competitors both in speed of work and in functionality.

1. Installation of the program and control of add-ons (Package Control)

Install Sublime Text 3. Everything is simple - swing and run.

Now press ctrl / ⌘ + shift + p or from the menu (Tool> Command Palette).

Here we can Download, install, uninstall, view add-ons, etc.

2. Program settings:

We use spaces instead of tabs.
"Translate_tabs_to_spaces": true
The tab size is 4 spaces.
"Tab_size": 4
Why do you ask?
In order not to accidentally press space and tab together, and not break the assembly pug.
And also for the consistency of teamwork.
Strings should not end with blank characters.
For this we use the plugin TrailingSpaces .

- Perhaps this is where the mandatory MustHave settings end. Let's move on to individual ones:

Full screen mode F11 + hide the menu bar (alt). Allows you to make the most of the monitor for work and not be distracted by the status of the OS panel.
Prevent line breaks. Probably the best property of the above. Prevents confusion in pug syntax. Shows always expected code and nesting regardless of screen size. Horizontal scrolling is carried out 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 am using "theme": "Material-Theme-Darker.sublime-theme".
Syntax highlighting. Well, I think there should be no problem here. 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. Since this field is already duplicated by tabs and three dots above

3. Useful hotkey:

In the first paragraph, we will say that we will skip all standard combinations, such as ctrl (⌘) + Z(⌘ - hereinafter 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 your open project. Lets 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 large chunks. For multi-cursor, hold down ctrl and use your mouse.
ctrl + L- Selects the entire line and allows you to delete it completely. Works well with ctrl + D.
Search… Well, probably the first is ctrl + F - search by file. The second and more important is the search in a folder for a set of files ctrl + shift + F (You can call it by right-clicking on the folder and select "Find in folder ...") I advise you not to include the "Known Fat Man" folder in the search
ctrl + shift + up / down- Moves the line up / down (swaps them). Convenient for working with styles and variables.
Now a small tutorial on keyboard shortcuts... You've probably seen these combinations separated by commas. So I saw ... and now I know how to use them. To do this, in turn, press these combinations (you can not release the general mod key)
Here are some useful ones:
ctrl + K, ctrl + 4- Hides all branches, the nesting of which is more than 4. The analogue of the arrow is collapsed. ( ctrl + K, ctrl + J- deploys everything that is)
ctrl + K, ctrl + B- Hides / shows SideBar. (works well with F12)

Sublime Text 3 is one of the most common text editors for programmers. It provides its users with unique capabilities that are not found anywhere else. One of the most important advantages is cross-platform and extensibility.

Here you can customize everything - from appearance to program components (plugins). But the level of customization in Sublime Text is appropriate - as an editor for programmers, it is customizable through the source code, which not everyone can do. In this article, we'll take a look at how Sublime Text 3 is configured.

For Sublime Text, from the very first versions, the capabilities were much higher than those of 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 plugins - the code written in Python allows the user to control the editor in the way that a snake tamer, playing a magic pipe, makes a giant boa constrictor tremble in front of him. However, as sorry as we may be, this is what scares off newbies - being unable to customize the editor, they stop using it.

Setting up Sublime Text 3

Let's talk about the look first, and then move on to configuring 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 seemingly simplest way is to choose a theme through the settings. To do this, go to the menu "Preferences" -> "Color Scheme" and choose the theme you need. But this method will only change the color of the editor, and nothing more.

Another, more complicated, but correct option is to deal with the settings file. To open it, go to the menu "Preferences" -> "Settings". And so, in front of you is nothing but a bulk of text. But not everything is as complicated as it seems! On the left - the default settings, you do not 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 the existing ones, or you can download it to the Packages / Color Scheme - Default / folder.
"font_face"- the font of the text. It is important that he is in the system. To see a list of available fonts, open any text editor, for example, 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"- setting line numbering.
"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", then triangular arrows will be visible, allowing you to hide or show the piece of code between the curly braces. They can be disabled or enabled here.
"fade_fold_buttons"- if set to false, then triangular buttons will not be hidden.

Here's an example of a settings action (don't forget to save the file):

You can experiment here yourself. And we move on.

2. Customize keyboard shortcuts

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".

Before us again are two files, one of which is the default settings, and the other is your personal settings. To change the combination, you need to copy one or more lines between curly braces. Here's an example of my file:

Of course, this does not change anything (this is a keyboard shortcut for closing any application), but this file is just an example.

Well that's all, Sublime Text has become the way you need it and you know how to set up Sublime Text 3. And now it's time to move on - to install plugins.

3. Installing Package Control

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, let's 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 box (depending on the version of Sublime Text).
With 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 is 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 item Package Control: Install Package from the list.

And before us is the long-awaited installation of plugins! Now it is possible to quickly search and select them, and if you select other commands for the Package Control, you can both delete and change the editor's elements. Now we need to practice on the installation. Let's set the Material Theme and configure the sublime text 3 theme.

Launch the plugin installer.
We type in the search box 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 plug-in, let's allow.

To apply the theme, you need to go to the menu "Preferences" -> "Color Scheme" -> "Material Theme" -> "schemes", and then - the theme that you like the most.

However, this is 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, huh? Setting up Sublime Text 3 is almost complete. Now is the time to establish something more substantial. Let's take a look at the most popular Sublime Text plugins.

Top 5 plugins for Sublime Text 3

1. Emmet

Emmet is a plugin that allows you to make the display of the code more convenient. This is where keyboard shortcuts are used. For example, "html+ tab " creates the wireframe of the document, and " div.wrapper + tab " will turn into full-fledged code:

This plugin is a collection of JavaScript snippet shortcuts. The length of the typed text with the help of hints is really reduced! For example, instead of typing "document.querySelector (" selector ");" you can just type "qs+ Tab ".

Why look for a place for a new file in an awkward 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 the framework of Git "and 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 of settings for a quick start at a new workplace.

Class

Zapin

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 long time and it is not practical and time-consuming to perform it every time.

Today we will consider the fastest possible setup of Sublime Text, the most popular plugins among layout designers to speed up the layout 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 configure 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, and you will receive a corresponding notification.

If you are a MacOS user, you need to press Cmd + Shift + P on your keyboard.

Package Control is required in order for you to be able to install add-ons and plugins in Sublime Text 3 from the package repository.

Installing plugins in Sublime Text

Next, you need to install the necessary plugins for work. We will consider installing the most popular plugins among layout designers, which greatly simplify development. You can also experiment with other plugins in Package Control, maybe you will like others from the huge number of available packages.

To install plugins in Sublime Text via Package Control, you need to call the menu, as we did earlier: Ctrl + Shift + P. Then we enter the command "Install Package" and select the required package from the list.

Installing Sublime Text Appearance

I really like the theme One Dark Material Theme and highlighting the code with an appropriate color scheme. These are the most balanced, contrasting enough, but not too harsh 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 highlighting the code;
One Dark Material - Theme- UI Sublime Text theme.

Installing the plugin manually

Some plugins are no longer updated in Package Control or simply do not appear there. Some of these plugins are vital when working with code and have to be installed manually.

One such plugin BufferScroll- an amazing plug-in that, when you reopen the document, sets the cursor to the place where you finished editing the last time, thereby reducing the time to find the desired position to continue working.

To manually install BufferScroll, go to the plugin's GitHub page, download and unzip it to any convenient location on your disk. Next, in Sublime Text, select the Preferences> Browse Packeges menu item. This will open the user data folder on your drive. Copy here the folder containing the Buffer Scroll files and restart Sublime Text. The plugin is now working.

Fine-tuning the editor, a preset of my settings

Moving on to the Sublime Text settings.

Here is my preset of settings, which I always use to start setting up the Sublime Text editor at a new workplace or after reinstalling the system. You can use this preset in your editor and customize it if necessary:

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_tatusbar": true, "material_theme_small_tatusbar" : 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 pressing Alt + Shift + F your code will automatically be indented with the appropriate nesting hierarchy.

By placing these snippets in the appropriate settings files, you will get a fully ready-to-use, 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 custom ones. 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 the large abundance of available settings can simply be translated into Russian and understand what it means.

In order to make a backup of 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 backup space 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, in addition, 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 show the menu by pressing the Ctrl key on your keyboard.

The right set of plugins can improve performance in any application. If you are a web developer working with Sublime Text 3 Package Ccontrol, we strongly recommend that you carefully read the plugins discussed in this article:

Package Control;
HTMLPrettify;
Emmet;
Bracket Highlighter;
jQuery;
Case Conversion.

Package Control

This plugin makes it easy to find, install and update other packages. It must be installed first. This will make it easier to work with all other plugins.

How to install

Follow this link https://packagecontrol.io/installation and copy the command that looks something like this:

Press Ctrl - Backtick (; `) to open the Sublime Text Console:

Paste the command and press Enter.

After running the command, you will see a small warning popup:

Click OK.
Close and restart Sublime Text.
Enter the Package Control command to see all the commands:

We will be using Package Control Sublime Text for the rest of the plugins.

HTMLPrettify

Takes long strings of HTML, CSS, JavaScript, and JSON and formats them so you can read them instead of trying to figure out a solid set of text.

How to install

Press Ctrl-Shift-P on Windows to open the Command Panel.
Enter the Package Control command to see all the commands. Please select Package Control: Install Package... A menu of available plugins will appear on the screen:

Enter HTMLPrettify:

Click on HTML-CSS-JS Prettify. The name is slightly different, but it's the same plugin.

Emmet

This plugin was formerly called Zen Coding. It allows you to write shorthand HTML and CSS codes. For example, by typing the following:

#page> div.logo + ul # navigation> li * 5> a (Item $)

And by pressing the tab key, you get:

After installing Emmet using Sublime Text Package Control, restart Sublime Text.

For Emmet to work, you need to set the syntax for the document. Otherwise, it won't work:

Now check it out. Enter the following:

nav # menuSystem.navMenu.isOpen> div # hotelLogo> div.navMenuIcon.logoIcon + div # arrowPointer + ul # navMenuMain> li.navMenuItem.navMenuItem $$$ * 2> div.navMenuIcon (Item $) + a (Item $) + a (Item $)

And hit tab. You'll get:

It will take a long time to learn all the available abbreviations. This will allow you to write HTML code much faster.

Brackethighlighter

The plugin highlights brackets and tags. After installation with Sublime Text Package Control install you can click anywhere in JavaScript or HTML and see the opening and closing brackets in the left column:

JQuery

The jQuery plugin highlights the correct syntax for jQuery methods and provides code snippets to complete it:

Case Conversion

Allows you to switch between snake_case, camelCase, PascalCase, etc. After installing the plugin using Package Control (enter “ pic "for quick access to Install Package), try it.

Categories

Popular