My Developer Workbench
Overview
Today, I'd like to share some of my developer workbench and the software I regularly use. I have categorized them as follows:
Essential Software
Implementation Software
VS Code Extensions
Note: My primary development machine runs on macOS.
Essential Software
| Software | Description |
|---|---|
| 1Password | Password manager. Also setup to manage SSH keys. |
| Racycast | Open apps, perform actions, and other workflows with hotkeys. |
| Backblaze | Continuous backups with unlimited storage. |
| bash | Preferred shell. |
| BetterTouchTool | Customize aspects of your mac's trackpad, touch-bar, snap areas, and more. |
| Discord | Chat application for personal dev communities and the React community. |
| Docker | Running containers/devcontainers locally. |
| git and GitHub CLI | Command-line access to GitHub specific functionality. |
| Hazel | Automated file organization. |
| Homebrew / Cask | Enables installing software from the command line. |
| iTerm 2 | Stand-alone terminal supporting different visual styles. |
| Karabiner Elements | Keyboard customizer. |
| Lens | K8s IDE for managing K8s clusters. |
| SnagIt | Capture screenshots or record your screen. Provides tooling to edit and markup images. |
| Tailscale | Securely access your network from anywhere. |
| VS Code | Primary editor. |
Implementation Software
| Software | Description |
|---|---|
| ansible | Tool to help audomate IT and infrastructure. |
| asdf | Manage multiple versions of installed languages; such as Node.js, python, go, etc. |
| D2 | Text based diagramming langugage. |
| jq | Bash tool for parsing and manipulating JSON. |
| jsonnet | Bash tool for generating JSON from a template. |
| kubectl | Kubernetes management |
| Proxmox | Bare-metal hypervisor I use at home to manage and virtualize environments/machines. |
| terraform | Automate the provision of virtual machines on a variety of platforms/hypervisors. |
| yq | Bash tool for parsing and manipulating YAML. |
VS Code Extensions
I created a simple bash script to pull these extensions from my VS Code installation. You can find it at the bottom of this page.
Assumes you have
jqinstalled from the above list.
| Extension Name | Description |
|---|---|
| 1Password | Say goodbye to plaintext secrets in your code |
| Elixir Test Explorer | Run Elixir tests in the Sidebar of Visual Studio Code |
| Bookmarks | Mark lines and jump to them |
| Jest Snippets | Jest snippets |
| Apollo GraphQL | Rich editor support for GraphQL client and server development that seamlessly integrates with the Apollo platform |
| ZipFS - a zip file system | Allows to easily inspect and modify files stored within zip archives. |
| GitHub Markdown Preview | Changes VS Code's built-in markdown preview to match GitHub |
| Markdown Checkboxes | Adds checkbox support to the built-in markdown preview |
| Markdown Emoji | Adds emoji syntax support to VS Code's built-in markdown preview and markdown cells in notebook |
| Markdown Footnotes | Adds [^footnote] syntax support to VS Code's built-in markdown preview |
| Markdown Preview Mermaid Support | Adds Mermaid diagram and flowchart support to VS Code's builtin markdown preview |
| Markdown Preview Github Styling | Changes VS Code's built-in markdown preview to match Github's style |
| Markdown yaml Preamble | Renders yaml front matter as a table in the built-in markdown preview |
| exports autocomplete | autocompletes javascript module exports from your project |
| JS CodeFormer: Javascript Refactoring & Code Automation | A JavaScript/TypeScript refactoring and code automation tool for building better source |
| JS Refactor :: JS CodeFormer | Automated refactoring tools to smooth your development workflow |
| Codecov YAML Validator | Codecov's official validator extension for Visual Studio Code, it helps with setup and configuration of new repositories. |
| Jsonnet LSP | Jsonnet IDE Support. Autocomplete, lint, format, goto def, signature help. |
| markdownlint | Markdown linting and style checking for Visual Studio Code |
| ESLint | Integrates ESLint JavaScript into VS Code. |
| EJS language support | 2019 - EJS language support for Visual Studio Code. |
| null | null |
| eslint-disable-snippets | Simple snippets to disable eslint rules |
| GitLens — Git supercharged | Supercharge Git within VS Code — Visualize code authorship at a glance via Git blame annotations and CodeLens, seamlessly navigate and explore Git repositories, gain valuable insights via rich visualizations and powerful comparison commands, and so much more |
| EditorConfig for VS Code | EditorConfig Support for Visual Studio Code |
| Prettier - Code formatter | Code formatter using prettier |
| shell-format | A formatter for shell scripts, Dockerfile, gitignore, dotenv, /etc/hosts, jvmoptions, and other file types |
| HCL Format | format HCL (HashiCorp Configuration Language) |
| GitHub Codespaces | Your instant dev environment |
| GitHub Copilot | Your AI pair programmer |
| GitHub Copilot Chat | AI chat features powered by Copilot |
| GitHub Repositories | Remotely browse and edit any GitHub repository |
| GitHub Actions | GitHub Actions workflows and runs for github.com hosted repositories in VS Code |
| GitHub Pull Requests | Pull Request and Issue Provider for GitHub |
| Jsonnet Language Server | Full code support (formatting, highlighting, navigation, debugging etc) for Jsonnet |
| Excel Viewer | Edit Excel spreadsheets and CSV files in Visual Studio Code and VS Code for the Web. |
| GraphQL: Language Feature Support | GraphQL LSP extension that adds autocompletion, validation, go to definition, hover, outline and more. |
| GraphQL: Syntax Highlighting | Adds syntax highlighting support for .graphql & embedded support for javascript, typescript, vue, markdown, python, php, reason, ocaml and rescript |
| HashiCorp Terraform | Syntax highlighting and autocompletion for Terraform |
| Test Explorer UI | Run your tests in the Sidebar of Visual Studio Code |
| Test Explorer Live Share | Use the Test Explorer in your Visual Studio Live Share sessions |
| REST Client | REST Client for Visual Studio Code |
| Flux | Flux language extension for VSCode |
| ElixirLS: Elixir support and debugger | Elixir support with debugger, autocomplete, and more - Powered by ElixirLS. |
| vscode-styled-sort | Opinionated rule sorting for styled-components. |
| Presentation Mode | Show your code properly in a presentation |
| Jest Test Explorer | Run your Jest tests in the Sidebar of Visual Studio Code |
| CodeMetrics | Computes complexity in TypeScript / JavaScript files. |
| DotENV | Support for dotenv file syntax |
| File Downloader | Exposes an API that allows other extensions to download files. |
| Docker | Makes it easy to create, manage, and debug containerized applications. |
| C# Dev Kit | Official C# extension from Microsoft |
| C# | Base language support for C# |
| .NET Install Tool | This extension installs and manages different versions of the .NET SDK and Runtime. |
| autopep8 | Formatting support for Python files using the autopep8 formatter. |
| Python Debugger | Python Debugger extension using debugpy. |
| Python | Python language support with extension access points for IntelliSense (Pylance), Debugging (Python Debugger), linting, formatting, refactoring, unit tests, and more. |
| Pylance | A performant, feature-rich language server for Python in VS Code |
| Dev Containers | Open any folder or repository inside a Docker container and take advantage of Visual Studio Code's full feature set. |
| Remote - SSH | Open any folder on a remote machine using SSH and take advantage of VS Code's full feature set. |
| Remote - SSH: Editing Configuration Files | Edit SSH configuration files |
| WSL | Open any folder in the Windows Subsystem for Linux (WSL) and take advantage of Visual Studio Code's full feature set. |
| Remote Development | An extension pack that lets you open any folder in a container, on a remote machine, or in WSL and take advantage of VS Code's full feature set. |
| Azure Account | A common Sign In and Subscription management extension for VS Code. |
| Live Preview | Hosts a local server in your workspace for you to preview your webpages on. |
| PowerShell | Develop PowerShell modules, commands and scripts in Visual Studio Code! |
| Remote Explorer | View remote machines for SSH and Tunnels. |
| Remote Repositories | Remotely browse and edit git repositories |
| Remote - Tunnels | Connect to a remote machine through a Tunnel |
| Test Adapter Converter | Converter extension from the Test Adapter UI to native VS Code testing |
| Live Share | Real-time collaborative development from the comfort of your favorite tools. |
| Nx Console | The UI for Nx & Lerna |
| Jest | Use Facebook's Jest With Pleasure. |
| CSS-in-JS | CSS-in-JS autocomplete and conversion |
| Version Lens | Shows the latest version for each package using code lens |
| Polacode | 📸 Polaroid for your code |
| Prisma | Adds syntax highlighting, formatting, auto-completion, jump-to-definition and linting for .prisma files. |
| XML | XML Language Support by Red Hat |
| YAML | YAML Language Support by Red Hat, with built-in Kubernetes syntax support |
| VSMqtt | VSMqtt is a simple MQTT client integrated in vscode. |
| Better Jinja | Syntax highlighting for jinja(2) including HTML, Markdown, YAML, Ruby and LaTeX templates |
| JavaScript Booster | Boost your productivity with advanced JavaScript/TypeScript refactorings and commands |
| Trx viewer | Allows visualizing .trx files. |
| MDX (deprecated) | Provides syntax highlighting and bracket matching for MDX (JSX in Markdown) files. |
| Auto Import | Automatically finds, parses and provides code actions and code completion for all available imports. Works with Typescript and TSX |
| Code Spell Checker | Spelling checker for source code |
| vscode-styled-components | Syntax highlighting for styled-components |
| Even Better TOML | Fully-featured TOML support |
| D2 | Support for .d2 files. |
| MDX | Language support for MDX |
| BNF & EBNF Highlighting | BNF for Visual Studio Code |
| CodeTour | VS Code extension that allows you to record and playback guided tours of codebases, directly within the editor |
| Import Cost | Display import/require package size in the editor |
| MDX Preview | MDX Preview |
| Markdown All in One | All you need to write Markdown (keyboard shortcuts, table of contents, auto preview and more) |
code --install-extension 1password.op-vscode
code --install-extension adamzapasnik.elixir-test-explorer
code --install-extension alefragnani.bookmarks
code --install-extension andrew-codes.jest-snippets
code --install-extension apollographql.vscode-apollo
code --install-extension arcanis.vscode-zipfs
code --install-extension bierner.github-markdown-preview
code --install-extension bierner.markdown-checkbox
code --install-extension bierner.markdown-emoji
code --install-extension bierner.markdown-footnotes
code --install-extension bierner.markdown-mermaid
code --install-extension bierner.markdown-preview-github-styles
code --install-extension bierner.markdown-yaml-preamble
code --install-extension capaj.vscode-exports-autocomplete
code --install-extension cmstead.js-codeformer
code --install-extension cmstead.jsrefactor
code --install-extension codecov.codecov
code --install-extension cverge.jsonnet-lsp
code --install-extension davidanson.vscode-markdownlint
code --install-extension dbaeumer.vscode-eslint
code --install-extension digitalbrainstem.javascript-ejs-support
code --install-extension dracula-theme-pro.theme-dracula-pro
code --install-extension drknoxy.eslint-disable-snippets
code --install-extension eamodio.gitlens
code --install-extension editorconfig.editorconfig
code --install-extension esbenp.prettier-vscode
code --install-extension foxundermoon.shell-format
code --install-extension fredwangwang.vscode-hcl-format
code --install-extension github.codespaces
code --install-extension github.copilot
code --install-extension github.copilot-chat
code --install-extension github.remotehub
code --install-extension github.vscode-github-actions
code --install-extension github.vscode-pull-request-github
code --install-extension grafana.vscode-jsonnet
code --install-extension grapecity.gc-excelviewer
code --install-extension graphql.vscode-graphql
code --install-extension graphql.vscode-graphql-syntax
code --install-extension hashicorp.terraform
code --install-extension hbenl.vscode-test-explorer
code --install-extension hbenl.vscode-test-explorer-liveshare
code --install-extension humao.rest-client
code --install-extension influxdata.flux
code --install-extension jakebecker.elixir-ls
code --install-extension johnuphoff.vscode-styled-sort
code --install-extension jspolancor.presentationmode
code --install-extension kavod-io.vscode-jest-test-adapter
code --install-extension kisstkondoros.vscode-codemetrics
code --install-extension mikestead.dotenv
code --install-extension mindaro-dev.file-downloader
code --install-extension ms-azuretools.vscode-docker
code --install-extension ms-dotnettools.csdevkit
code --install-extension ms-dotnettools.csharp
code --install-extension ms-dotnettools.vscode-dotnet-runtime
code --install-extension ms-python.autopep8
code --install-extension ms-python.debugpy
code --install-extension ms-python.python
code --install-extension ms-python.vscode-pylance
code --install-extension ms-vscode-remote.remote-containers
code --install-extension ms-vscode-remote.remote-ssh
code --install-extension ms-vscode-remote.remote-ssh-edit
code --install-extension ms-vscode-remote.remote-wsl
code --install-extension ms-vscode-remote.vscode-remote-extensionpack
code --install-extension ms-vscode.azure-account
code --install-extension ms-vscode.live-server
code --install-extension ms-vscode.powershell
code --install-extension ms-vscode.remote-explorer
code --install-extension ms-vscode.remote-repositories
code --install-extension ms-vscode.remote-server
code --install-extension ms-vscode.test-adapter-converter
code --install-extension ms-vsliveshare.vsliveshare
code --install-extension nrwl.angular-console
code --install-extension orta.vscode-jest
code --install-extension paulmolluzzo.convert-css-in-js
code --install-extension pflannery.vscode-versionlens
code --install-extension pnp.polacode
code --install-extension prisma.prisma
code --install-extension redhat.vscode-xml
code --install-extension redhat.vscode-yaml
code --install-extension rpdswtk.vsmqtt
code --install-extension samuelcolvin.jinjahtml
code --install-extension sburg.vscode-javascript-booster
code --install-extension scabana.trxviewer
code --install-extension silvenon.mdx
code --install-extension steoates.autoimport
code --install-extension streetsidesoftware.code-spell-checker
code --install-extension styled-components.vscode-styled-components
code --install-extension tamasfe.even-better-toml
code --install-extension terrastruct.d2
code --install-extension unifiedjs.vscode-mdx
code --install-extension vallentin.vscode-bnf
code --install-extension vsls-contrib.codetour
code --install-extension wix.vscode-import-cost
code --install-extension xyc.vscode-mdx-preview
code --install-extension yzhang.markdown-all-in-one
Bash Script
echo "Ensure the latest bash is installed if using OSX (brew install bash)"
markdown_list_output="| Extension Name | Description |
|:--|:--|"
markdown_install_output="\`\`\`bash"
readarray -t extensions < <(code --list-extensions)
echo "Total extensions: ${#extensions[@]}"
for val in "${extensions[@]}"; do
markdown_install_output="$markdown_install_output
code --install-extension $val"
echo "Looking up information on $val"
extension_data=$(
curl \
-s \
--data "{\"assetTypes\":null,\"filters\":[{\"criteria\":[{\"filterType\":7,\"value\":\"$val\"}],\"direction\":2,\"pageSize\":100,\"pageNumber\":1,\"sortBy\":0,\"sortOrder\":0,\"pagingToken\":null}],\"flags\":2151}" \
--header "accept: application/json;api-version=3.0-preview.1" \
--header "content-type: application/json" \
https://marketplace.visualstudio.com/_apis/public/gallery/extensionquery
)
extensionName="$(echo "$extension_data" | jq '.results[0].extensions[0].extensionName')"
if [ extensionName == 'null' ]; then
continue
fi
markdown_list_output="$markdown_list_output
$(
echo "$extension_data" |
jq '"|[\(.results[0].extensions[0].displayName)](https://marketplace.visualstudio.com/items?itemName=\(.results[0].extensions[0].publisher.publisherName).\(.results[0].extensions[0].extensionName)) | \(.results[0].extensions[0].shortDescription) |"' |
sed 's/\"//g'
)"
done
markdown_install_output="$markdown_install_output
\`\`\`"
output="$markdown_list_output
$markdown_install_output"
echo "$output"