home > Internet > Sublime text autocompletion. Plugins

Sublime text autocompletion. Plugins

// echo get_the_post_thumbnail(get_the_ID(), "relatedthumbnail"); // display 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 has moved to beta (beta is still not stable, but is already intended for testing, after the beta there is usually an official release). And I decided to completely understand Sublime Text 3 (hereinafter referred to as ST3).

If you are going to install SublimeText3 then this is the one complete instructions for you. Here I will describe everything related to this editor, and it really can do a lot.

First, I removed ST2 and all traces of it from the system. I also removed node.js and npm which was paired with it. Since I intend to re-set up the compilation of less, and then saas files, correctly and competently, 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. Exist different ways compiling less to css: Grunt , Guard , and Less.app . However, you may not want or need to use additional tools, and I want to do everything right in the code editor. Below I have provided instructions that are 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. Opening Windows console and enter npm install less -gd
Install the Less2Css and SublimeOnSaveBuild plugin

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 assemble 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. Let's install. We go to the console and write:

Npm install -g less-plugin-clean-css

SASS is another preprocessor for CSS. It is gaining popularity and is already ahead of less in terms of widespread use.

Installing Ruby
Launch the console and install Ruby Gem gem install sass
Installing the Sass plugin for Sublime Text
Installing 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 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 saving the .sass file, .css will be compiled.

Jade is a preprocessor for writing html code oh, and like less or sass for css, it makes writing faster and easier (for experienced coders) html markup. How to install and configure its operation.

Node.js must be 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 add 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, the 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 Jade highlighting. Now the backlight will work.

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 ;
HTMLPretify ;
Emmet ;
Bracket Highlighter ;
jQuery ;
Case Conversion.

Package Control

This plugin makes it easy to find, install and update other packages. It needs to 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, which will look 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 pop-up warning:

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

We will use Package Control Sublime Text for the remaining plugins.

HTMLPrettify

Takes long HTML strings, CSS , JavaScript , and JSON and formats them so you can read them instead of trying to make sense of a bunch of typing.

How to install

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

Enter HTMLPrettify:

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

Emmet

This plugin used to be called Zen Coding. It allows you to write HTML and CSS shortcodes. For example, by typing the following:

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

And pressing tab key, You'll 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. 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 $)

And press tab. You'll get:

It will take a lot of 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 using Sublime Text Package Control install You can click anywhere in the JavaScript or HTML code and see the opening and closing parentheses in the left column:

JQuery

The jQuery plugin highlights the correct jQuery method syntax 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 (type " pic" for quick access to Install Package), try it.

Sublime Text is modern text editor closed source. Most often it is used by web developers to edit html or php code. The editor has a beautiful, modern look and several interesting features, such as fast navigation, simultaneous editing and command entry.

Although the program comes with a lot of features out of the box that will greatly help your work, there is always room for improvement. Among other things, it supports plugins written in Python. In this article you will find best plugins Sublime Text 3. They are also suitable for the free alternative to this program, Lime Text. With these plugins you can greatly expand the capabilities of the program. Now let's move on to the list.

This is probably the first plugin you need to install after installing and running the program. This package manager for Sublime Text, with it you can install, remove and update plugin packages. You can also very easily view everything installed plugins Sublime Text 3.

2. Emmet

The Emmet plugin is not only for Sublime. This is a pretty popular thing. It allows you to write css and html code much faster using abbreviations and shortcuts, which are then expanded into full-fledged html tags. For example:

((h4>a)+p>img)*12

This will create 12 header elements, each followed by an image. Then you can simply fill out the resulting template, without having to type tags one by one.

This is a plugin for checking errors in your code. It has been recently redesigned and now includes several new features. It doesn't support all programming languages, it just creates an API, then you can install plugins for the languages you use most often.

4. SublimeEnhancements

This Sublime Text 3 plugin improves the editor's sidebar. Adds the ability to create new files in the current project folder, move and copy files and folders, search, update and much more.

Using the PackageResourceViewer plugin, you can view and edit packages that you install in Sublime Text 3. It is possible to extract the package to a separate folder, fix what is needed there and return it to the program.

6. Git

This plugin integrates the Sublime Text 3 editor with Git. You can interact with Git directly from the editor, such as adding files, sending commits, viewing logs and file annotations.

This plugin adds the ability to open a terminal in your project folder directly from Sublime Text using a hotkey. This is very useful if you need to run any commands in this folder.

CSSComb is a plugin for sorting CSS properties. If you want your code to look neat and be located in in the right order, this plugin will help you customize the order of properties. This is also useful when you work in a team of developers, each of whom has their own coding preferences.

With this plugin you can check whether your browser supports the CSS or HTML properties of the elements you are using. To do this, simply select CSS property or HTML element, you will then be redirected to the appropriate caniuse.com page.

The Alignment plugin allows you to align code, including PHP, JavaScript and CSS. This makes it neater and easier to read. You can see an example in this screenshot:

With this plugin, you can remove unnecessary spaces as well as extra trailing spaces that can cause JavaScript errors.

With this plugin you can select and add any color of yours to Sublime Text 3 operating system just by clicking on it with the mouse. You can also choose a color from the color wheel.

13.MarkDown Editing

Although Sublime Text 3 allows you to view and edit MarkDown files, it opens them as plain text files with very poor formatting. This plugin will help improve formatting and add text color to files written using Markdown.

14. FileDiffs

The FileDiffs plugin allows you to analyze the differences between two files in Sublime Text 3. You can compare files not only with each other, but also with the system clipboard, as well as unsaved and saved versions of the same file.

DocBlockr allows you to create documentation or annotations for code by analyzing functions, parameters, variables, and automatic adding already available documentation.

16. Third Party Themes

Looking the same every day gets boring over time. New topic may even give you new ideas for work. You can try some interesting themes, for example:

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

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

For Sublime Text, from the very first versions, the capabilities were much higher than those of other editors. Is it a joke - a completely customizable interface, the ability to customize the behavior of the program, and not just enter text? What can we say about plugins - code written in Python allows the user to control the editor the way a snake tamer, playing a magic pipe, makes a giant boa constrictor tremble before him. However, no matter how sorry we are, this is exactly what scares away newbies - not being able to configure the editor, they stop using it.

Setting up Sublime Text 3

First, let's talk about the appearance, and then we'll move on to setting up hotkeys and plugins.

1. Appearance of Sublime Text

So, it's time to launch 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 seemingly way is to select a theme through the settings. To do this, go to the menu "Preferences" -> "Color Scheme" and select the topic you need. But this method will only change the color of the editor, and nothing more.

Another, more complex, but correct 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 more than 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 them to the Packages/Color Scheme - Default/ folder.
"font_face"- text font. It is important that it 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 fraction or integer value.
"font_options"- additional font options like "no_bold", "no_italic".
"word_separators"- word separators.
"line_numbers"- setting up line numbering.
"gutter"- whether to display "groove"(it contains line numbers and bookmarks).
"margin"- length of indentation from "grooves".
"fold_buttons"- if you hover over "groove", then triangular arrows will be visible, allowing you to hide or show the code fragment between the curly braces. They can be disabled or enabled here.
"fade_fold_buttons"- if set to false, then the triangular buttons will not be hidden.

Here is an example of how the settings work (don't forget to save the file):

You can experiment here yourself. And we move on.

2. Set up keyboard shortcuts

Yes, yes, you heard right! Anyone can customize combinations in their own way by assigning them different meanings. To open the file, go to "Preferences" -> "Key Bindings".

Here again we have 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 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), however this file is just an example.

Well, that’s all, Sublime Text has become the way you need it and you know how to configure Sublime Text 3. And now it’s time to move on - to installing plugins.

3. Install Package Control

As mentioned earlier, the editor has the ability to add plugins, either their own or downloaded from the developer’s website. However, despite 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 visualized interface rather than through code.

First, let's install Package Control from the official website. 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 + ~" call the console built into the editor (yes, yes, there is such a thing!).
Paste the copied code into the text field and wait for successful installation.
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 Package Control: Install Package element from the list.

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

Launch the plugin installer.
Type Material Theme in the search field.
Click and wait, the inscription should appear below "Installing package Material Theme". During the installation process, you will be asked to add another plugin, allow it.

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

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 a theme to it:

Not bad, right? Setting up Sublime Text 3 is almost complete. Now it's time to install something more significant. 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 makes displaying code more convenient. Keyboard shortcuts are used here. Eg, "html+tab" creates the skeleton of the document, and " div.wrapper +tab" will turn into full code:

This plugin is a collection of snipset shortcuts for JavaScript. The length of the typed text actually decreases with the help of hints! For example, instead of typing "document.querySelector("selector');" you can just dial "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 Git without leaving the editor!

Go to the official Sublime Text website in the Download section and download latest version program, for my operating system I downloaded a 64-bit program. We launch it and check that everything works. By the way, the program is not free and if you do not purchase a key, then there are no restrictions except the inscription “unregistered” in the title and a non-intrusive pop-up window with a warning after a certain period of time (once every half an hour - an hour).

Let's install the Russifier

Unpack the downloaded archive and copy all files with the .sublime-menu extension (except for the "backup" folder) to one of the following folders (depending on your operating system):

If there is no "Default" folder at the specified path, then you need to create it.

Let's set up automatic line break

Open Preferences → Settings - Custom

Add the following line:

"word_wrap": true

Fighting encoding in files

Let's repeat Preferences → Settings - Custom. Needs to be replaced

"fallback_encoding": "Western (Windows 1251)",

to this line:

"fallback_encoding": "Cyrillic (Windows 1251)",

Installing Package Control

Package Control is necessary to expand the functionality of the Sublime Text 3 editor with various plugins.

Go to the website and look at the installation instructions. Or go to the editor, press the keys: Ctrl + ~, in the command line that appears, enter the following installation command:

import urllib.request,os,hashlib; h = "2915d1851351e5ee549c20394736b442" + "8bc59f460fa1548d1514676163dafc88"; pf = "Package Control.sublime-package"; ipp = sublime.installed_packages_path(); urllib.request.install_opener(urllib.request.build_opener(urllib.request.ProxyHandler())); by = urllib.request.urlopen("http://packagecontrol.io/" + pf.replace(" ", "%20")).read(); dh = hashlib.sha256(by).hexdigest(); print("Error validating download (got %s instead of %s), please try manual install" % (dh, h)) if dh != h else open(os.path.join(ipp, pf), "wb" ).write(by)