Skip to content

My personal development setup, for Frontend Development on Windows.

Notifications You must be signed in to change notification settings

dominique-mueller/my-development-setup

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 

Repository files navigation

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