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:

1. Press ctrl+shift+p

2. Type zpack or update config

3. Click on Update Essentials Web Extension Pack (ZPack series) Config to automatically add below configs to your settings.json file

4. FiraCode Font

   • Download FiraCode fonts
   • Install ttf fonts in your OS

5. Reload VSCode

   Some extensions like codeMetric needs vscode reload after installation.

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

• 1- Git Essentials Extension Pack (GPack) - Git Essentials Extension Pack for Visual Studio Code (GPack)

• 2- Quality/Metric Extension Pack (QPack) - Web Quality/Metric Development Essentials Extension Pack for Visual Studio Code

• 3- DX Enhancer Extension Pack (EPack) - Developer Experience Enhancer/Management Essentials Extension Pack for Visual Studio Code (EPack)

• 4- Frontend Extension Pack (FPack) - Frontend Development Essentials Extension Pack for Visual Studio Code

• 5- One Dark++ Extension Pack (TPack) - Theme Essentials Extension Pack(One Dark Pro,Material Icon, FiraCode font) for Visual Studio Code

Relevant Links

• Github
• VS Code Marketplace

Enjoy!