This is part two of the series A Whirlwind Tour of Web Developer Tools. This time I’ll be talking about text editors and related tools.
Text editors are used by web developers to write code. Text editors are not the same thing as word processors because anything written on a text editor is saved as a plain text file and it normally uses a simple character set such as ASCII to represent different characters (letters, numbers, etc). On the other hand word processors saves formatted text which enables tables, symbols and other form of graphical information to be represented without having to use any form of markup like HTML.
When you say text editor the first thing that comes to mind these days is Sublime Text. It’s like the sexiest text editor these days. So this whole blog post is primarily going to be about Sublime Text and some of the plugins that I found useful.
In order to install plugins for Sublime Text you first have to install package control which is a package manager for Sublime Text that allows you to easily install plugins. To install package manager copy the following code in the Sublime Text console which can be accessed by pressing
ctrl + back tick on your keyboard. After that restart the editor to finish the installation:
Note that the code above is for Sublime Text 2, if you’re using Sublime Text 3 then use the following code:
After restarting sublime text you can now press
ctrl + shift + p, select ‘install package’ and press
enter, this will load all the available plugins from the plugin repository. From there you can just search for the plugin that you want to install.
And now for the plugins:
- PHPCS – a PHP code quality tool.
- Emmet – previously known as Zen Coding. If that doesn’t ring a bell then Emmet is basically a tool for improving productivity by implementing shortcuts for generating code that you would normally write out by hand. All you have to do is to write something like this:
And right after pressing
tab you get a whole bunch of code written out for you:
1 2 3 4 5 6 7 8 9 10
- Sidebar Enhancements – allows you to create a new file and it will immediately ask you the filename, duplicating or copying files and folders from the sidebar, and a bunch of other good stuff that the default sublime text sidebar doesn’t allow you to do.
- Bracket Highlighter – allows for easier visualization of where the ending bracket is.
- Clipboard History – keeps a history of clipboard items so you can just paste them in later.
- Docblockr – pretty much like emmet but only for document blocks. Useful for writing comments.
- Alignment – allows for easy alignment of code. All you have to do is press
ctrl + alt + aon your keyboard.
zisn’t actually used in your code.
- EditorConfig – tool for implementing coding conventions. You can use this to specify whether to use tabs or spaces for specific file types (
.css) or whether to use double quotes or single quotes for the quote type. You can do all that by installing the editorconfig plugin for the text editor that you’re using. Then create a
.editorconfigfile in the root of your project directory or any directory in your project if you want to use different rules for different directories. Here’s a sample
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
As you can see from the sample above you can specify a whole bunch of settings. You can also have different rules for different file types.
There’s also this thing called the IDE or Integrated Development Environment which is basically text editors on steroids. They have huge install size since they allow you to do more than just writing code. IDE’s packs a bunch of features which you would not normally find in a text editor such as compiling code. Some IDE’s such as Visual Studio also allows you to build the GUI of applications by simply dragging and dropping GUI elements (text boxes, buttons, etc.) from a toolbox. Other features include code completion (intellisense), debugger, integrated services (allows viewing and manipulating the database right from the IDE).
Text editors and IDEs are the main weapons of every web developer. Without it they won’t be able to produce any code. So its important to learn the ins and outs of the text-editor or IDE that you are using to maximize your productivity when using it. Be sure to check out the resources below for more Sublime Text awesomeness.