Skip to main content

Advanced Configuration

Under construction

This section is under construction. Please check back later. In the future, this section will be updated with guides on advanced configurations to the tool, which involve writing custom code and editing the tool's codebase directly.

Optional: Visual Studio Code Extensions​

One of the benefits of using Visual Studio Code is access to many extensions that can make code editing more user-friendly and less error-prone.

When you have Visual Studio Code open, you can install extensions by selecting the icon with blocks on the right panel and searching for the names of extensions.

Here are a few that I have found recommended elsewhere and personally found useful:

  • Auto Rename Tag - Automatically renames the closing tag if you rename the opening tag in HTML, or vice versa.
  • Bracket Pair Colorizer - Colour-codes brackets so you can more easily see which opening and closing brackets are paired and whether you are missing a bracket anywhere.
  • Code Spell Checker - Spell checks your use of common functions and tags, which can break the website if spelled incorrectly.
  • HTML CSS Support - Gives autocomplete suggestions based upon existing classes and id values in your code, which is helpful for avoiding spelling errors.
  • indent-rainbow - Helps you see what code is indented at what level by adding a rainbow to the indented space. Useful for cases where there are multiple instances of nested code and it is hard to visually determine what level something is nested at.
  • Prettier - Code formatter - Every time you save your files, it cleans up the document to be more readable in various ways (e.g. aligns indents to their appropriate level for nested code).