- Choosing an Editor
- gedit
- Installing gedit on Linux
- Installing TextWrangler on Mac OS
- First Steps with Your Editor
- Summary
Installing gedit on Linux
If you use Linux, then gedit is probably already installed on your computer (click the Dash Home button in the top left of your Linux screen and type gedit to find it). If it’s not already installed, you can install it by opening the Ubuntu Software Center application and searching for gedit or by issuing the following command in a Terminal window:
sudo apt-get install gedit
Once gedit is installed, you can launch it by typing gedit into the Dash Home search window (click the Dash Home button).
Installing gedit on Windows
Follow these steps to install gedit on Windows:
- Open your browser and go to https://wiki.gnome.rog/Apps/Gedit.
- Go to the Download section of the page and click the Windows Binaries link.
- Click the link for the latest version (at the time of writing this is 2.30).
- Click the gedit-setup.exe link (it might be called a slightly different name).
- Once it’s downloaded, open the gedit-setup.exe file to begin the install.
- Follow all of the install wizard steps. You can use the default values.
Once installed, gedit should appear in your Start menu. If it doesn’t appear in your Start menu, you can search for it by typing gedit in the Start menu’s Search field.
The File Browser
Most modern programming editors provide a file browsing view where you can see—at a glance—all of your folders and files. The disk browser is super useful when you want to quickly navigate around your JavaScript folders and files. To enable the file browsing view in gedit, choose View > Side Panel to open the Side Panel view. In the bottom of the Side Panel view there is a File Browser tab that you should click to switch to the File Browser. From the File Browser (Disk Browser in TextWrangler on Mac OS), you can quickly open files, view folder contents, and create new files and subfolders (see FIGURE 4.3). Once you enable the Side Panel view, it will be displayed the next time you launch gedit.
FIGURE 4.3 gedit’s File Browser
The gedit File Browser on Microsoft Windows
The first time you launch gedit for Windows, you will need to change one of the default settings so that all files and folders appear in the File Browser window.
By default only folders are shown in the Windows File Browser. This isn’t very useful because you’ll want to work with folders and JavaScript files. To ensure you can see all types of files, do the following: In the File Browser window, right-click anywhere (click the right mouse button) and make sure that the Show Binary option is selected under the Filter menu. This will ensure all file types are visible (see FIGURE 4.4).
gedit Preferences
The next step is to set some preferences for how the editor should behave. You do this by choosing Edit > Preferences to open the Preferences dialog (see FIGURE 4.5). Let’s look at each of the preferences sections in turn.
FIGURE 4.4 Ensuring all file types are visible in gedit for Windows
FIGURE 4.5 View preferences
View Preferences
It’s useful to have gedit display line numbers alongside your code. The line numbers appear in the left margin of the window and are not part of your actual code.
gedit will display a faint margin along the right side of the window in column 80. This margin is just a guide to indicate that perhaps your line of code is too long. It’s only a guide, though, and can be safely ignored. It’s generally considered good practice to keep lines of code shorter than 80 characters long to help readability, but there will always be exceptions to this rule.
The Enable Text Wrapping setting should be turned off for programming. It’s useful if you’re writing a letter, essay, or other nonprogramming text, but it can be confusing if turned on while programming.
Highlight Current Line makes it easier to see where you currently are in the code. When looking at a large JavaScript file, it can be difficult to see the cursor (the blinking block that appears next to letters as you type).
Highlight Matching Brackets is a super useful programming feature. As you move the cursor around your JavaScript source, when the cursor is next to any of the following characters, it will match the opening or closing character.
- Round brackets: ( )
- Curly brackets: { }
- Square brackets: [ ]
This can really help when writing or editing code. In FIGURE 4.6, you can see the cursor on line 1 next to the { character with both the opening and closing curly brackets highlighted in gray.
FIGURE 4.6 Bracket matching
Editor Preferences
FIGURE 4.7 shows the settings available on the Editor tab.
I recommend using either two or four spaces for tabs to make your code more readable. This is largely a matter of style and personal taste. When starting out, you should probably use four spaces.
Automatic indentation is a handy feature that saves you having to press Tab and the spacebar when you start writing a new line of code.
gedit can create a backup of your files before you save them. This is usually a good idea.
Fonts & Colors
FIGURE 4.8 shows the settings available on the Fonts & Colors tab.
You can change the font and color scheme to suit your own tastes. Some people prefer dark text on a light background, and some prefer light text on a dark background. Pick the color scheme you like. You can always change it later.
Plugins
FIGURE 4.9 shows the settings available on the Plugins tab. gedit comes with a couple of editing plugins. You should make sure that the File Browser Panel plugin is selected.
FIGURE 4.7 Editor preferences
FIGURE 4.8 Fonts & Colors preferences
FIGURE 4.9 Plugins preferences