Sublime Text is one of the best free code editors and comes with a lot of great features. Is fast, stable and compatible with Windows, Linux, and Mac OS.

The first thing we have to do is installing Sublime Text. Then we have to install Package Control to access to more features.

1 # Package Control

With Package Control we can install, remove, and view the list of packages and plugins that we have installed in Sublime Text. These plugins are made my other developers and we can search and install them without leaving Sublime.

We can install Package Control opening the menu  Tools -> Command Palette; or pressing ctrl + shift + p and searching the install Package Control option. This will allow us to use “Package Control: Install Package”.

We can start now installing some amazing plugins!

2 # Advanced New File

With this plugin, we can create a new file really fast. We just have to type ctrl + alt+ n and the name of the file with its extension. Also, we can write the root before the file name.

advanced-new-file

3 # Emmet

Emmet is a toolkit that improves the HTML workflow. We can type html-5 + tab at the very beginning of the file to get the basic HTML structure. In this link, we have a cheat sheet with all Emmet commands.

4 # HTML-CSS-JS Prettify

Prettify corrects the space between sentences of code we are typing. This plugin works with either HTML, CSS, JavaScript and JSON files. To use Prettify we have to type ctrl + shift + p and search HTMLprettify. 

5 # Color Highlighter

Color Highlighter underlays selected hexadecimal color codes (like “#FF16FF”, “rgb(35,255,180)”, “black”, etc.) with their real color.

color-highlighter.PNG

6 # Bracket Highlighter

Bracket Highlighter matches a variety of brackets such as: [], (), {}, “”, ”, #!xml, <tag></tag>.

bracket-highlighter

7 # Random Everything

This plugin can only be accessed through the ctrl+shift+p command. With Random Everything, you can add paragraphs, titles, country names and a lot of random things in order to test your website. In this link, there is an explanation of all you can do with the plugin.

If you prefer the Lorem Ipsum way, you can take a look at my last post about my list of the best 11 Lorem Ipsum:

8 # Auto File Name

A tool that autocompletes text. It’s good because it shows us the folders and files with its extension and we don’t need to remember how we named the file.

auto-file-name

9 # Bootstrap 3 snippets

With this plugin, we can add snippets of Bootstrap to ourHTML just typing ctrl + shift + p and writing on the input bs3.

This link contains all the information you’ll need about the snippets you can add.

10 # LiveReload

Live Reload refreshes the browser when you save a file in Sublime Text. So you can see the latest changes you’ve made.

 

There are hundreds of plugins for Sublime Text. If you miss someone on this list, write me a comment and I will try it!

Advertisements

2 thoughts on “Essential Plugins: Sublime Text 3 for Web Development

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s