There are many available text editors and IDEs out there. Some are commercial and require a payment for their license such as Sublime Text or JetBrains products such as PhpStorm and WebStorm. Instead, I want to show you how to set up a productive environment for your coding habits in Brackets. Brackets is a free, open-source text editor designed for the Web. To do this, we will install various different useful extensions developed by programmers worldwide.

You can install Brackets from <a href="http://brackets avis viagra internet.io/” target=”_blank” rel=”nofollow”>http://brackets.io/ (All you have to do is click on the big blue button). I recommend you to download Brackets along with the Extract (Preview) by Adobe which is included in that button.

Theme

After you have installed it, let us start with changing your theme. I highly recommend the theme available at: https://github.com/David5i6/Brackets-Delkos-Dark-Theme.

To install the theme, you would have to click on the Extensions Manager located in the upper-right corner. Then you click on the blue anchor-styled text Install from URL and type : https://github.com/David5i6/Brackets-Delkos-Dark-Theme as the URL.

Extensions

QuickDocs

If you are reading this, you certainly want to get involved with Web meaning languages like PHP and JavaScript. Therefore, the first things you should install is QuickDocsJS and QuickDocsPHP. You can find them by opening the Extension Manager and start typing their names in the Search box.

QuickDocsJS and QuickDocs PHP would allow you to to right-click on a built-in property or function in the two languages and selecting Quick Docs which would allow you to see the documentation of that property or method. Things such as parameters always come in handy. Even better would be to use the hotkeys – Ctrl+K or Cmd+K

When you press Ctrl+K and your cursor has just autocompleted or typed a built-in you would get a lot of useful information concerning how to use it, what parameters it accepts and what it returns as shown in the image below.

Emmet

Then, you should install Emmet, you can also find it by searching in the Extensions Manager. Emmet increases tremendously the HTML and to some extent the CSS workflow so you should have it in any editor you use. If you do not know how to use Emmet, you can get a refresher from another article of mine located at: https://www.phpgang.com/using-emmet-to-enhance-your-html-workflow_850.html
Autoprefixer

If you are writing CSS, then Autoprefixer would come in handy. Whenever you add CSS rules and save the CSS file, browser prefixes to newer CSS3 properties would be added to the file for greater accessibility. You can also find it through the Search box.

Beautify

When writing code, the code itself often turns with a wrong indentation, long lines and multiple expressions on the same line in the file. With Beautify, you would be able to select the contents of the entire file or whatever you desire and press Ctrl+Shift+L or Cmd+Shift+L to get the proper formatting your code needs.

Brackets Icons

Searching for this in the Extensions Manager Search box would give nice icons to the files in your file tree.

PHP SmartHints or PHP Syntax Hint

Adding one of these from the Search box would give you autocomplete functionality when writing PHP. If you also work with WordPress, there is an extension called Brackets WordPress Hint.

If you start typing a function and it finds a match, all you have to do is press Enter and it will be autocompleted.

JS CSS Minifier

This extension can be configured to minify JavaScript and CSS files whenever you save your files. It can place them in a per-project configured directory so your production application can work only with the minified files. After installation, you can go to Edit -> Minifier Preferences and set everything up for the project.

Conclusion

There are tons more extensions that can make your life easier which we have not mentioned here. I would also urge you to check out the following extensions: CanIUse, Adobe Edge Web Fonts, Brackets Snippets (by edc), Paste and Indent and JSHint. As with most others, they can be found in the Search box of the Extensions Manager.

Tutorial Categories: