My Development Setup

My personal development setup, for Frontend Development on Windows.

Code Editor: Visual Studio Code

Lightweight Code Editor, focused on and optimized for web development.

If I have to look into code other than Frontend, I usually install and use IntelliJ for that.

Theme

I am currently using my own custom theme Deep Ocean which is based on the Oceanic Next color palette! It's simple, it's dark - it's fantastic!

Font

I am currently using the MonoLisa font (paid) and I really do enjoy it a lot. If you are looking for an alternative, I can highly recommend Microsoft's Cascadia Code font (free).

Extensions

The following are my must-have extensions for all kinds of web development. Depending on the project I am currently working on, I sometimes disable some extensions.

Extension	Description
Angular Language Service	Improve editing experience in Angular HTML templates
Auto Close Tag	Automatically close paired HTML / XML / JSX tags
Auto Rename Tag	Automatically rename paired HTML / XML / JSX tags
Better Comments	Improved code comment colorization
Cloak	Hide secrets in env files
CodeMetrics	Code complexity computation in JavaScript / TypeScript
Color Highlight	Highlight colors
DotENV	Support for dotenv file syntax
EditorConfig	Apply settings defined in .editconfig file
Error Lens	Improve error and warning highlighting
ESLint	ESLint support
Git History	Enhanced Git
GitHub Markdown Preview (Extension Pack)	Markdown Preview, using the Github Theme
GitLens	Enhanced Git
Guides	Indentation guide lines
Image Preview	Image previews within gutter
IntelliCode	AI-assist
IntelliCode API Usage Examples	Code examples
JSON5 syntax	JSON5 language support
Kubernetes	Kubernetes support
Live Share	Real-time collaboration
MDX	MDX language support
Open in Browser	Open HTML files in browser(s)
Partial Diff	Diffing tool
Prettier	Prettier
Sass	SASS language support
Sass Lint	SASS linter
Sort JS object keys	Quickly sort JS objects by key
Sort JSON objects	Quickly sort JSON objects by key
Sort lines	Quickly sort lines in different ways / by different criteria
Sync Scroll	Synchronize scolling across editor tabs
TODO Highlight	Highlight TODOs, FIXMEs and similar comments
Todo Tree	Panel listing all TODO comments
Total TypeScript	Improved TypeScript error messages
Trailing Spaces	Highlighting and auto-removal of trailing spaces
Version Lens	Dependency version infos in package.json
XML	XML language support
YAML	YAML language support

Settings

The following are my settings (includes settings for extensions, theme, font, ...):

{
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json5]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[markdown]": {
    "editor.quickSuggestions": {
      "comments": "off",
      "other": "off",
      "strings": "off"
    },
    "editor.wordWrap": "off"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[yaml]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "breadcrumbs.enabled": false,
  "debug.javascript.codelens.npmScripts": "never",
  "editor.accessibilitySupport": "off",
  "editor.bracketPairColorization.enabled": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.fontFamily": "'MonoLisa', Consolas, 'Courier New', monospace",
  "editor.fontSize": 13,
  "editor.guides.highlightActiveIndentation": false,
  "editor.guides.indentation": false,
  "editor.lineHeight": 22,
  "editor.linkedEditing": true,
  "editor.minimap.maxColumn": 140,
  "editor.rulers": [
    140
  ],
  "editor.stickyScroll.enabled": true,
  "editor.suggestSelection": "first",
  "editor.tabSize": 2,
  "editor.tokenColorCustomizations": {
    "textMateRules": []
  },
  "emmet.showExpandedAbbreviation": "never",
  "emmet.triggerExpansionOnTab": true,
  "explorer.confirmDragAndDrop": false,
  "extensions.ignoreRecommendations": true,
  "files.insertFinalNewline": true,
  "files.trimTrailingWhitespace": true,
  "git.enableCommitSigning": true,
  "git.openRepositoryInParentFolders": "always",
  "gitlens.codeLens.enabled": false,
  "gitlens.currentLine.enabled": false,
  "html.format.indentHandlebars": true,
  "html.format.indentInnerHtml": true,
  "html.format.wrapLineLength": 140,
  "javascript.preferences.importModuleSpecifier": "relative",
  "javascript.preferences.quoteStyle": "single",
  "markdown-preview-github-styles.colorTheme": "light",
  "prettier.printWidth": 140,
  "prettier.singleQuote": true,
  "redhat.telemetry.enabled": true,
  "terminal.external.windowsExec": "C:\\Program Files\\PowerShell\\7\\pwsh.exe",
  "terminal.integrated.cursorBlinking": true,
  "terminal.integrated.defaultProfile.windows": "PowerShell",
  "terminal.integrated.scrollback": 10000,
  "totalTypeScript.hideAllTips": true,
  "totalTypeScript.hideBasicTips": true,
  "typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis": true,
  "typescript.format.insertSpaceAfterOpeningAndBeforeClosingTemplateStringBraces": true,
  "typescript.locale": "en",
  "typescript.preferences.importModuleSpecifier": "relative",
  "typescript.preferences.quoteStyle": "single",
  "typescript.updateImportsOnFileMove.enabled": "always",
  "vs-kubernetes": {
    "vscode-kubernetes.minikube-path.windows": "C:\\Users\\domin\\.vs-kubernetes\\tools\\minikube\\windows-amd64\\minikube.exe"
  },
  "window.commandCenter": true,
  "window.newWindowDimensions": "maximized",
  "workbench.colorTheme": "Deep Ocean",
  "workbench.editor.closeOnFileDelete": true,
  "workbench.editor.decorations.badges": false,
  "workbench.layoutControl.enabled": false,
  "workbench.startupEditor": "none",
  "workbench.tips.enabled": false,
  "workbench.tree.indent": 13
}

Keyboard Shortcuts

The following are my keyboard shortcuts:

[
  {
    key: 'ctrl+shift+space',
    command: 'editor.action.commentLine',
    when: 'editorTextFocus && !editorReadonly',
  },
  {
    key: 'ctrl+shift+alt+f4',
    command: 'workbench.action.reloadWindow',
  },
];

Console: ConEmu running PowerShell

ConEmu is a terminal wrapper application, adding useful features and customizations. Most interestingly, multiple consoles (even of different types) can run in the same window via a tab interface, and even be arranged in a single split-view.

Windows Terminal kinda goes into a similar direction, but is missing the same level of split-view customization (e.g. freely movable borders, vertical split-views). So it's not a replacement / better alternative (yet).

ConEmu Settings

At "General",

• find "Choose color scheme", then select "Twilight"

At "Startup",

• find "Specific named task", and make sure that "PowerShell" is selected

At "Startup" > "Tasks", find the Powershell tasks and

• enable both "Default task for new console" and "Default shell"
• update the "Commands" to use "pwsh.exe"
• click "Startup dir..." and select your projects folder

PowerShell Settings

Auto-complete based on command history can be enabled in PowerShell.

Open PowerShell profile file (will be created if it does not exist):

Notepad $profile

Add following configuration:

# Autocomple based on history, via arrow keys
Set-PSReadlineKeyHandler -Key UpArrow -Function HistorySearchBackward
Set-PSReadlineKeyHandler -Key DownArrow -Function HistorySearchForward

PowerShell Extension: PoshGit for PowerShell

Displays additional Git status information (e.g. current branch, changes) within the PowerShell at the beginning of lines. Git, obviously, needs to be installed upfront.

Run the following commands within a PowerShell:

PowerShellGet\Install-Module posh-git -Scope CurrentUser -Force
Add-PoshGitToProfile -AllHosts

Version Control: Git

Version Control Software, accessibly via command line.

Settings

Look at the current configuration using:

git config --global --list

Add options using:

git config --global user.name <NAME>
git config --global user.email <EMAIL>
git config --global core.ignorecase false # act case sensitive
git config --global status.showUntrackedFiles all # show indivisual files in untracked directories
git config --global push.default current # push new branches to origin by default
git config --global push.autoSetupRemote true # auto-track branches pushed to origin
git config --global credential.helper wincred # Remember credentials via Windows

Also read Better Git configuration.

Commit Signing with GPG

Sometimes it is a good idea / might be required to setup Commit Signing via GPG.

After installing GNU (for Windows), continue generating a new GPG key and make it available to GitHub. Then, use the following coniguration for Git:

user.signingkey=<KEY>
commit.gpgsign=true
gpg.program=C:\Program Files (x86)\GnuPG\bin\gpg.exe

Runtime: NodeJS

I manage multiple NodeJS versions via Volta, a tool that's very similar to nvm but also runs properly on Windows.

Pre-requisite: Enable Developer Mode in the Settings app under "Privacy & security" > "For developers".

Install preferred Node.js version:

volta install node@<VERSION>

Browser: Google Chrome

Primary browser for development purposes.

Extensions

The following are my must-have extensions for Frontend development in general. Depending on the project I am currently working on, I sometimes disable some extensions.

Extension	Description
Augury	Adds tools for debugging and profiling Angular applications
aXe	Adds tools for accessibility testing
Baseliner	Show lines for vertical rhythm
ChromeLens	Simulates visual impairments
ColorZilla	Color Picker
Contributors on GitHub	Shows contribution details on GitHub PRs
Dimensions	Measure dimensions of elements on hover
Feature Queries Manager	Manage CSS feature queries
Fireshot	Makes full-sized screenshots
Mindful	Shows a beautiful notepad as the new tab page
JSON Formatter	Formats JSON files opened in the browser
Pesticide	Shows elements outlines
GitHub Markdown Menu	Shows a markdown table of contents as a dropdown menu
React Developer Tools	Adds tools for debugging and profiling React applications
Tab Size on GitHub	Decreases GitHub indentation wideness
VisBug	Design debugging tools
Wappalyzer	Detects technologies used by a website
WAVE Evaluation Tool	Adds tools for accessibility testing
Web Developer	Toolbar with various development helpers
Web Vitals	Website health metrics
WhatFont	Shows used font family on hover

Other Software

The following is a list of further Software I usually get for development and testing purposes.

Browsers

Name	Source	Description
Google Chrome	Website	Primary browser
Mozilla Firefox	Store, Website	Additional browser

Design

Name	Source	Description
Figma	Website	Design, Wireframing, Prototyping
Just Color Picker	Website	Global color picker
ScreenToGif	Website	GIF screen recorder (e.g. for docs, PRs)

Development Tools

Name	Source	Description
Notepad++	Website	Universal file editor
Postman	Website	HTTP API testing
WinMerge	Website	Compare files and folders
Fiddler Classic	Website	Analyze HTTP / HTTPS traffic, simulate corporate proxy
Firecamp	Website	HTTP / GraphQL / WebSocket API testing
Hoppscotch (prev. Postwoman)	Website	HTTP / WebSocket & SSE API testing
GitHub CLI	Website	GitHub CLI
NVDA	Website	Screenreader (for testing accessibility)
FileZilla	Website	Simple FTP Client
pgAdmin	Website	PostgreSQL database tool
MongoDB Compass	Website	MongoDB database tool
MQTT Explorer	Website	MQTT testing
Docker Desktop	Website	Docker container management
MiniKube	Website	Running Kubernetes clusters locally
kubectl	Website	Manage Kubernetes clusters
k9s	Website	Manage Kubernetes clusters