Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dominique-mueller/my-development-setup
My personal development setup, for Frontend Development on Windows.
https://github.com/dominique-mueller/my-development-setup
chrome conemu development environment frontend git node npm powershell setup vscode windows
Last synced: 10 days ago
JSON representation
My personal development setup, for Frontend Development on Windows.
- Host: GitHub
- URL: https://github.com/dominique-mueller/my-development-setup
- Owner: dominique-mueller
- Created: 2018-03-03T14:11:22.000Z (over 6 years ago)
- Default Branch: main
- Last Pushed: 2023-10-09T22:54:12.000Z (about 1 year ago)
- Last Synced: 2024-10-12T08:23:57.189Z (26 days ago)
- Topics: chrome, conemu, development, environment, frontend, git, node, npm, powershell, setup, vscode, windows
- Homepage:
- Size: 82 KB
- Stars: 7
- Watchers: 2
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- jimsghstars - dominique-mueller/my-development-setup - My personal development setup, for Frontend Development on Windows. (Others)
README
# My Development Setup
My personal development setup, for Frontend Development on Windows.
## Code Editor: [Visual Studio Code](https://code.visualstudio.com/)
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](https://www.jetbrains.com/de-de/idea/download/#section=windows)** for that.
### Theme
I am currently using my own custom theme **[Deep Ocean](https://marketplace.visualstudio.com/items?itemName=itsdevdom.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](https://www.monolisa.dev/)** 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](https://github.com/microsoft/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](https://marketplace.visualstudio.com/items?itemName=Angular.ng-template)** | Improve editing experience in Angular HTML templates |
| **[Auto Close Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag)** | Automatically close paired HTML / XML / JSX tags |
| **[Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)** | Automatically rename paired HTML / XML / JSX tags |
| **[Better Comments](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments)** | Improved code comment colorization |
| **[Cloak](https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-cloak)** | Hide secrets in env files |
| **[CodeMetrics](https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-codemetrics)** | Code complexity computation in JavaScript / TypeScript |
| **[Color Highlight](https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight)** | Highlight colors |
| **[DotENV](https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv)** | Support for dotenv file syntax |
| **[EditorConfig](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig)** | Apply settings defined in .editconfig file |
| **[Error Lens](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens)** | Improve error and warning highlighting |
| **[ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)** | ESLint support |
| **[Git History](https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory)** | Enhanced Git |
| **[GitHub Markdown Preview (Extension Pack)](https://marketplace.visualstudio.com/items?itemName=bierner.github-markdown-preview)** | Markdown Preview, using the Github Theme |
| **[GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)** | Enhanced Git |
| **[Guides](https://marketplace.visualstudio.com/items?itemName=spywhere.guides)** | Indentation guide lines |
| **[Image Preview](https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-gutter-preview)** | Image previews within gutter |
| **[IntelliCode](https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode)** | AI-assist |
| **[IntelliCode API Usage Examples](https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.intellicode-api-usage-examples)** | Code examples |
| **[JSON5 syntax](https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-json5)** | JSON5 language support |
| **[Kubernetes](https://marketplace.visualstudio.com/items?itemName=ms-kubernetes-tools.vscode-kubernetes-tools)** | Kubernetes support |
| **[Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare)** | Real-time collaboration |
| **[MDX](https://marketplace.visualstudio.com/items?itemName=silvenon.mdx)** | MDX language support |
| **[Open in Browser](https://marketplace.visualstudio.com/items?itemName=techer.open-in-browser)** | Open HTML files in browser(s) |
| **[Partial Diff](https://marketplace.visualstudio.com/items?itemName=ryu1kn.partial-diff)** | Diffing tool |
| **[Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)** | Prettier |
| **[Sass](https://marketplace.visualstudio.com/items?itemName=Syler.sass-indented)** | SASS language support |
| **[Sass Lint](https://marketplace.visualstudio.com/items?itemName=glen-84.sass-lint)** | SASS linter |
| **[Sort JS object keys](https://marketplace.visualstudio.com/items?itemName=zengxingxin.sort-js-object-keys)** | Quickly sort JS objects by key |
| **[Sort JSON objects](https://marketplace.visualstudio.com/items?itemName=richie5um2.vscode-sort-json)** | Quickly sort JSON objects by key |
| **[Sort lines](https://marketplace.visualstudio.com/items?itemName=Tyriar.sort-lines)** | Quickly sort lines in different ways / by different criteria |
| **[Sync Scroll](https://marketplace.visualstudio.com/items?itemName=dqisme.sync-scroll)** | Synchronize scolling across editor tabs |
| **[TODO Highlight](https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight)** | Highlight TODOs, FIXMEs and similar comments |
| **[Todo Tree](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree)** | Panel listing all TODO comments |
| **[Total TypeScript](https://marketplace.visualstudio.com/items?itemName=mattpocock.ts-error-translator)** | Improved TypeScript error messages |
| **[Trailing Spaces](https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces)** | Highlighting and auto-removal of trailing spaces |
| **[Version Lens](https://marketplace.visualstudio.com/items?itemName=pflannery.vscode-versionlens)** | Dependency version infos in `package.json` |
| **[XML](https://marketplace.visualstudio.com/items?itemName=redhat.vscode-xml)** | XML language support |
| **[YAML](https://marketplace.visualstudio.com/items?itemName=redhat.vscode-yaml)** | YAML language support |
### Settings
The following are my settings (includes settings for extensions, theme, font, ...):
```json
{
"[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:
```javascript
[
{
key: 'ctrl+shift+space',
command: 'editor.action.commentLine',
when: 'editorTextFocus && !editorReadonly',
},
{
key: 'ctrl+shift+alt+f4',
command: 'workbench.action.reloadWindow',
},
];
```
## Console: [ConEmu](https://conemu.github.io/en/Downloads.html) running [PowerShell](https://www.microsoft.com/store/productId/9MZ1SNWT0N5D)
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](https://www.microsoft.com/store/productId/9N0DX20HK701) 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):
```powershell
Notepad $profile
```
Add following configuration:
```powershell
# Autocomple based on history, via arrow keys
Set-PSReadlineKeyHandler -Key UpArrow -Function HistorySearchBackward
Set-PSReadlineKeyHandler -Key DownArrow -Function HistorySearchForward
```
### PowerShell Extension: [PoshGit](https://github.com/dahlbyk/posh-git) 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:
```powershell
PowerShellGet\Install-Module posh-git -Scope CurrentUser -Force
Add-PoshGitToProfile -AllHosts
```
## Version Control: [Git](https://git-scm.com/)
Version Control Software, accessibly via command line.
### Settings
Look at the current configuration using:
```bash
git config --global --list
```
Add options using:
```bash
git config --global user.name
git config --global user.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](https://blog.scottnonnenberg.com/better-git-configuration/)**.
### Commit Signing with GPG
Sometimes it is a good idea / might be required to setup **[Commit Signing via GPG](https://help.github.com/articles/signing-commits-with-gpg/)**.
After installing **[GNU (for Windows)](https://gnupg.org/download/)**, continue **[generating a new GPG key and make it available to GitHub](https://help.github.com/articles/generating-a-new-gpg-key/)**. Then, use the following coniguration for Git:
```conf
user.signingkey=
commit.gpgsign=true
gpg.program=C:\Program Files (x86)\GnuPG\bin\gpg.exe
```
## Runtime: [NodeJS](https://nodejs.org/)
I manage multiple NodeJS versions via **[Volta](https://github.com/volta-cli/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:
```bash
volta install node@
```
## Browser: [Google Chrome](https://www.google.de/chrome/index.html)
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](https://chrome.google.com/webstore/detail/augury/elgalmkoelokbchhkhacckoklkejnhcd)** | Adds tools for debugging and profiling Angular applications |
| **[aXe](https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd)** | Adds tools for accessibility testing |
| **[Baseliner](https://chrome.google.com/webstore/detail/baseliner/agoopbiflnjadjfbhimhlmcbgmdgldld)** | Show lines for vertical rhythm |
| **[ChromeLens](https://chrome.google.com/webstore/detail/chromelens/idikgljglpfilbhaboonnpnnincjhjkd)** | Simulates visual impairments |
| **[ColorZilla](https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp)** | Color Picker |
| **[Contributors on GitHub](https://chrome.google.com/webstore/detail/contributors-on-github/cjbacdldhllelehomkmlniifaojgaeph)** | Shows contribution details on GitHub PRs |
| **[Dimensions](https://chrome.google.com/webstore/detail/dimensions/baocaagndhipibgklemoalmkljaimfdj)** | Measure dimensions of elements on hover |
| **[Feature Queries Manager](https://chrome.google.com/webstore/detail/feature-queries-manager/fbhgnconlfgmienbmpbeeenffagggonp)** | Manage CSS feature queries |
| **[Fireshot](https://chrome.google.com/webstore/detail/take-webpage-screenshots/mcbpblocgmgfnpjjppndjkmgjaogfceg)** | Makes full-sized screenshots |
| **[Mindful](https://chrome.google.com/webstore/detail/mindful-beta/cieekmjjdkckhpidgaffphlaljdfhhab)** | Shows a beautiful notepad as the new tab page |
| **[JSON Formatter](https://chrome.google.com/webstore/detail/json-formatter/bcjindcccaagfpapjjmafapmmgkkhgoa)** | Formats JSON files opened in the browser |
| **[Pesticide](https://chrome.google.com/webstore/detail/pesticide-for-chrome/bblbgcheenepgnnajgfpiicnbbdmmooh)** | Shows elements outlines |
| **[GitHub Markdown Menu](https://chrome.google.com/webstore/detail/github-markdown-menu/jekgocfoijmbgcjejohdgmojaejofdpo)** | Shows a markdown table of contents as a dropdown menu |
| **[React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi)** | Adds tools for debugging and profiling React applications |
| **[Tab Size on GitHub](https://chrome.google.com/webstore/detail/tab-size-on-github/ofjbgncegkdemndciafljngjbdpfmbkn)** | Decreases GitHub indentation wideness |
| **[VisBug](https://chrome.google.com/webstore/detail/visbug/cdockenadnadldjbbgcallicgledbeoc)** | Design debugging tools |
| **[Wappalyzer](https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg)** | Detects technologies used by a website |
| **[WAVE Evaluation Tool](https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh)** | Adds tools for accessibility testing |
| **[Web Developer](https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm)** | Toolbar with various development helpers |
| **[Web Vitals](https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma)** | Website health metrics |
| **[WhatFont](https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm)** | 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](https://www.google.de/chrome/index.html) | Primary browser |
| **Mozilla Firefox** | [Store](https://www.microsoft.com/store/productId/9NZVDKPMR9RD), [Website](https://www.mozilla.org/en-US/firefox/browsers/) | Additional browser |
### Design
| Name | Source | Description |
| --------------------- | ------------------------------------------------------ | ---------------------------------------- |
| **Figma** | [Website](https://www.figma.com/de/downloads) | Design, Wireframing, Prototyping |
| **Just Color Picker** | [Website](https://annystudio.com/software/colorpicker) | Global color picker |
| **ScreenToGif** | [Website](https://www.screentogif.com) | GIF screen recorder (e.g. for docs, PRs) |
### Development Tools
| Name | Source | Description |
| -------------------------------- | ------------------------------------------------------------------ | ------------------------------------------------------ |
| **Notepad++** | [Website](https://notepad-plus-plus.org/downloads) | Universal file editor |
| **Postman** | [Website](https://www.getpostman.com) | HTTP API testing |
| **WinMerge** | [Website](https://winmerge.org) | Compare files and folders |
| **Fiddler Classic** | [Website](https://www.telerik.com/fiddler/fiddler-classic) | Analyze HTTP / HTTPS traffic, simulate corporate proxy |
| **Firecamp** | [Website](https://firecamp.io) | HTTP / GraphQL / WebSocket API testing |
| **Hoppscotch (prev. Postwoman)** | [Website](https://hoppscotch.io) | HTTP / WebSocket & SSE API testing |
| **GitHub CLI** | [Website](https://cli.github.com/) | GitHub CLI |
| **NVDA** | [Website](http://nvda.bhvd.de) | Screenreader (for testing accessibility) |
| **FileZilla** | [Website](https://filezilla-project.org) | Simple FTP Client |
| **pgAdmin** | [Website](https://www.pgadmin.org/download/pgadmin-4-windows) | PostgreSQL database tool |
| **MongoDB Compass** | [Website](https://www.mongodb.com/try/download/compass) | MongoDB database tool |
| **MQTT Explorer** | [Website](http://mqtt-explorer.com) | MQTT testing |
| **Docker Desktop** | [Website](https://docs.docker.com/desktop/install/windows-install) | Docker container management |
| **MiniKube** | [Website](https://minikube.sigs.k8s.io/docs) | Running Kubernetes clusters locally |
| **kubectl** | [Website](https://kubernetes.io/docs/tasks/tools) | Manage Kubernetes clusters |
| **k9s** | [Website](https://k9scli.io/) | Manage Kubernetes clusters |