The Top Full Stack Developer Tools

There are an incredible amount of full stack developer tools on the internet. But, how do you know which ones will help you the most? Whilst a lot of these are based on personal preference, there are many sites that developers widely know because they’re just that good. So let’s explore some of the top full stack developer tools.

Visual Studio Code

Visual Studio Code or VSCode is the most favoured IDE (Integrated Development Environment) among full-stack developers. This is because it has a quick and easy user interface that allows even a beginner developer to jump right in. VSCode also includes a wide range of extensions, which can do anything from speeding up your coding, checking for code errors, and changing your colour scheme (because no one likes a light IDE).

Some of the best VSCode extensions are:

Bracket Pair Colorizer

The Bracket Pair Colorizer allows matching brackets to be identified with colours. Not only does this save an incredible amount of time while trying to figure out where your function or style selector ends, but it’s also really pretty!

Prettier

Prettier is a beautiful code formatter. It considers maximum line length and readability as standard when formatting your code, with a massive amount of customisable options to make your IDE truly yours.

GitLens

GitLens supercharges the built-in Git capabilities within VSCode. My favourite part of this extension is that if you’re working in a team, you can see who edited each line of code last! No more hunting through commits to figure out where a bug came from – you can go straight to the source!

SonarLint

SonarLint is like a spell checker, but for code. It highlights bugs and security vulnerabilities as you code, offering suggestions for how to fix them while you type. It covers a wide range of coding languages, and it’s fully customisable.

GitHub Pull Request and Issues

The GitHub Pull Request and Issues extension allows you to view, review, validate and merge GitHub pull requests and issues from the comfort of your IDE. Switching to GitHub in the browser might seem like a relatively low-effort thing to do, but it amazes me how much time this saves on every team project!

TODO

TODO Highlight and Todo Tree are a pair that work so well together. With TODO Highlight, you can add ‘TODO:’ or ‘FIXME:’ (or any other phrase that you can customise), which highlights it in your code. This makes it easier to find bits of code that need work. This links in with Todo Tree, which allows you to view everything marked as ‘TODO’ or ‘FIXME’ to the side as if they were files.

Other IDEs

Of course, there are many other IDEs out there, including online IDEs like CodePen and gitpod, and installable IDEs such as PyCharm, IntelliJ IDEA, Eclipse, and Xcode (among many others). Your choice of IDE is always a personal preference. However, some IDEs are better for specific languages or platforms (for instance, Xcode is a fantastic choice for developers working on software for Apple devices).

Devtools

Developer tools (often referred to as Devtools) are built into your browser. They allow you to view the source code of any website, which is a must when you’re developing a website.

Devtools includes many features that can make your developer experience easier:

• View the source code (HTML) of any website.
• Lets you view the CSS styling linked to that HTML.
• View the height, width, padding, margin, and border of any HTML element.
• Set the screen size or device for responsive design.
• Accessibility information, including all ARIAs and the accessibility DOM tree.
• Console, where you can run JavaScript functions and much more to test your site and view any console errors that are displayed.
• Issues panel, where you can view any potential issues with the site.
• CSS Overview allows you to view all CSS information about the site (including any accessibility contrast issues the site might have).
• Application, where you can (along with other things) view the site and session cookies.

Depending on your browser, the method to open Devtools is different:

• Chrome Devtools – Right-click on a web page and click ‘Inspect’, press F12, or Shift+Ctrl+J (Windows/Linux), or Command+Option+J (macOS).
• Firefox Devtools – Tools > Web Developer > Web Developer Tools, press F12, or use the keyboard shortcut Ctrl + Shift + I (Windows/Linux), or Command+Option+I (macOS).
• Edge Devtools – Press F12 or Ctrl+Shift+I (Windows/Linux) or Command+Option+I (macOS).
• Safari Devtools – Safari > Preferences > Advanced Tab, check the box next to “Show Develop in menu bar”, exit Preferences, you’ll see a new “Develop” menu appear. Develop > Show Web Inspector.

Web page quality – Lighthouse

Lighthouse is an automated tool for improving the quality of web pages. It gives you a score out of 100 on four main topics:

• Performance
• Best Practices
• Accessibility
• SEO

It allows you to improve the performance of your site in real-time and see your improvements immediately. It also tells you where your site has failed in these sections, giving you clear guidance on how to improve it.

Social debuggers

Social sharing debuggers are a useful place to go when you want to share anything on social media. They ensure that you know exactly what will be seen when you share that project on social media before you finalise a project. They take information from your meta tags in your head element and use those to create a post that looks good when you post it.

This article on CSS Tricks is a wonderful place to start if you’re unsure what meta tags are required for social media sharing. It’s definitely a rabbit hole that’s great fun to fall down and will help you get social media posts that display your sites how you want them to be seen.

• LinkedIn Post Inspector
• Twitter Card Validator
• Facebook Sharing Debugger

Linters

Linters ensure that no syntax errors are present in your code. This is a fairly basic necessity, but they can save you hours of trying to find that pesky semicolon!

• W3C provides an online validator for HTML and for CSS.
• JSHint or ESLint both validate JavaScript code. Both have VSCode extensions, and JSHint is available online.
• Flake8 and Pep8 both validate Python code; whilst Pep8 is online, Flake8 runs in the terminal.
• Markdownlint is available as a VSCode extension, which validates your markdown code.

Accessibility tools

We wouldn’t get very far if we didn’t check for accessibility. It’s such an important part of developing a website that it can’t be ignored. Here are a few of the best accessibility checkers I’ve found online:

• WCAG (Web Content Accessibility Guidelines) – This is your one-stop-shop for all the accessibility guidelines for the web. It’s pretty heavy reading, but it’s information central!
• webAIM – This allows you to test your site against all the main accessibility issues that often prevent a website from being used by users with accessibility requirements. As you can see from the image below, even the most well-known websites sometimes miss the mark with accessibility.
• webAIM contrast checker – Checks colour contrasts to ensure your text is fully readable.
• Toptal Colourblind Filter – Input your website to see how it looks to users with different types of colour-blindness.

Abigail Harrison, Code Institute Student

Learn code for free

Technology can do so much. While this is not an exhaustive list, it’s exciting to see full stack developer tools that are available. If you’ve been thinking about learning to code, try our free 5 Day Coding Challenge. Experience what it’s like to work with code. Register for our free challenge today through the form below.