Developer Setup

Every master has his own tools for his work. Those tools are what make unique and efficient the work of the master. There are no best or greater tools, only good or bad masters. Those are the tools, which help me and make my work a f- great place to work in.

Note that I work on Windows, so this post is focused mainly on Windows Tools, but multiple of those tools are also compatible with Linux or Mac or accessible using WSL (Windows Subsystem for Linux).

I will divide my setup and configuration into three sections:

  1. Software & Tools
  2. WSL & Terminal Setup
  3. VS Code Extensions

Software & Tools

Depending on your area of expertise, those may vary. But in my case for Web and Software development, those are the ones I frequent more.

  • GitKraken: On a daily bases, I handle many git repositories and even though I love using the terminal for quick and short actions, a good GUI always makes life easier. In this case, Gitkraken is the one of choice, because of its great UI/UX, readability, and features. It requires a PAID version, for private repositories, but even with that is worth the money.
    GitKraken capture
  • Windows Terminal: Windows never stood out for its Terminal, but in recent years it did release an awesome piece of software to handle all terminal available, with great visualizacion and support for any modern developer. It hanldes CMD, powershell, bash, WSL instances, azure or any other shell.Windows never stood out for its Terminal, but in recent years it did release an awesome piece of software to handle all shells available, with great visualization and support for any modern developer. It handles CMD, PowerShell, bash, WSL instances, azure, or any other shell.
    GitWindows Terminal capture
  • PowerToys: Whether or not you are a developer, PowerToys is a great companion for windows that brings many utilities for power users to tune and streamline their Windows experience for greater productivity.
    PowerToys capture
  • RunJS: If you are a web developer or you feel comformable using JS/TS, RunJS is an awesome playground for desktop for testing scripts or quick operations. It gives you access to Node and Browser APIs on a level of versatility that is not possible in a standard REPL or Chrome console.
    RunJS capture
  • Visual Studio Profesional 2022: My IDE of choice when working on backend projects based on C#, VB, .NET, or C++ development for videogame modding. Trusted and reliable, does have all the features needed at any level.
  • VS Code: My Text editor of preference. I tried many, free and paid, and for me, VS Code just has a personalization, that no other editor gives me.
    VS Code capture
  • WSL (Ubuntu & Debian): Windows does not offer a great shell for web developemnt and what a better shell that what linux gives you? The best way to work in linux but working from windows.
    WSL capture
  • Bitwarden: Just a great Open Source password manager. I do handly hundreds of passwords of many sites and having them centralized is just amazing, for desktop and mobile.
  • Snipaste: One of my daily favorite tools to use. I give a streamlined experience with snips and overlay pasting, really useful for temporarily sticking to the monitor any snip. It does allow editing and adding arrows, text, and blur to the image directly withouts any secondary step. Once you use it for first time, there's no going back.
    Snipaste capture
  • Notion: Notion is part wiki, part database, and part note-taking app. It combines the best of all types in just one software. I use it mainly because it is hosted on the cloud, so I can access it anywhere.
  • Linear: Im always in the search for the best tool for managing software development, for the last year if been hook to Linear, it helps streamline software projects, sprints, tasks, and bug tracking. Does have a great and confortable UI.
    Linear capture
  • Postman: It's an out-of-the-box tool for Full Life Cycle API Management that gives a great set of tools for testing and visualizing any API or socket.

WSL & Terminal Setup

COMING SOON, more on:byjokese/dotfiles.

VS Code Extensions

The follow-up section includes a list of extensions and configurations I have in my VS Code.

Themes & Icon Packs
+

For theming, I like to have a dark mode turned on with contrasting colors on semantics and icons. My current theme is One Dark Pro Darker with vivid colors and Tykyo theme.

||

And For my Icon Pack set, I use the Material Icons. It provides a huge variety of colorful icons.

||
Git Related
+

Git is the universal and most used version control system. Having great tools helps a lot in navigating and searching for information in development.

||
||
||
||
Web Development
+

A set of my favorite web developemnt especific extensions.

||
||
||
||
||
||
||
||
||
||
General Extensions
+

This section pretends to add a general set of extensions, not necesarily essential, but helpful and do make a better editor for me.

||
||
||
||
||
||
||
||
||
||
||
||
||
||
||
||
||
||
Language or Framework Related
+

Adding special framework supports helps a lot in being efficient during development, here there are the ones I work most with.

Angular

||

Astro

||

Deno

||

Markdown

||
||
||
||
||
||

Go

||

React

||

YAML

||

If you are interested in all my editor settings and configurations, for all the extensions above, feel free to take a look at my settings.json. Some API keys and sensitive data has been

[MASKED]
, remember to replace them.

{
    "[css]": {
        "editor.defaultFormatter": "stylelint.vscode-stylelint"
    },
    "[html]": {
        "editor.defaultFormatter": "vscode.html-language-features"
    },
    "[javascript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    "[json]": {
        "editor.defaultFormatter": "vscode.json-language-features"
    },
    "[jsonc]": {
        "editor.defaultFormatter": "vscode.json-language-features"
    },
    "[postcss]": {
        "editor.defaultFormatter": "stylelint.vscode-stylelint"
    },
    "[scss]": {
        "editor.defaultFormatter": "stylelint.vscode-stylelint"
    },
    "[typescript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    "[typescriptreact]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    "cmake.configureOnOpen": true,
    "codestats.apikey": "[MASKED]",
    "codestats.username": "[MASKED]",
    "codestream.email": "[MASKED]",
    "codestream.serverUrl": "[MASKED]",
    "css.lint.important": "warning",
    "debug.onTaskErrors": "showErrors",
    "editor.autoClosingBrackets": "always",
    "editor.bracketPairColorization.enabled": true,
    "editor.bracketPairColorization.independentColorPoolPerBracketType": true,
    "editor.fontFamily": "'Cascadia Code',  monospace",
    "editor.fontLigatures": true,
    "editor.fontSize": 13.5,
    "editor.fontWeight": "400",
    "editor.guides.bracketPairs": true,
    "editor.inlineSuggest.enabled": true,
    "editor.minimap.enabled": true,
    "editor.rulers": [
        {
            "color": "#595959",
            "column": 160
        }
    ],
    "editor.stickyScroll.enabled": true,
    "editor.suggest.insertMode": "replace",
    "editor.suggest.showStatusBar": true,
    "editor.suggestSelection": "first",
    "editor.tokenColorCustomizations": {
        "textMateRules": [
            {
                "scope": "keyword.other.dotenv",
                "settings": {
                    "foreground": "#FF000005"
                }
            }
        ]
    },
    "editor.unicodeHighlight.includeComments": true,
    "editor.unicodeHighlight.nonBasicASCII": false,
    "emmet.includeLanguages": {
        "razor": "html"
    },
    "emmet.syntaxProfiles": {
        "postcss": "css"
    },
    "errorLens.enabled": true,
    "eslint.alwaysShowStatus": true,
    "eslint.codeActionsOnSave.mode": "problems",
    "eslint.lintTask.enable": true,
    "explorer.confirmDelete": false,
    "explorer.confirmDragAndDrop": false,
    "files.associations": {
        "*.css": "tailwindcss"
    },
    "files.autoSave": "afterDelay",
    "files.exclude": {
        "**/.classpath": true,
        "**/.factorypath": true,
        "**/.project": true,
        "**/.settings": true
    },
    "firefox.keepProfileChanges": true,
    "firefox.profileDir": "[MASKED]",
    "git.branchPrefix": "feature",
    "git.branchProtection": [
        "develop",
        "main",
        "master"
    ],
    "git.branchProtectionPrompt": "alwaysCommitToNewBranch",
    "github.copilot.enable": {
        "*": true
    },
    "gitlens.fileAnnotations.command": "blame",
    "grunt.autoDetect": "on",
    "gulp.autoDetect": "on",
    "javascript.inlayHints.functionLikeReturnTypes.enabled": true,
    "javascript.preferences.quoteStyle": "single",
    "javascript.updateImportsOnFileMove.enabled": "always",
    "liveServer.settings.donotShowInfoMsg": true,
    "markdown.experimental.updateLinksOnFileMove.enabled": "prompt",
    "notebook.cellToolbarLocation": {
        "default": "right",
        "jupyter-notebook": "left"
    },
    "oneDarkPro.editorTheme": "Tokyo",
    "oneDarkPro.vivid": true,
    "powermode.combo.counterEnabled": "hide",
    "powermode.combo.location": "off",
    "powermode.enabled": true,
    "powermode.explosions.frequency": 1,
    "powermode.explosions.offset": 1,
    "powermode.explosions.size": 7,
    "powermode.presets": "flames",
    "powermode.shake.enabled": false,
    "powermode.shake.intensity": 1,
    "prettier.printWidth": 250,
    "prettier.tabWidth": 4,
    "remove-empty-lines.allowedNumberOfEmptyLines": 1,
    "security.workspace.trust.untrustedFiles": "open",
    "terminal.external.windowsExec": "ps",
    "terminal.integrated.enableBell": true,
    "terminal.integrated.enableMultiLinePasteWarning": false,
    "terminal.integrated.fontFamily": "CaskaydiaCove Nerd Font, monospace",
    "terminal.integrated.persistentSessionReviveProcess": "onExitAndWindowClose",
    "terminal.integrated.shellIntegration.enabled": true,
    "terminal.integrated.smoothScrolling": true,
    "typescript.inlayHints.functionLikeReturnTypes.enabled": true,
    "typescript.updateImportsOnFileMove.enabled": "always",
    "vsicons.dontShowNewVersionMessage": true,
    "window.commandCenter": true,
    "window.dialogStyle": "custom",
    "window.menuBarVisibility": "compact",
    "workbench.colorCustomizations": {
        "editorOverviewRuler.unicodeForeground": "#0000ff",
        "editorUnicodeHighlight.border": "#00ff37",
        "minimap.unicodeHighlight": "#0000ff"
    },
    "workbench.colorTheme": "One Dark Pro Darker",
    "workbench.editor.decorations.badges": true,
    "workbench.editor.pinnedTabSizing": "shrink",
    "workbench.editor.untitled.hint": "hidden",
    "workbench.editor.wrapTabs": true,
    "workbench.editorAssociations": {
        "*.ipynb": "jupyter-notebook",
        "git-rebase-todo": "default"
    },
    "workbench.experimental.settingsProfiles.enabled": true,
    "workbench.iconTheme": "material-icon-theme",
    "workbench.sideBar.location": "right",
    "workbench.tree.expandMode": "doubleClick"
}

As seen in the settings, my font of choice is Cascadia Code with nerdfont aggregator (Caskaydia Cove Ner Font).

Finally, I will leave here a full list of unprocessed extensions that you can use too script and install all of them in VS Code.

code --install-extension replace-with.extension-name
alefragnani.Bookmarks
alexcvzz.vscode-sqlite
Angular.ng-template
appland.appmap
Armitxes.sqf
astro-build.astro-vscode
AykutSarac.jsoncrack-vscode
bierner.github-markdown-preview
bierner.markdown-checkbox
bierner.markdown-emoji
bierner.markdown-footnotes
bierner.markdown-mermaid
bierner.markdown-preview-github-styles
billw2011.sqf-debugger
bradlc.vscode-tailwindcss
burkeholland.simple-react-snippets
chrmarti.regex
CodeStream.codestream
codezombiech.gitignore
cpylua.language-postcss
cschlosser.doxdocgen
csstools.postcss
dbaeumer.vscode-eslint
denoland.vscode-deno
donjayamanne.githistory
dotenv.dotenv-vscode
eamodio.gitlens
EditorConfig.EditorConfig
esbenp.prettier-vscode
firefox-devtools.vscode-firefox-debug
firsttris.vscode-jest-runner
formulahendry.auto-rename-tag
formulahendry.code-runner
GitHub.copilot-labs
GitHub.copilot-nightly
golang.go
GraphQL.vscode-graphql
GraphQL.vscode-graphql-syntax
hoovercj.vscode-power-mode
jeff-hykin.better-cpp-syntax
jeff-hykin.polacode-2019
josetr.cmake-language-support-vscode
juanallo.vscode-dependency-cruiser
kamikillerto.vscode-colorize
kisstkondoros.csstriggers
kisstkondoros.vscode-gutter-preview
MarkosTh09.color-picker
mhutchie.git-graph
mongodb.mongodb-vscode
ms-azuretools.vscode-azureappservice
ms-azuretools.vscode-azureresourcegroups
ms-azuretools.vscode-docker
ms-dotnettools.csharp
ms-dotnettools.vscode-dotnet-runtime
ms-playwright.playwright
ms-python.python
ms-python.vscode-pylance
ms-toolsai.jupyter
ms-toolsai.jupyter-keymap
ms-toolsai.jupyter-renderers
ms-toolsai.vscode-jupyter-cell-tags
ms-toolsai.vscode-jupyter-slideshow
ms-vscode-remote.remote-containers
ms-vscode-remote.remote-ssh
ms-vscode-remote.remote-ssh-edit
ms-vscode-remote.remote-wsl
ms-vscode.azure-account
ms-vscode.cmake-tools
ms-vscode.cpptools
ms-vscode.cpptools-extension-pack
ms-vscode.test-adapter-converter
ms-vsliveshare.vsliveshare
ms-vsliveshare.vsliveshare-audio
ms-vsliveshare.vsliveshare-pack
mtxr.sqltools
nrwl.angular-console
oderwat.indent-rainbow
Orta.vscode-jest
pflannery.vscode-versionlens
PKief.material-icon-theme
redhat.vscode-yaml
ritwickdey.LiveServer
riussi.code-stats-vscode
shardulm94.trailing-spaces
sleistner.vscode-fileutils
softwaredotcom.swdc-vscode
stackbreak.comment-divider
stylelint.vscode-stylelint
traBpUkciP.wolf
twxs.cmake
Tyriar.lorem-ipsum
usernamehw.errorlens
usernamehw.remove-empty-lines
VisualStudioExptTeam.intellicode-api-usage-examples
VisualStudioExptTeam.vscodeintellicode
vsciot-vscode.vscode-arduino
vscode-icons-team.vscode-icons
WakaTime.vscode-wakatime
wayou.vscode-todo-highlight
wix.vscode-import-cost
zhuangtongfa.material-theme

And that's it, I hope you find this useful, and if you have any suggestion, please let me know.