Text Editor and Tools
Intro
As a web developer, you will be spending most of your time in a text editor. There are many tools which have created to make web development easier, simpler, and faster. A host of text editors and plugins are available to choose from.
Suggested Learning
- Check out the following popular text editors:
- Sublime Text
- Atom
- VS Code
- WebStorm
- Vim
- Brackets
- Notepad++ (Windows)
- Check out this table of features
| Feature | Description |
|---|---|
| Syntax highlighting | Sets the different parts of code in different colors to signify what they represent. A very common feature in code editors, syntax highlighting can be used to improve the readability and context of code, and also help you find errors. |
| Preview window | Lets you to see how a webpage will look like in the same code editor window that you’re working in (as opposed to going back and forth between the code editor and the browser). Some code editors have an option to switch between “code view” and “preview view” while others let you see your code and page at the same time. |
| Text zoom | Lets you make the code bigger or smaller. |
| Plugins | A plugin is a component that increases the functionality of a program. With some code editors, you can install plugins that will enhance your coding experience. For example, the notepad++ code editor has an FTP plugin that can be used to integrate FTP functionality right into it. |
| Advanced search capabilities | Many code editors have advanced search capabilities which allow you to do things like search by letter case (capital or non-capital), search multiple files at once, do regular expression searches, and more. |
| Multiview | Do you ever compare the code of two pages? What if you could do it in the same window? Some code editors have a multiview option that lets you look at the code of two documents side-by-side. |
| Code completion | You begin typing some code and near your code a small drop-down list will appear giving you a choice of how to finish what you just started typing. No need to type the same code over and over, let the code completion feature automate the process. |
| Point-and-click building | Go to the menu, select the element you want to display, set it’s attributes, and the code editor will write the code for you and display the element on the page based on your choices. |
| Tabs | If you’re working on more than one file at once, are you going to open a new window for each file? No need to! With tabs you can view as many files in one window as you want and each file will be opened in a separate tab. |
| Code block highlighting | The more complex your code, the harder it will be to keep track of. With code block highlighting, the code editor informs you where a block of code begins and where it ends. |
- Search for good fonts for programming.
- Search for good syntax hiliting coloring schemes.
Requirements
- Pick a text editor that you like and install it on your computer.
- Understand the configuration options.
- Install a few packages to improve your text editor.
- Install a good font and configure your text editor to use it.
- Install a syntax hiliting coloring scheme and configure your text editor to use it.
- Take screenshots of your setup and explain it on the
#requirementsDiscord channel to show you have passed this requirement off.
Extra Learning
This list is by no means complete. Feel free to add an issue or put in a pull request to update it.