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.

{
  "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

• Github
• VS Code Marketplace

Enjoy!