VSCode Pro - Frontend Developers (ZPack)

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

Available Commands

Activate VSCode Pro - Frontend Developers (ZPack) Config
Deactivate VSCode Pro - Frontend Developers (ZPack) Config
Reset VSCode Pro - Frontend Developers (ZPack) Config - ZPack's settings will be reset with this command.

Note: to run commands, press ctrl+shift+p to open the command palette, and then type each one and click on it.

Important Note: Don't forget to install Firacode font from the automatically opened window

Here are the configurations this plugin will set for you

{
  "conventionalCommits.lineBreak": "\\n",
  "eslint.lintTask.enable": true,
  "eslint.codeAction.showDocumentation": {
    "enable": true
  },
  "codemetrics.nodeconfiguration.ReturnStatement": 0.1,
  "codemetrics.nodeconfiguration.SwitchStatement": 0.1,
  "codemetrics.nodeconfiguration.JsxSelfClosingElement": 0.1,
  "codemetrics.nodeconfiguration.JsxElement": 0.2,
  "codemetrics.basics.CodeLensHiddenUnder": 4,
  "sonarlint.disableTelemetry": true,
  "files.autoSave": "afterDelay",
  "window.zoomLevel": 1,
  "editor.wordWrap": "on",
  "workbench.editor.labelFormat": "short",
  "explorer.compactFolders": false,
  "editor.guides.bracketPairs": true,
  "editor.mouseWheelZoom": true,
  "projectManager.openInNewWindowWhenClickingInStatusBar": true,
  "errorLens.gutterIconsEnabled": false,
  "errorLens.statusBarColorsEnabled": true,
  "errorLens.statusBarMessageEnabled": true,
  "errorLens.statusBarMessageType": "closestSeverity",
  "errorLens.followCursor": "closestProblem",
  "errorLens.scrollbarHackEnabled": true,
  "errorLens.fontStyleItalic": true,
  "errorLens.messageBackgroundMode": "message",
  "workbench.colorCustomizations": {
    "editorInfo.foreground": "#0080ff6a"
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.linkedEditing": true,
  "workbench.colorTheme": "One Dark Pro",
  "workbench.iconTheme": "material-icon-theme",
  "editor.fontFamily": "Fira Code",
  "editor.fontLigatures": true
}