Extra Fundamentals - Editors
School curriculum often misses out on many crucial fundamental tools and concepts. This post is one of the many that helps to bridge that gap, starting with setting up and using an editor.
School curriculum often misses out on many crucial fundamental tools and concepts. This post is one of the many that helps to bridge that gap, starting with setting up and using an editor.
Schools often do not often use standalone editors, but they are essential and flexible tools that can be used in many different environments. I will talk about the advantages of using a text editor versus an IDE and the setup process.
What tools do you need to write code?
Before you can edit and compile source code, you typically need the following:
- Editor to change your source
- Compiler and Debugger
transforms your source into an actual program
Additional good-to-haves:
- Package manager to install libraries
- Version Control
- Quick access to API specifications
Why not use an IDE?
There is nothing wrong with using a good old Integrated Development Environment, IDE. IntelliJ IDEA is a good example for Java if you want all of your tools in one program out of the box.
However, typically each standalone tool tend to be more focus and excel at its own task as compared to one monolithic IDE. A Git client from the IDE might not have a great visual merge tool, or the IDE might take too long to start.
What to expect from a Text Editor?
Looking at the 5 use cases listed above, we can create a list of requirements that we can expect from our editor. For demonstration purposes, we will be targeting basic Web Development with HTML, JavaScript and CSS without additional tooling.
We expect from the editor:
- Basic syntax highlighting
Coloring of words based on context - function name should have a different color from parameter names - Good looking
- Support many languages
Supports language server standards
Outside the Editor
- Git Client
- Package manager
- Additional Tooling
- Browser for debugging and running the site
Choosing the Editor
Let us set up a real editor to demonstrate. I will be using Windows 10 Pro version 1909 for this example.
For a text editor, we will be choosing Sublime Text 3. The popular Visual Studio Code is great, but they have too many features baked in. I want to walk through and install each and every essential feature from a text editor, so Sublime Text is a better choice today. However, I still prefer Visual Studio Code for day to day use due to its popularity among Web Developers.
For external tools, I typically use GitKraken or Sourcetree or SmartGit for version control and Git Bash Shell for running tasks on the command line such as package manager or builds.
Installing the Editor
As mentioned, I will be using Sublime Text 3 for this example. Since I am using Windows 10 and it is 2020, I will use the 64-bit non-portable version.
I like to open files on sublime within the context menu, so I will enable this option.
After clicking through the selection menu, voila, here it is, a clean install of Sublime Text 3.
Command Palette and Package Control
Every major text editor will have a central command field. This allows you to do quick changes like trailing line endings, toggling certain UI features in the editor.
Key in Ctrl + Shift + P to bring up the command palette.
The Command Palette holds infrequently used functionality, like sorting, changing the syntax and changing the indentation settings.
- Sublime Text Website
Changing Key Bindings
To change the keyboard shortcuts, bring up the command palette, type in key bindings and copy any new bindings to the JSON Array file on the right.
Changing Settings
We can change settings through the command palette.
By copying the key-value from the default options, we override these options by copying and pasting them to the user settings JSON file.
Changing UI components
I do not like the minimap that shows all my code and I like to see the sidebar, so I will toggle them through the command palette (because I am too lazy to check their shortcuts).
Packages
Every major text editor will have the ability to install plugins. Visual Studio Code and Atom have them built-in, but Sublime Text 3 has it decoupled and you have to install it separately. That plugin is known as Package Control.
Type in "install" into the command palette and the option to install Package Control should come up.
After installing, you could bring up the command palette, type in 'install' and install any plugins available on the market.
Let us install a theme. Type in '1337' and install the theme. Typically after you install a new package, a helpful message will appear.
To change the color scheme, we access the command palette again, type in "color", select the first option UI: Select Color Scheme and select the theme we just installed or any other options you fancy.
We will be installing the following packages:
- GitGutter - https://packagecontrol.io/packages/GitGutter
- LSP - https://packagecontrol.io/packages/LSP
- JavaScript Completions - https://packagecontrol.io/packages/JavaScript%20Completions
Enable the JavaScript Language Server Protocol support by using the command palette.
Demo Time
Clone this demo project from GitHub.
Open the script.js file on Sublime, hover over window.alert, you should see the documentation for window.alert.
When you try to change lines, Sublime Text will show you the lines removed (the red arrow on line 1), the lines changed (line 2 orange line) and the lines added (line 10 and 11 green).
Fin
In recent years, text editors are pretty much plug-and-play. We do not need to tinker much and most of the features can be accessed through the command palette on most text editors.
Text editors excel best in their flexibility. The same editor can be used for many different languages, framework while maintaining the same experience throughout.
