My VSCode configuration

Sometimes I got asked about my VS Code configuration for React development. Since I had to re-install my computer, I have a fresh view.

Here it is for reference 👇

Plugins #

• vim
• docker
• gitlens
• abracadabra: JS and TS refactoring
• vetur (vue)
• eslint
• import-cost: show imported package sizes
• graphql (graphql.vscode-graphql)
• peacock: change vscode border colors per project basis
• tailwind css intellisense
• erb templates: https://github.com/adamzapasnik/prettier-plugin-erb

As you can see, nothing React specific, but I use emmet -included with vscode- extensively.

Fonts #

I tend to use Fira Code with ligatures. Free alternatives are: Cascadia Code and Menlo.

Configuration #

Format on save is a must. I don't like minimap. I use Night Owl theme

{
    "editor.minimap.enabled": false,
    "editor.formatOnSave": true,
    "git.suggestSmartCommit": false,
    "workbench.colorTheme": "Night Owl",
    "editor.fontFamily": "'Fira Code', 'Cascadia Code', Menlo, Monaco, 'Courier New', monospace",
    "editor.fontLigatures": true,
}

Extras #

git config --global core.editor "code --wait"