An Opinionated collection/pack of extensions for Web Developers in VSCode (With Better DX and load time in Mind)
Activate VSCode Pro - Frontend Developers (ZPack) ConfigDeactivate VSCode Pro - Frontend Developers (ZPack) ConfigReset VSCode Pro - Frontend Developers (ZPack) Config-ZPack'ssettings 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
}
- 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
Enjoy!