Skip to content
| Marketplace
Sign in
Visual Studio Code>Extension Packs>Frontend Developer Extension Pack (ZPack - Complete Version)New to Visual Studio Code? Get it now.

Frontend Developer Extension Pack (ZPack - Complete Version)

SeyyedKhandon

|
973 installs
| (1) | Free
An Opinionated collection/pack of essentials extensions for Web Developers in VSCode (Better DX in Mind)
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

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) Alt Text

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.

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

  • 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!

  • Contact us
  • Jobs
  • Privacy
  • Terms of use
  • Trademarks
© 2022 Microsoft