I like working with the VS Code Editor. It’s simple to use and code-friendly. Being a developer, I have to sit for long hours of coding. So it’s imperative to set up VSCode in such a way that it should look attractive as well as increases my productivity.
The following are the extensions I use.
- Auto Rename Tag (by Jun Han)
- Bracket Pair Colorizer (by CoenraadS)
- ES7 React/Redux/GraphQL/React-Native (by dsznajder)
- Intellisense for CSS class names in HTML (by Zignd)
- Live Server (by Ritwick Dey)
- Path Autocomplete (by Mihai Vilcu)
- React-Native/React/Redux Snippets (by EQumiper)
- Vscode-icons (by VSCode Icons Team)
I use Halcyon Theme and Fira Code font.
In settings.json, I use the following settings. Add the following lines to your existing settings.
{
"editor.fontSize": 16,
"editor.fontWeight": "500",
"editor.lineHeight": 24,
"editor.wordWrap": "on",
"terminal.integrated.fontSize": 14,
"editor.tabSize": 2,
"editor.formatOnSave": false,
"workbench.colorTheme": "Halcyon",
"workbench.colorCustomizations": {
"statusBar.background": "#333333",
"statusBar.noFolderBackground": "#333333",
"statusBar.debuggingBackground": "#263238",
"tab.activeBackground": "#6200EA"
},
"emmet.includeLanguages": {
"javascript": "javascriptreact"
},
"vsicons.dontShowNewVersionMessage": true,
"editor.fontFamily": "'Fira Code Retina', 'Cascadia Code', Menlo, Monaco, 'Courier New', monospace",
"editor.fontLigatures": true,
"workbench.iconTheme": "vscode-icons",
"liveServer.settings.donotShowInfoMsg": true,
"[javascript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"editor.linkedEditing": true,
"json.maxItemsComputed": 8000,
"javascript.updateImportsOnFileMove.enabled": "always",
"terminal.integrated.defaultProfile.windows": "Git Bash"
}
These are simple settings that will make you love coding even more in VS Code.
Thank you for reading.