Sublime Text Plugins For Web Development. Installation And Customization.

There is a plethora of text editors and IDE for web development nowadays, however Sublime Text 3 is the most popular among web developers. What is so special about it? Firstly, it optimizes speed of workflow, secondly it allows to set up plugins and packages that let you to extend the native functionality of the editor.

The aim of this article is to consider the most necessary plugins that will help you in developing websites. To begin with you need to install Package Control.

Page Control Installation

Follow these steps:

  1. Click the link https://packagecontrol.io/installation and copy the command for installation
  2. Open console using key’s shortcut Ctr +in Sublime Text 3
  3. Paste the command into the console and press the Enter button
  4. The installation may take some time, after that you need to restart the plugin

Now we can use the plugins’ installation manager.

Plugins Installation

The process of installing packages with the Package Control is very simple. All the packages can be found in Bitbucket or GitHub. Lucky for us interface manager allows to install the packages without leaving the editor.

To start installation you need to press the key’s shortcut Ctrl + Shift + p or click Tools — Command Palette and type in install. Then you’ll see the text Package Control : Install Package.

It takes some time to launch the manager, you can watch the process of launching in the left bottom corner. When the launch is completed all the packages which are currently in the repositories will be available. The only thing you have to do is to type the name of the necessary package.

HTML-CSS-JS Prettify Plugin For Formatting The Code

Installation

To install the plugin call the command Command Palette, type in prettify, and choose HTML-CSS-JS Prettify.

Usage (any of these options)

  • Choose the option Tools → Command Palette (CTRL+SHIFT+P or CMD+SHIFT+P) and type in htmlprettify.
  • Press CTRL+SHIFT+H (or CMD+SHIFT+H in case you’ve got Mac)
  • Right click on the highlighted fragment HTML/CSS/JS Prettify → Prettify Code
  • Open HTML, CSS or JavaScript file, open the console Sublime Text by selecting View→ Show Console and type in view.run_command("htmlprettify").

Fast Coding With Emmet

Emmet speeds up coding with the help of keyboard shortcuts and snippets. In addition to Sublime Text, Emmet can work with other editors such as – Notepad++, Coda, Eclipse, TextMate, and Adobe DreamWeaver.

Emmet is setup in the same way as other plugins – through the steps mentioned at the beginning of this article.

How does the plugin Emmet run?

Let’s consider a couple of examples. For instance, if you write ul without <> and pressing the button Tab the full list will be expanded automatically <code>ul>li</code>.

The result is the following:

<ul>
<li></li>
</ul>

You can assign a class in this way too by writing <code>div.my-class</code>.

The result you get: <div class=”my-class”></div>

To create a page initially you should only add ! and press the button Tab.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>

Sublime Linter Plugin

Checking a code is a rather essential part of the development process. If you have never used linter before, you should know that it is a tool for checking the quality of the code. It checks a code for errors and the usage of bad practices. Sublime Linter Plugin can help you write cleaner and more bug-free code.

With the help of plugins based on Sublime Linter you’re able to check almost any code with ease. In case you make an error in the code, Sublime Linter will find and highlight it with a small red or yellow circle.

Installation

Call the command Palette – Package Control : Install Package, type in linter, choose SublimeLinter.

Then you need to set up linters for javascript and php.

Plugins ESLint for javascript

EsLint was created by Nicholas C. Zakas. Unlike other linters EsLint analyzes previously generated AST-tree rather than the text of the programs. It gives the plugin more opportunities for the analysis.

The second important peculiarity of ESLint is that it allows you to disable any rule or write a plugin that adds new rules.

To utilize the plugin it must be set up through a npm module globally using the command:npm install -g eslint

Then you need to create a configuration file .eslintrc and put it into С:\User\username\.eslintrc

You’re able to configure the file or use already predefined configurations. Here is the example of the configuration file:

{
"env": {
"browser": true,
"commonjs": false,
"es6": false,
"node": false
},
"parserOptions": {

},
"rules": {
"no-unused-vars": 1,
"camelcase": 1,
"no-loop-func": 1,
"no-redeclare": 1,
"no-undef": 1
},
"globals": { "jQuery" : 1, "$" : 1 }
}

The next step implies installing ESLint in Sublime Text. The installation is run similarly to other plugins through Command Palette. Type in eslint in the search box, after that you’ll see SublimeLinter-contrib-eslint in the list that has appeared. To choose it use a keyboard or a mouse.

Then go to “Preferences / Package Settings / ESLint / Settings – User” in the menu and paste the following fragment

{ "node_path": "/usr/local/bin", "node_modules_path": "/usr/local/lib/node_modules" }

Plugin PHP CodeSniffer

PHP CodeSniffer is a set of two scripts, the main one, phpcs, verifies PHP (as well as JavaScript and CSS) files for the existence of breaches of concrete code standards. PHP CodeSniffer is a very essential toolkit for developing as it prevents developers from making some common semantic errors in code. The second script phpcbf automatically correct coding standard violations.

To get Code Sniffer installed you should have PHP and Composer set up. You can read about the Composer’s installation on the official website.

Before the installation starts you must be sure that Composer has been added to the system variable PATH; the value of the variable has to be ~/.composer/vendor/bin/ by default. Also you can learn the value of the variable which you must set, using the command composer global config bin-dir --absolute.

To install the plugin through Composer use a command:

composer global require "squizlabs/php_codesniffer=*"

Then you need to set a coding standard. In our case it would be WordPress Coding Standards. To install the plugin you should use a command Composer again:

composer create-project wp-coding-standards/wpcs --no-dev

The next step implies installing packages sublime-phpcs и phpcs-linter in a usual way through Package Control : Install Package. Sublime Linter is a must for the work of this package.

When the installation is completed we choose Preferences from the command palette: SublimeLinter Settings - User and change user.linters.phpcs.standard on the php standard you have chosen: WordPress, WordPress-VIP and so on.

For the proper work of PHP Code Beautifier and Fixer it’s necessary to write the way to the file phpcbf.bat that is inside your_path_to_wpcs\vendor\bin\. in the variable path and add the following fragment in the Preferences - Package Settings - PHP Code Sniffer - Settings - User:

{
"phpcbf_executable_path": "phpcbf.bat",
"phpcbf_additional_args": {
"--standard": "WordPress-Extra",
"--no-patch": ""
}
}

To launch the plugin you need to write fixer in the Command Palette and choose PHP Сoding Standards Fixer: Fix this file (PHP Code Beautifier) from the list.

The second way to do this is to use key’s shortcuts. Enter Preferences - Package Settings - PHP Code Sniffer - Key Bindings - User and add

{"keys": ["ctrl+b"], "command": "phpcs_fix_this_file", "args": {"tool": "CodeBeautifier"}}

Leave a Comment