What’s in your toolbox?
As in every trade, every developer has an assortment of tools to help them complete their tasks in a quick and efficient manner. One of the most essential tool for every developer is the text editor. You will be spending hours on hours using your editor, so it has to be one that meets all your needs.
Pick the right tool for the job and not vice versa. [Paul Colligan]
Rewind
About two years ago, my daily driver was Atom.
It worked for what I had to accomplish, but the one thing that really irritated me was it is very sluggish, it took forever to startup. It also would freeze up at the most inopportune time
Then one day, after reading positive reviews on a Microsoft project called Visual Studio Code, I immediately downloaded and installed VSC for a test drive, and have been using it ever since.
My first initial impression:
- The neat user experience.
- How fast it loads and runs
- It never lags and never freezes
- Light weight editor
Quick overview (things I like):
- Free
- Cross Platform (Mac, Windows, Linux)
- Consistent Updates (monthly)
- Keymaps: map all your keyboard shortcuts to Sublimetext, Atom, etc.
- Integrated Terminal: work in your shell without leaving the editor
- Built in GIT version control
- UI fully customizable
- Tons of extensions
Deep Dive
1) UI fully customizable
You can manually change anything setting you want to customize your UI.
Sample of a few more potential settings you can perform to customize the editor to your needs.
2) Extensions
Increase the power of Visual Studio Code through Extensions.
There are literally hundreds of extensions available for every need.
Here is a partial sample of React extensions.
3) Key Mapping
Keymap Extensions shows you a list of popular keymap extensions. These extensions modify the VS Code shortcuts to match those of other editors so you don’t need to learn new keyboard shortcuts.
4) Frequent Updates
By default, VS Code is set up to auto-update for macOS and Windows users when Microsoft releases new updates, which is normally on a monthly basis (if you prefer to change to manual, you can do so within the settings).
“Want an early peek at new VS Code features? You can try prerelease versions of VS Code by installing the “Insiders” build. The Insiders build installs side by side to your stable VS Code install and has isolated settings, configurations and extensions. The Insiders build is updated nightly so you’ll get the latest bug fixes and feature updates from the day before.” [VSC FAQ]
5) Integrated Terminal
Running the terminal within the editor is so convenient. You don’t have to switch windows to run a command line task.
You also have the ability to create multiple terminals open in different locations and splitting the terminals.
6) GIT Version Control
Instead of trying to explain how GIt Version Control works within Visual Studio Code, I think a much better way to show how GIT works is with this video created by the VSC team.
7) Interactive Playground
“The Interactive Playground on the Welcome page introduces you in a step-by-step guide to some of our advanced code editing features with interactive examples” [VSC]
With update 1.9 is a new welcome page that implements an interactive playground allowing you to try out the code editor’s advanced editing features without creating new files or a new project.
Example: in the screenshot above, featured is Multi-Cursor editing.
“This sample shows the capability to put cursors at the beginning of all occurrences of a string from within a block of code for simultaneous editing.”
8) Move Sidebar to the RIGHT
Out of the box, the sidebar default is placed on the left side of the editing screen.
You can simply move it to the right side by selecting it from the drop-down menu as shown in the screenshot above.
Finally
These are just some of the key features I love about VSCode.
There are more neat tools available through the many extensions such as:
- Image Preview: hover over the html file and the image pops-up.
- Settings Sync: synchronizes settings, snippets, themes, keybindings, workspaces, extensions, and more across multiple machines.
- Rainbow Brackets: Provide rainbow colors for the round brackets, the square brackets and the squiggly brackets. This is particularly useful for JavaScript, and other programmers.
- ES6 Code Snippets: This extension contains code snippets for JavaScript in ES6 syntax for Vs Code editor (supports both JavaScript and TypeScript).
- React Standard Style code snippets: This extension contains code snippets for React following the JavaScript Standard Style guidelines and is based on the awesome babel-sublime-snippets package.
In the end, Visual Studio Code is just one of many tools available to developers. There are so many other editors available that can also do the job. It all comes down to what fits your style of workflow and what tool are you most comfortable with?
Maybe it’s Sublime Text or PHPStorm or Netbeans, maybe Webstorm, and how about good old Notepad++.
Use what works for you and keep coding!
Gerald Watanabe
Islandwebtek
