...

Setting Up VS Code for HTML

Setting Up VS Code for HTML

 

HTML Banner

Ready to start writing some HTML documents! We need to get your work environment set up first. My preference is VS Code. It's free from Microsoft. There are a lot of IDEs, or integrated development environments, available for you to use. If VS Code isn't to your liking, you can do a quick search for "free IDE software" and find no shortage of opinions on which one is the best.

Depending on which language you choose to program in, you may find another IDE better suited to your goals. However, we are using VS Code to work on our HTML documents.

Installing VS Code

First things first, we need to get VS Code installed! 

Download

  1. Head over to https://code.visualstudio.com/, or do a search for "VS Code" and click on the link for the "Visual Studio Code" site.
  2. Download the "Stable Build" for your computer. If it didn't automatically detect what type of computer you have, click the dropdown arrow and select your download.
VS Code Download Screen


VS Code Download Dropdown

Install

Windows

  1. Find the file. It's usually in the downloads folder.
  2. Double-click on the file to open it.
  3. If you agree to the terms, Accept the License Agreement.
  4. In the next window, make sure "Add to PATH" is checked and click next.

    5. VS Code Add to PATH Checked

  5. Click install. That's it. You're done!

Mac

  1. Locate the file on your computer.
  2. Double-click the zip file.
  3. Drag the .app file to the Applications folder. That's it. You're done!

Recommended Extensions

Code Spell Checker

Code Spell Checker Icon

Code Spell Checker catches spelling errors. I'm constantly misspelling things, so this has been a must-have.

Live Server

Live Server Icon

Live Server allows you to see the changes made to your website dynamically in your browser. This means you don't have to refresh the page each time you make a change. It automatically refreshes the browser for you.

Prettier - Code formatter

Prettier - Code formatter Icon

"Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary." - Taken from the extension description.

SonarLint

SonarLint Icon

"SonarLint is a free IDE extension that lets you fix coding issues before they exist! Like a spell checker, SonarLint highlights Bugs and Security Vulnerabilities as you write code, with clear remediation guidance so you can fix them before the code is even committed. SonarLint in VS Code supports analysis of C, C++, HTML, Java, JavaScript, PHP, Python, and TypeScript, and you can install it directly from the VS Code Marketplace." - Taken from the extension description.

There are many more extensions to choose from, but these are the ones I suggest for HTML.

Top photo by Janette Campbell with elements from W3C.

If this post has left you feeling inspired or equipped with new knowledge, why not consider fueling my creativity with a small coffee purchase?

Every sip will bring me one step closer to producing more engaging content!

Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)