During the course, there are a couple of extensions that we recommend you install to make your life easier. This guide is broken down into sections:

• Highly Recommended
• Recommended

It’s recommended that you install all of the highly recommended extensions and then pick and choose from the recommended extensions based on your personal preferences.

Highly Recommended

These extensions are highly recommended for all students to install.

Some of these extensions are critical to the course and have already been installed during Installfest. If you have these extensions installed, you can check by opening the extensions view in VSCode and clicking the extensions icon in the activity bar on the side of the window.

Ways to open index.html in your web browser. :rocket:

There are several popular options for opening code in the browser using VS Code extensions. Download one of the following extensions:

1. open in browser
   • Per the documentation: use the Alt + B shortcut to open the current HTML file in the default browser or Shift + Alt + B to choose a browser.
   • Files in the VSCode can be opened in the browser by right-clicking and selecting Open in Default Browser or using the keyboard shortcut.
   • A benefit of this shortcut is we can very quickly have a keyboard shortcut available to open the HTML file quickly in their preferred browser.
   • One drawback to using this extension is we will need to manually refresh the HTML document in the browser to see any new changes that have persisted.
2. Live Server
   • Following installation, files can be opened by clicking Go Live in the bottom right corner of the status bar in VSCode.
   • This extension is very customizable. As you become more comfortable as a developer, you can modify this extension to fit your needs.
   • A solid benefit that comes with this extension is the HTML document refreshes in the browser with each file save that occurs in your VSCode environment. This workflow can give you faster feedback regarding the changes introduced in your HTML.
3. Live Preview
   • Following installation, preview your HTML files quickly by clicking the double pane Show Preview button in the top right corner of the file.
   • This extension is handy if you want to see the live HTML preview within your VSCode environment without opening your browser for work.
   • As of this writing, this is still an experimental extension, and behavior could be volatile until it is standardized.

Quality of Life Extensions

1. Better Comments
   • Better comments will help you create more human-friendly comments in your code. It will help you create more visually appealing comments that will help you understand your code better.
2. Color Info
   • Color Info will provide quick information about the colors you use in your code. This comes in handy when you are working with CSS, and you want to know the color code of a specific color. This includes the color code in HEX, RGB, HSL, and more.
3. Peacock
   • Peacock will help you change the color of your VSCode environment. When working with multiple projects, it can take effort to distinguish between different projects. Peacock will help you change the color of your VSCode environment to make it easier to distinguish between different projects.
4. VSCode Icons
   • VSCode Icons will help you change the icons of your files in your VSCode environment, making it easier to distinguish between different file types.

Language Support Extensions

1. ESLint
   • ESLint will help you find and fix problems in your JavaScript code like syntax errors, typos, and formatting issues. This will help you write better code and catch errors before they become problematic.
2. EJS Language Support
   • EJS Language Support will provide syntax highlighting for EJS files. This is useful if you are working with EJS files and want to see the syntax highlighted in your VSCode environment.
3. ES7 React/Redux/React-Native Snippets
   • ES7 React/Redux/React-Native Snippets will provide you with code snippets for React in ES7. This will help you write React code faster and more efficiently.
4. Python
   • Python will provide Python language support in your VSCode environment, allowing you to write Python code faster and more efficiently.

Recommended

These extensions are recommended for all students to install. They are not critical to the course but will make your life easier. Some of these extensions are specific to particular languages or technologies, so you may only need some of them.

Quality of Life Extensions

1. Prettier - Code formatter
   • Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that consider the maximum line length, wrapping code when necessary.
2. Auto Close Tag
   • Auto Close Tag will automatically add closing tags when you type in the closing angle bracket of the opening tag for HTML and XML files. Never count closing tags again!
3. Auto Rename Tag
   • Auto Rename Tag will automatically rename paired HTML/XML tags.
4. Live Share
   • Live Share will allow you to easily share your workspace with others, allowing pair programming and collaboration.
5. Indent Rainbow
   • Indent Rainbow will colorize the indentation in front of your text, alternating four colors on each step, allowing you to see the indentation more clearly.
6. Thunder Client
   • Thunder Client will help you directly request HTTP from your VSCode environment.
7. Todo Tree
   • Todo Tree will help you find and manage TODO and FIXME comments in your code, allowing you to track what needs to be done.

Language Support Extensions

1. Turbo Console Log
   • Turbo Console Log will make debugging easier by automating the writing of console statements.
2. Python Indent
   • Python Indent will correct the indentation of your Python code.
3. StandardJS - JavaScript Standard Style
   • StandardJS will help you enforce a consistent style in your JavaScript code.
4. HTML/CSS/JavaScript Snippets
   • HTML/CSS/JavaScript Snippets will provide code snippets for HTML, CSS, and JavaScript.
5. Reactjs Code Snippets
   • Reactjs Code Snippets will provide you with code snippets for React.
6. Sappling
   • Sappling will provide you with a tree view of your React components.