Frontend Development Essentials Extension Pack for Visual Studio Code
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
}
-
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
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.
Enjoy!