Learning the ins and outs of my favourite code editors
Everyone has their favorite Code editor to use. I've tried multiple editors to see which one I like the most. I love the simplicity of Notepad++ and have been using it for years, however once I started using Linux, it wasn't there! I was pretty bummed out a bit that, but I wanted to start doing some coding in Linux and wasn't going to give up that easily, and so my quest for a new code editor started.
I've tried multiple different code editor: vim is interesting however the learning curve is a little too steep for me, emacs keyboard-only navigation is interesting however it also turned me off from the editor, Gedit was a little too simple for me, and finally sublime was very nice but the occasional "trial end" message pops up and annoys me.
I then stumbled upon Atom. I liked the visual components and simplicity of the Code Editor, along with the ability to customize anything and everything. Atom became my predominate code editor for Linux. I knew some of the new features of Atom, but I never dove deeper and explored what's under the hood, how to make it work for me. Until now that is.
To open up Atom, I could either open it from the menu or with the terminal command Atom ., or I could even open up a file or a folder by specifying them, for example Atom myFolder. This is a quick way to open up my project and start working on it without having to go and look for it. The Atom palette is a window that contains all the commands available in Atom. The commands Ctrl + Shift + P open up the palette menu, which display all of the commands/shortcuts available. Some of the keyboard shortcuts are similar to other Code Editors, to find something in the file, I would press Ctrl + F , or Ctrl + F Ctrl + Shift + F to find the string in the entire project. There are two ways to split the screen, opening the palette and searching pane, or right clicking anywhere on the code and selecting how to split.
Auto-complete
Auto-complete is a very handy package, something that my old Notepad++ did not have. Most modern EDI's already have some form of auto-complete implemented, and you don't really notice it until you it's not there. Window pops up with code suggestions and gives the ability for the coder to auto-complete the tag/word.
TODO
Todo is very simple yet helpful package. While coding, if I want to leave a note for myself or another programmer, I can simply leave a detailed TODO: comment that can easily be viewed later on. On top of TODO, there is a whole collection of tags that can be used instead, including: FIXME, CHANGED, IDEA< NOTE, REVIEW, BUG, and QUESTION. A list of all the tags can then be easily viewed with the shortcut Ctrl + K, or Ctrl + T. I like to leave myself notes for late while programming, and with this package, I'll never forget where that note is located.
Atom-beautify
Atom-beautify is meant to make code look nice and readable. I often spend some time arranging my code to make it look the way I like it, Atom-beautify does all on its own. Atom-beautify will separate a long line of code or insert proper tab lengths where needed, making the entire code much easier to read. To use this packag, highlight the code to beautify, and either Ctrl + Alt + B or open up the palette and enter Atom-beautify.
Highlight-selected
Another simple package. Highlight-selected will select all occurrences of the selected word. Double click on any variable/word to find all instances.
Script
This package will run scripts inside of Atom. Highlight the code to run, and use the keyboard shortcut Ctrl + Shift + B. Very handy package to quickly run and test small parts of your code.
I tried using Atom on my windows machine, however the entire editor just seemed.. slow. Atom is extremely fast on my Linux machine but the performance drops once on Windows. So I decided to keep on looking for another code editor for my Windows machine. I came across VSCode.
VS Code has similar keyboard shortcuts to Atom, but its got a few extra features that I really enjoy. Splitting the screen is simpler, with the shortcut Ctrl+ \, no need to open a palette and search for it. The feature I really enjoy is the multiple cursor. While holding Alt, click on different locations of the code to insert multiple cursors. Now if you type, the code will output at all cursor locations. Really neat! I can see myself using this feature a lot later on.
Another neat feature is the ability to select the same instance of a word in the preceding and succeeding lines. If I declare 10 int variables but suddenly need to change them to doubles, this feature will allow me to quickly allow this change. Press Ctrl+ D to select the word and all the same instances.
Git Lens
Git Lens enables me to visualize code authority within VS Code. I am able to browse and explore the history of the file. Very simple to use and very handy in team projects collaborating with Git.
Path Intellisense
The Path Intellisense extension helps autocomplete paths and filenames. I find myself always forgetting the path name, with this extension I can look through the path reference.
TODO
I've tried multiple different code editor: vim is interesting however the learning curve is a little too steep for me, emacs keyboard-only navigation is interesting however it also turned me off from the editor, Gedit was a little too simple for me, and finally sublime was very nice but the occasional "trial end" message pops up and annoys me.
I then stumbled upon Atom. I liked the visual components and simplicity of the Code Editor, along with the ability to customize anything and everything. Atom became my predominate code editor for Linux. I knew some of the new features of Atom, but I never dove deeper and explored what's under the hood, how to make it work for me. Until now that is.
Atom
To open up Atom, I could either open it from the menu or with the terminal command Atom ., or I could even open up a file or a folder by specifying them, for example Atom myFolder. This is a quick way to open up my project and start working on it without having to go and look for it. The Atom palette is a window that contains all the commands available in Atom. The commands Ctrl + Shift + P open up the palette menu, which display all of the commands/shortcuts available. Some of the keyboard shortcuts are similar to other Code Editors, to find something in the file, I would press Ctrl + F , or Ctrl + F Ctrl + Shift + F to find the string in the entire project. There are two ways to split the screen, opening the palette and searching pane, or right clicking anywhere on the code and selecting how to split.
Packages
Atom has a large variety of packages that can be installed. Some of the packages make the code more readable, while others help write code faster. Here is a list of my favorite packages:Auto-complete
Auto-complete is a very handy package, something that my old Notepad++ did not have. Most modern EDI's already have some form of auto-complete implemented, and you don't really notice it until you it's not there. Window pops up with code suggestions and gives the ability for the coder to auto-complete the tag/word.
TODO
Todo is very simple yet helpful package. While coding, if I want to leave a note for myself or another programmer, I can simply leave a detailed TODO: comment that can easily be viewed later on. On top of TODO, there is a whole collection of tags that can be used instead, including: FIXME, CHANGED, IDEA< NOTE, REVIEW, BUG, and QUESTION. A list of all the tags can then be easily viewed with the shortcut Ctrl + K, or Ctrl + T. I like to leave myself notes for late while programming, and with this package, I'll never forget where that note is located.
Atom-beautify
Atom-beautify is meant to make code look nice and readable. I often spend some time arranging my code to make it look the way I like it, Atom-beautify does all on its own. Atom-beautify will separate a long line of code or insert proper tab lengths where needed, making the entire code much easier to read. To use this packag, highlight the code to beautify, and either Ctrl + Alt + B or open up the palette and enter Atom-beautify.
Highlight-selected
Another simple package. Highlight-selected will select all occurrences of the selected word. Double click on any variable/word to find all instances.
Script
This package will run scripts inside of Atom. Highlight the code to run, and use the keyboard shortcut Ctrl + Shift + B. Very handy package to quickly run and test small parts of your code.
I tried using Atom on my windows machine, however the entire editor just seemed.. slow. Atom is extremely fast on my Linux machine but the performance drops once on Windows. So I decided to keep on looking for another code editor for my Windows machine. I came across VSCode.
Visual Studio Code
VS Code is an open source code editor developed by Microsoft. At first glance, VS Code looks like a mix of Atom and Visual Studio. Like Atom, Brackets, and Sublime, the sidebar contains the file/project. VS Code has its own integrated Linux terminal - opened with Ctrl+ Shift + C - which is really neat. Because VS Code is made by the same company that made Visual Studios, a lot of the keyboard shortcuts available in Visual Studio are also available in VS Code.VS Code has similar keyboard shortcuts to Atom, but its got a few extra features that I really enjoy. Splitting the screen is simpler, with the shortcut Ctrl+ \, no need to open a palette and search for it. The feature I really enjoy is the multiple cursor. While holding Alt, click on different locations of the code to insert multiple cursors. Now if you type, the code will output at all cursor locations. Really neat! I can see myself using this feature a lot later on.
Another neat feature is the ability to select the same instance of a word in the preceding and succeeding lines. If I declare 10 int variables but suddenly need to change them to doubles, this feature will allow me to quickly allow this change. Press Ctrl+ D to select the word and all the same instances.
Extension
Most of the extensions are similar to that of Atoms, with a few changes. Here is a list of my favorite Extensions in VS Code:Git Lens
Git Lens enables me to visualize code authority within VS Code. I am able to browse and explore the history of the file. Very simple to use and very handy in team projects collaborating with Git.
Path Intellisense
The Path Intellisense extension helps autocomplete paths and filenames. I find myself always forgetting the path name, with this extension I can look through the path reference.
TODO
TODO is very simple and similar to the package in Atom. I can leave notes in the code that I can later come back to and fix or complete.
Prettier
Prettier is similar to Atom's Atom-beautify, it simply cleans up the code. very useful and easy to use extension.
CSS Peek
CSS Peek allows me to look up the CSS class details. So many times I started using a specific CSS class thinking it does one thing, but it does another.
Last thought
I enjoy both of the code editors and learned lots of new features for both. I'll have to play around more with both to learn more of the features and shortcuts. I'd love to learn Emacs but that would be later in the future. I'd love to ditch the mouse in a Code Editor and use only keyboard, but I am not ready to do that just yet.
Comments
Post a Comment