Frontend Essentials Extension Pack (FPack)

FPack

Frontend Development Essentials Extension Pack for Visual Studio Code

Available Commands

Activate Frontend Essentials Extension Pack (FPack) Config
Deactivate Frontend Essentials Extension Pack (FPack) Config

Note: to run commands, press ctrl+shift+p to open the command palette, and then type the command .e.g. activate fpack then select it.

Here are the configurations this plugin will use

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.linkedEditing": true
}

Extensions Included

1- Prettier - Code formatter - Code formatter using prettier
2- HTMLHint - VS Code integration for HTMLHint - A Static Code Analysis Tool for HTML
3- HTML CSS Support - CSS Intellisense for HTML
4- Auto Rename Tag - Auto rename paired HTML/XML tag.
5- Color Highlight - Highlight web colors in your editor
6- Color Info - Provides quick information about css colors
7- Unused CSS Classes for JavaScript/Angular/React - Highlights unused css classes
8- CSS Navigation - Allows Go to Definition from HTML to CSS / Sass / Less; provides Completion and Workspace Symbols for class & id name.
9- Image preview - Shows image preview in the gutter and on hover.
10- Font Preview - Preview fonts (OTF,TTF,TTC,WOFF,WOFF2) in VS Code
11- Svg Preview - Preview for Svg files
12- Five Server (Live Server) - Dev Server with Live Reload(Serves Files/Folders). (Maintained Fork of Live Server)
13- Pretty TypeScript Errors - Make TypeScript errors prettier and more human-readable in VSCode

Recommended Extension pack

ZPack is An Opinionated collection of the best and most used extensions for Web Developers in VSCode which has Better Developer Experience(DX) and load time in Mind.

Relevant Links