IDEs

Your IDE (integrated development environment) is what you will use to write/edit code for projects throughout the workshop series. There are many great options out there, with modern editors offering advanced code completion, refactoring, searching, and analyzing capabilities.

Below are three popular development environments used widely for software development

Choose this if you’ve never used an IDE (besides Dr. Racket) before. Maintained by Microsoft, it is 100% free and has a simple interface that is easy to get started with.

This powerful IDE offers many advanced features for working with web development “out of the box”--without major configuration required. It is slightly more sophisticated and and resource--intensive than more lightweight editors like VS code, but is built on the JetBrains platform so if you’ve used editors like IntelliJ this should be familiar to you.

Despite being one of the most lightweight editors, Notepad++ is very functional and perfectly suitable for basic web development. Needless to say, the aforementioned editors come with more bells and whistles—most prominently excellent autocomplete and code-checking features—but if you want to dive in without training wheels or have a less powerful this is a good option

In high school there are the students with thick binders all organized with dividers and the students who place all papers in a handful of folders. The same is true with IDEs.

There are heavy-weight environments development environments that can do powerful operations like compiling source code and build indexes at the cost of a larger install size and slower speeds. Meanwhile there are light-weight environments just for basic syntax highlighting and programming that run faster and

The File Explorer is where you can see the file structure of your project and all the folders and files involved in it. The file structure of your project can depend on several factors such as frameworks like Node, libraries like React, or design patterns like Model-View-Controller.

Opening a file will allow you to edit it’s contents and write more code. In most major IDEs you can open multiple files similar to how you might have different web browser tabs open. While all you code can theoretically all be written in a single file it would become very hard to read. Just like a single method has one function, it’s recommended that all files relate to a single element of your project for better organization and readability

The CLI terminal is where you can directly execute commands within the project directory or on your computer as a whole. You might use the terminal to install certain dependencies through node, run your project, and make sure your tests pass. On Linux, Windows, and Mac’s the command line is a powerful tool for development.

Modern-day IDEs are packed full of powerful technology to make your life as a developer easier. Many time you might take this for granted, but even a few years ago features like these may not have existed.

With syntax highlighting you can get a better understanding of the different keywords of whatever programming language you use and the code is more readable as a whole. The different visual stylings of the text allow us to better recognize and parse the code.

There’s a debate in computer science surrounding the best colors to use in a development environment. Some say coding on a dark background is easier on the eyes - especially when coding late at night. Meanwhile light backgrounds are easier to read during the day and in bright lights that might otherwise cause glare.

No matter your preference, IDEs will cater to it. You can choose themes such as: light, dark, sepia, and gray-scale. That only scratches the surface of the color themes available to make your coding experience as effective or unique as possible.

Both light-weight and heavy-weight IDEs have extensions that add to the base functionality of the environment. Some range from simple syntax highlighting for programming languages while others become more complex such as editing files with unique extensions.

While by default you can run Git commands through the command line in either your editors terminal or your own shell (XCode, CMD, PowerShell etc.) many times you can also execute the same commands in your editor’s UI. This can make checking out to new branches, resolving merge conflicts, pushing, and pulling to repositories that much easier.

One of the best tools that an IDE has to offer is it’s debugging abilities. All IDEs have the same functionality but are executed in different ways. When you have a file open you can set a breakpoint on a specific line that once the line is reached execution of your code will pause. While it’s paused you can see the state of all variables currently initialized and step through code line by line, or function by function, to make sure everything is working properly. This is especially useful when stuck on a particularly difficult bug. Effectively using a debugger takes time, but checking out the guide for Debugging in VSCode can be incredibly useful