Web Developer Experience Pack (ZPack series)
An Opinionated collection/pack of extensions for Web Developers in VSCode (With Better DX and load time in Mind)

1-Click Setup:
Press ctrl+shift+p
Type zpack or update config
Click on Update Essentials Web Extension Pack (ZPack series) Config to automatically add below configs to your settings.json file
FiraCode Font 
- Download FiraCode fonts
- Install
ttf fonts in your OS
Reload VSCode
Some extensions like codeMetric needs vscode reload after installation.
Click to see what configs this plugin will use
{
"files.autoSave": "afterDelay",
"explorer.compactFolders": false,
"projectManager.openInNewWindowWhenClickingInStatusBar": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"cSpell.userWords": [],
"eslint.alwaysShowStatus": true,
"eslint.codeAction.showDocumentation": {
"enable": true
},
"eslint.lintTask.enable": true,
"errorLens.statusBarColorsEnabled": true,
"errorLens.statusBarMessageEnabled": true,
"errorLens.statusBarMessageType": "closestProblem",
"errorLens.followCursor": "closestProblem",
"errorLens.gutterIconsEnabled": true,
"errorLens.scrollbarHackEnabled": true,
"errorLens.fontStyleItalic": true,
"workbench.colorTheme": "One Dark Pro",
"workbench.iconTheme": "material-icon-theme",
"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true
}
Extensions Included
Relevant Links
Enjoy!
| |