Code Editors

A good code editor is the heart and foundation of a developer’s toolbox.

There are a lot of them out there. According to Stack Overflow’s yearly survey, 75% of developers, including myself, use Visual Studio Code. There’s a reason it’s so popular. VSCode has a very large & well supported plugin ecosystem via the VSCode marketplace. This allows the developer to highly tune their environment to their needs.

I asked the some other web developers at Swarthmore, and they all use VSCode as well. However all of us use different extensions.

As for myself, I use the following extensions (I am going to ignore language support plugins here)

• Vim – Look.. sometimes I don’t want to use the mouse ok?
• WSL – Allows me to connect to and run everything in my WSL container.
• Scope to This – Allows me to scope to a certain folder within large projects.
• Continue – Adds AI support to VSCode.
• GitHub Theme – Do people even code without cool themes?

Les Leach, Web Developer at Swarthmore says he and his team makes great use of the Docker extension.

Kenny Whitebloom, Frontend Developer at Swarthmore mentions he uses the GitLens plugin, which supplements and enhances git support for VSCode.

Michael Kappeler, Web Developer at Swarthmore says that he really likes the rainbow csv plugin, which is helpful for working on large csv files. He also uses the Dracula theme.

There are other good code editors out there, VSCode just happens to be the most popular.

Some other notable IDEs are Visual Studio, JetBrains (each language has a different IDE, but they are all fundamentally similar), and if you are on macOS or Linux, zed.

Text Editors

Sometimes you don’t want to open an entire IDE to edit a few lines of text. This is where generic text editors shine.

Personally, I use neovim for most text editing, or Notepad++, depending on if the file is in WSL or not.

Les Leach mentions that he uses BBEdit because of it’s powerful text processing capabilities, one of them being a feature called Zap Gremlins, which is useful for finding hidden control characters. (Anyone who has copy + pasted code to their editors know this is a big PITA!)

Other editors (specifically terminal-based ones) include emacs and nano.

Browsers

It’s important to keep a few browsers installed to ensure your websites look the way they should in each. You can check out the W3C Browser Statistics page for a sense of what browsers the internet is using.

I keep Chrome and Firefox around to test.

During development, I tend to use Google Chrome. Chrome or Firefox are both good choices here, as both have robust developer tools (which you will be using a lot!).

Depending on your browser, you may also want to look into automated testing to measure the quality of your site. Lighthouse is a great all around testing solution, and has a Firefox Add-On. If your testing is more accessibility-forward, aXe devtools is great to have, and has both chrome and firefox extensions.

Docker

I asked some of the other developers in ITS what they were using, and Docker seemed to be one of the must-haves.

Les Leach mentions this: Docker is one of the best developer tools we use. Docker allows us to develop multiple projects at once without have to install different software packages or server platforms on our workstations to complete the job.

When working in a team settings, docker is a godsend. For those not in the know, or who need a refresher, docker allows you to containerize an entire instance, allowing quick and easy sharing between developers.

Git

Git is an indispensable tool that introduces version control to your project (and so much more). If you are developing anything at all, it’s probably a good idea to make sure your project is using it. If you are looking to learn git, Learn Git Branching has a fun game aimed at teaching newcomers.

ChatGPT / AI

Or some other AI assistance is a very helpful thing to have while you are developing. I’ve found it useful as a replacement for scrolling through documentation and helping build out react components.

Andrew Ruether, Director of Academic Technology at Swarthmore mentions that he’s used ChatGPT for things like data visualization, SQL queries, and comparing & mutating datasets.

ChatGPT’s DALL-E is also very useful for generating images (though most of the time, they are pretty mid, as shown in this article’s featured image).

Requests

Most developers also have a go-to tool to test out making requests to APIs.

Les Leach says ARC is a useful tool for this.

I’m old-school and like using curl, but have used Postman for larger projects. I will probably check out ARC soon though, since Postman has become a bit bloated in the past years.

The End?

In summary, a code editor, git, and a decent browser (chrome or firefox.. sorry safari users) are the basics of a web developer’s toolbox.

If you are collaborating with others, Docker is a great way to containerize your app so that it runs the same on everyone’s machine.

Do you have any tools you’d like to share? Feel free to email me at aweed1@swarthmore.edu

Cheers!