Creating a productive programming environment in Brackets
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.
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.
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.
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
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.
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.
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
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.
Leave a Reply