Visual Studio Code 101 #7 : 10+ HTML CSS extension in recommendation

VSC Series

∘ Introduction
 ∘ Story Series
 ∘ Main Part on VSC extension
 ∘ 1. Html Language Support on VSC extension
 ∘ 2. CSS Language Support on on VSC extension
 ∘ Summary

Introduction

Visual Studio Code is a powerful and free IDE and support 10+ language development and rich of marketplace that is managed by Microsoft official. In this story, we would share the experience on 100+ extensions, and cutting the best extensions for Javascript Node React extension that you can’t miss. Moreover, we recommend these extensions to speed your productivity up 30% and high efficiency on writing your code.

In this section “Visual Studio Code 101 #7 : 10+ HTML CSS extension in recommendation”, we recommend you can refer the introduction HTML in Visual Studio Code and CSS, SCSS and Less in Visual Studio Code, it show how to use VS Code as a html/css editing environment, and Visual Studio Code provides basic support for HTML programming as well as intellisense, close tags, auto update tags, color picker, hover, validation and formatting feature. Also, Visual Studio Code has built-in support for editing style sheets in CSS .css, SCSS .scss and Less .less as well as intellisense, syntax coloring & color preview, folding, and emmet snippets feature.

Finally, we are going to introduce useful extensions, and we wish these extensions could help you speed up your working efficiency.

Story Series

Now, I hope to share some experience to decrease the gap from a novice to an expert. This series will introduce Visual Studio Code 101 from 0 to 100 migration from the other IDE, it contains below parts :

Series

1. Visual Studio Code 101 #1 : Introduction and Get start
2. Visual Studio Code 101 #2 : 20+ Recommend VSC extension you have to install in general purpose
3. Visual Studio Code 101 #3 : 20+ Recommend VSC extension you have to install in advanced purpose
4. Visual Studio Code 101 #4 : 7+ C_C++ extension in recommendation (Clang-Format)
5. Visual Studio Code 101 #5 : 10+ Python extension in recommendation
6. Visual Studio Code 101 #6 : 10+ Javascript Node React extension in recommendation
7. Visual Studio Code 101 #7 : 10+ HTML CSS extension in recommendation
8. Visual Studio Code 101 #8 : 10+ Docker and kubernetes container extension in recommendation
9. Visual Studio Code 101 #9 : 10+ CICD Jenkins, Gitlab, Github Action, and Azure-pipeline extension in recommendation
10. Visual Studio Code 101 #10 : DevOps Engineer extension in recommendation
11. Visual Studio Code 101 #11 : Cloud Engineer extension in recommendation

Main Part on VSC extension

Got your html/css perfect fit in VSCode IDE!! First of all, we recommend html language support on vsc extension and introduce css in second part. You can refer HTML in Visual Studio Code and CSS, SCSS and Less in Visual Studio Code at first if you don’t have any idea on HTML and CSS extension extension.

1. Html Language Support on VSC extension

HTML Snippets

• 2022.06 Update: HTML Snippets extension of main function is added by VS Code html extension
• CodeName: abusaidm.html-snippets
• Description: Full HTML tags including HTML5 Snippets.
• Given Ranking: ⭐⭐⭐⭐⭐ 5 stars
• VSC Link: Link
• Comment: You have to use that. I use this extension to format my html files with easy auto-complete feature, and I like the rich language support for the HTML Markup. Truly recommendation.
• Quick View:

HTML CSS Support

• CodeName: ecmel.vscode-html-css
• Description: CSS Intellisense for HTML.
• Given Ranking: ⭐⭐⭐⭐⭐ 5 stars
• VSC Link: Link
• Comment: You have to use that. I use this extension to format my html files with css style, and I like the HTML id and class attribute completion feature. It reduce lots of time when editing batch of similar css attribute. Truly recommendation.
• Quick View:

HTML Preview

• CodeName: tht13.html-preview-vscode
• Description: Provides ability to preview HTML documents.
• Given Ranking: ⭐⭐⭐⭐⭐ 5 stars
• VSC Link: Link
• Comment: You have to use that. I use this extension to view my html files without opening browser, and I like to view the editing result without refreshing browser again. Truly recommendation.
• Quick View:

Auto Close Tag

• CodeName: formulahendry.auto-close-tag
• Description: Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text.
• Given Ranking: ⭐⭐⭐⭐⭐ 5 stars
• VSC Link: Link
• Comment: You have to use that. I use this extension to add closing tag automatically when you type in the closing bracket of the opening tag, and I love the feature that the cursor is between the opening and closing tag after closing tag is inserted. Anyway, try this extension.
• Quick View:

Auto Rename Tag

• CodeName: formulahendry.auto-rename-tag
• Description: Auto rename paired HTML/XML tag.
• Given Ranking: ⭐⭐⭐⭐⭐ 5 stars
• VSC Link: Link
• Comment: You have to use that. I use this extension to rename one HTML/XML tag with automatically renaming the paired HTML/XML tag, and I like the feature to complete my task with less time. Anyway, try this extension.
• Quick View:

2. CSS Language Support on on VSC extension

Beautify css/sass/scss/less

• CodeName: michelemelluso.code-beautifier
• Description: Beautify css, sass and less code (extension for Visual Studio Code).
• Given Ranking: ⭐⭐⭐⭐⭐ 5 stars
• VSC Link: Link
• Comment: You have to use that. I use this extension to format my css/sass/scss/less file with another way than original vs code default formatter. Try it and select the best view for your.
• Quick View:

CSS Peek

• CodeName: pranaygp.vscode-css-peek
• Description: Allow peeking to css ID and class strings as definitions from html files to respective CSS. Allows peek and goto definition.
• Given Ranking: ⭐⭐⭐⭐⭐ 5 stars
• VSC Link: Link
• Comment: You have to use that. I use this extension to ** go to definition or go to symbol in workspace** by clicking the target css class, and I like the quick searching way instead finding by yourself. Truly recommendation.
• Quick View:

IntelliSense for CSS class names in HTML

• CodeName: Zignd.html-css-class-completion
• Description: CSS class name completion for the HTML class attribute based on the definitions found in your workspace.
• Given Ranking: ⭐⭐⭐⭐⭐ 5 stars
• VSC Link: Link
• Comment: You have to use that. I use this extension to autocomplete css class name, and I like the quick way to fill the corresponding attribute. Nice extension for me.
• Quick View:

SCSS Formatter

• CodeName: sibiraj-s.vscode-scss-formatter
• Description: A Visual Studio Code Extension to format SCSS.
• Given Ranking: ⭐⭐⭐⭐ 4 stars
• VSC Link: Link
• Comment: You can use that. I use this extension to format scss file, and I like the quick way to format scss without thinking. Nice extension for me. However, not everyone use scss, so I give 4 stars.
• Quick View:

SCSS IntelliSense

• CodeName: Zignd.html-css-class-completion
• Description: Advanced autocompletion and refactoring support for SCSS.
• Given Ranking: ⭐⭐⭐⭐ 4 stars
• VSC Link: Link
• Comment: You have to use that. I use this extension to handle hover, go to (variables, mixins, functions), and showing all all symbol definitions in folder, and I just want to reduce time in editing. Nice extension for me. However, not everyone use scss, so I give 4 stars.
• Quick View:

Summary

In this post, we recommend to view the HTML in Visual Studio Code and CSS, SCSS and Less in Visual Studio Code, then adding extension to create HTML and CSS development environment with 2 parts HTML and CSS extension category, and cutting the best extensions that you should try. Again, we recommend these extensions to speed your productivity up 30% and high efficiency on writing your code.

2 parts HTML and CSS extension category

1. Html Language Support on VSC extension
2. CSS Language Support on on VSC extension

If you have any good idea or recommend VSC extension, please tell me!! Thank you.

Most of pictures are from each extension. They have the copyright.