20 brilliant add-ons for your text-editor. Guaranteed some are new!
Packages for Atom, Brackets, and Sublime Text.
Quick disclaimer. I am not promoting one text-editor over the other. They are all brilliant. A big thank you to all the people that made these amazing editors.
I personally use Atom. I will mention the packages for Atom first. The equivalent packages for brackets [B] and Sublime text [S] will be listed at the end of each section.
1 Live view.
Atom-HTML-preview | Atom-live-server | Browser-plus | Open-in-browser.
These are all versions of a similar thing. They basically incorporate the ability to have a live view of your progress as you code. Choose which you prefer. I have found HTML-preview to be glitchy on some occasions.
[B] Already integrated. [S] Browser-refresh | View-in-browser.
2 Emmet.
I won’t go into the details of this particular package because it is loaded with a lot of features. It is simply a must. Get it.
Same link for all 3 editors. Emmet.
3 Beautify | Atom-css-clean | Aligner | Atom-css-comb.
These packages will add all the correct spacing and indentations to your code. They will align everything cleanly and correctly. Beautify can be used for nearly all of the different programming languages.
[B] Beautify | CSS-comb. [S] Prettify | CSS-comb.
4 Color-picker.
Using the shortcut ‘cmd-shift-c’ will bring up a color palette where you can choose a whole host of colors. Includes RGB, HEX, HSL, HSV, and transparency.
[B] Color-picker. | Swatcher. [S] Color-picker.
5 Color-pigment.
This basically highlights the color value in CSS. For example, #fff will be highlighted white. This gives a nice visual overview of the entire file.
[B] Color-marker. [S] Color-highlighter.
6 Autoprefixer.
Will scan your CSS file and add additional prefixes to your code for older browser support.
[B] Autoprefixer. [S] Autoprefixer.
7 File-icons.
Adds color and the file language symbol to all your files throughout your text-editor. Gets rid of the boring default file symbols and gives better visual referencing.
[B] File-icons. [S] File-icon.
8 Duplicate-line-or-section.
This basically adds the ability to duplicate a line or highlighted section for Atom using cmd-shift-D. Sublime and Brackets have this already integrated. Saves having to copy and paste all the time. Really is a simple, but brilliant package.
[B] Integrated. [S] Integrated.
10 Highlight-line.
Simply adds a solid line of color to the top and bottom of the section you are highlighting. Just offers better visualisation when highlighting sections of code.
[B]Couldn’t find one. [S] Check first comment at the end for solution.
11 Highlight-selected.
If a word appears multiple times it will highlight all of them by clicking on a single one.
[B] Quick-search. [S] Word-highlight.
12 Linter.
Linter is a program that scans your code and reveals errors. Missed ; or space or {. Whatever the error, it will reveal it. Linter is present for multiple languages. Usually, you have to install the main linter package and then add the individual linter-specific-language add-ons.
linter-csslint | linter-scss-lint | linter-sass-lint | linter-htmlhint | linter-jshint
[B] Brackets-interactiveLinter. [S] Linter.
13 Git-plus | Git-plus-toolbar.
Gives you the ability to add, commit and push to your GitHub account without using Terminal. Offers various other features.
[B] Brackets-git. [S] Git.
14 Todo.
Almost like a todo list app inside the editor. It will search across multiple files for the todo you are searching for. Has a separate pane to manage and select all your todos. It is a complete package.
[B] Brackets-todo. [S] Todo-review.
15 Ask-stack.
Type your question and it will open a stack browser inside the editor. Has multiple options and gives quick access to answers your need without leaving your text-editor.
[B] [S] Could not find alternative.
16 PlatformIO-IDE-Terminal.
Opens terminal inside of the text-editor so you don’t have to leave it. Has lots of editing features, colors and texts etc.
[B] Brackets-terminal. [S] Terminal-view.
17 Atom-minify.
Gives you the option to minify your CSS and JS files inside your editor.
18 Advanced-open-file.
A better more comprehensive ability to control, find and make new files within the editor itself.
[B] [S] I believe both are already incorporated.
19 Jumpy.
Jumpy is an interesting package. Using the shift-enter shortcut brings up lots of mini keybindings, that once typed in will instantly move the cursor to that area. Sounds weird. Visit the link for full understanding. Gives possibility to move around the text-editor without using a mouse.
[B] [S] Not found an equivalent.
20 Quick Editor.
This package allows you to editor your CSS within an HTML file. Very similar to what is native in Brackets.
[B] Incorporated. [S] Not found.
That is all for this week. I hope some of these packages bring fruition to your coding. Until next Sunday… peace out.
