Plugins. Sublime text 3 plugins javascript settings

// 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 most complete instruction 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. 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 provided instructions that are suitable for Windows users (I myself did the installation using it, and also for Mac OS.)

  1. Installing Node.js
  2. Install NPM (installed with Node.js)
  3. Install Less Globally. Open the Windows console and enter npm install less -gd
  4. 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, and like less or sass for css, it makes writing html markup faster and easier (for experienced coders). 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

  1. Follow this link https://packagecontrol.io/installation and copy the command, which will look something like this:
  1. Press Ctrl - backtick (; `) to open the Sublime Text Console:
  1. Paste the command and press Enter.
  1. After running the command, you will see a small pop-up warning:
  1. Click "OK".
  2. Close and restart Sublime Text.
  3. Enter the Package Control command to see all commands:

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

HTMLPrettify

Takes long strings of HTML, 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

  1. Press Ctrl-Shift-P in Windows to open the "Command Panel".
  2. Enter the Package Control command to see all commands. Select Package Control: Install Package. A menu of available plugins will appear on the screen:
  1. Enter HTMLPrettify:
  1. 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 by pressing the tab key you will 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.

Go to the official Sublime Text website in the Download section and download latest version programs for your operating system I downloaded the 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)

Setting color schemes

Press Ctrl+Shift+P again and type daylerees - themes.

Additionally

To access FTP you must install "SFTP"

Another interesting feature is "Goto-CSS-Declaration". When you click on a class, it shows this class in the style file.

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. (Follow the links to find more if needed)

We will consider it for Layout on Pug / Less, where we do not need huge debugging functionality. Therefore, this particular editor (in my opinion) defeats its competitors both in speed and functionality.

1. Installing the program and controlling add-ons (Package Control)

  1. Install Sublime Text 3. Everything is simple here - download and launch.
Now we press ctrl/⌘+shift+p or in the menu (Tool > Command Palette).

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

2. Program settings:

  1. We use spaces instead of tabs.
    "translate_tabs_to_spaces": true
  2. The tab size is 4 spaces.
    "tab_size": 4

    Why, you ask?
    So as not to accidentally press space and tab together and break the pug assembly.
    And also for uniformity of work in the team.

  3. Strings should not end with empty characters.
    For this we use a plugin TrailingSpaces .

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

  1. Full screen mode F11 + hide menu panel (alt). Allows you to make maximum use of the monitor for work and not be distracted by the status of the OS panel.
  2. Prohibition of line breaks. Probably the best property of those listed. Prevents confusion in pug syntax. Always shows expected code and nesting regardless of screen size. Horizontal scrolling is carried out by shift + wheel (or touchPanel)
    "word_wrap": "false"
  3. Themes. I can't say anything about this. Just find what you like (preferably use a dark scheme). I'm using "theme": "Material-Theme-Darker.sublime-theme".
  4. Syntax highlighting. Well, I think there shouldn't be a problem here. If you make sure that the expansion and highlighting match (Pug for Pug, not Jade for Pug)
  5. View → Side Bar → Hide Open Files- Frees up space for the project tree. Because this field is already duplicated with tabs and three dots at the top

3. Useful hotkeys:

  1. In the first paragraph we will say that we will skip all the standard combinations, such as ctrl(⌘) + Z(⌘ - hereafter simply ctrl). Cancel, save, redo, close tab, restore tab, etc...
  2. Perhaps the next most popular combination is:
    crtl + P- Allows you to search through the files of your open project. Allows you to get rid of the huge tree of open styles.
  3. Next in importance:
    ctrl+D- Search for copies of selected text. Ideal for multi-editing. And to search for duplicates. Especially in larger files and large fragments. For multi-cursor, hold ctrl and use the mouse.
  4. ctrl + L- Selects the entire line and allows you to delete it completely. Works well together with ctrl+D.
  5. Search… Well, probably the first thing is ctrl+F - file search. The second and more important thing is to search a folder for multiple files ctrl + shift + F (You can call it by right-clicking on the folder and selecting “Find in folder...”) I advise you not to include the “Famous Fat Man” folder in the search
  6. ctrl + shift + up/down- Moves a line up/down (swaps them). Convenient for working with styles and variables.
  7. Now a small tutorial on keyboard shortcut combinations. You've 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 don’t have to release the general mod key)
    Here are some useful ones:
  8. ctrl + K, ctrl + 4- Hides all branches whose nesting is greater than 4. Similar to the collapse arrow. ( ctrl + K, ctrl + J- unfolds everything that is)
  9. ctrl + K, ctrl + B- Hides/shows SideBar. (works well with F12)

Which allows you to check your code for syntax errors. The following provides simple instructions for turning the editor into a full-fledged IDE for web development.

ATTENTION! The article describes setting up Sublime Text 3 (hereinafter ST3) on Windows 7.

1. Let's imagine that you have already installed ST3 on your Win 7 and installed Package Control.

2. Now you need to install additional packages in ST3. Let's go to Preferences -> Package Control -> Install Packages
And install the following packages:

  • SublimeLinter
  • SublimeLinter-html-tidy
  • SublimeLinter-csslint
  • SublimeLinter-jsl
  • SublimeLinter-jshint
  • SublimeLinter-php
  • SublimeLinter-phplint
  • JSHint

3. Set up HTML syntax error checking
3.1. Download and put it in any folder you like.
3.2. Add the path to this folder! from tidy.exe to the windows user's heart variable (PATH), the settings of which are located in My Computer -> Properties -> Advanced system settings -> Environment Variables... -> Select the “PATH” variable -> Click “Edit” and add the path.
ATTENTION! Note the semicolon ";" after each path and do not forget to write it, and also pay attention to the backslash.

4. Set up CSS syntax error checking
4.1. Download and install node.js
4.2. Add the path to the folder (to the folder!) with node.js in PATH (the path is approximately the following: C:\Users\User_name\AppData\Roaming\npm)! Don't forget about the semicolon.
4.3. Install csslint. To do this, run the Windows command line as administrator and write: npm install -g csslint

5. Setting up JavaScript syntax error checking
5.1. If you did not do points 4.1. and 4.2. - we do that.
5.2. We install jslint and jshint, to do this we perform the same operation as in paragraph 4.3. We just write jslint and jshint instead of csslint, respectively.

6. Setting up PHP syntax error checking
6.1. Not for php in the Denwera build!
6.2. (UPDATE) The fact is that many (including me) as local server set themselves Denwer. And God knows why (I didn’t go into details), but Denver’s PHP is not accepted by ST3, for the life of me. It can output PHP errors to the ST3 console, but there will still be no syntax highlighting.
P.S. I specifically added this point because... on many forums they write that install PHP, configure ST3 packages and you will be happy. But happiness does not happen, because... The item with installing PHP is usually immediately omitted because of the hope for the performance (suitability) of denwer.
6.3. Therefore, we immediately go here and download PHP. Installing PHP - just unzip the archive into any folder and write the path to this folder in PATH (section 3.2.)
6.4. If you had a path to the Denver PHP folder registered in your PATH, be sure to delete it.
7. Configuration file SublimeLinter.sublime.settings

IT IS NECESSARY TO CORRECT THE PATH TO tidy.exe and php.exe

( "user": ( "debug": true, "delay": 0.25, "error_color": "D02000", "gutter_theme": "Packages/SublimeLinter/gutter-themes/Circle/Circle.gutter-theme", "gutter_theme_excludes ": , "lint_mode": "background", "linters": ( "csslint": ( "@disable": false, "args": , "errors": "", "excludes": , "ignore": " ", "warnings": "" ), "hlint": ( "@disable": false, "args": , "excludes": ), "htmltidy": ( "@disable": false, "args": , "excludes": ), "jscs": ( "@disable": false, "args": , "excludes": ), "jshint": ( "@disable": false, "args": , "excludes": ), "jsl": ( "@disable": false, "args": , "excludes": ), "php": ( "@disable": false, "args": , "excludes": ), "phplint ": ( "@disable": false, "args": , "excludes": ) ), "mark_style": "outline", "no_column_highlights_line": false, "passive_warnings": false, "paths": ( "linux" : , "osx": , "windows": ), "python_paths": ( "linux": , "osx": , "windows": ), "rc_search_limit": 3, "shell_timeout": 10, "show_errors_on_save": false, "show_marks_in_minimap": true, "sublimelinter": true, "sublimelinter_executable_map": ( "css": "node", "html": "Z:\\usr\\bin\\tidy.exe", //path to your folder with tidy.exe, pay attention to the double backslashes, they are required "php": "C:\\Program Files\\PHP_5.6\\php.exe" //path to your folder with php.exe) , "syntax_map": ( "css": "css", "html (django)": "html", "html (rails)": "html", "html 5": "html", "js": " js", "php": "php", "python django": "python"), "warning_color": "DDB700", "wrap_find": true ) )

8. Restart Sublime Text
It happens that some people forget about the debug mode of Sublimelinter. To enable it, right-click anywhere in the editing area ST3 -> SublimeLinter -> Debug Mode

mob_info