Table of Contents
- Introduction
- Theme
- Icons
-
Extensions
- Auto Rename Tag
- Auto Close Tag
- Code Spell Checker
- CSS Peek
- DotENV
- Error Lens
- ESLint
- GitLens
- HTML Boilerplate
- HTML CSS Support
- Import Cost
- Live Server
- Markdown Preview Enhanced
- Path Intellisense
- Prettier - Code Formatter
- Project Manager
- REST Client
- Trailing Spaces
- Turbo Console Log
- Version Lens
- Angular Language Service
- ES7 React Redux React Native snippets
- Docker
- Kubernetes
- Settings
- Conclusion
- Contact Me
Introduction
In this article, we will explore my personal setup for Visual Studio Code, the popular open-source code editor. I will share the themes, icons, and extensions that I use on a daily basis to enhance my coding experience. Whether you are a seasoned developer or just starting out, this article will give you some insights and inspiration to optimize your own setup. So, let's dive in and see what makes my VS Code setup unique!
Theme
The VS Code theme I most often use is the Default Dark+ theme provided by VS Code default settings, but from time to time, I switch to the One Dark Pro. In general I prefer darker themes, so my eyes are not strained so much.
Icons
The icon pack that I use is the well-known Material Icon Theme. I love it because it supports almost every file extension and can be customized for everyone's needs.
⬇️ Download Material Icon Theme
Extensions
Below, I will be discussing the various extensions that I utilize in Visual Studio Code to enhance my coding experience.
Auto Rename Tag
Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.
Auto Close Tag
Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text does.
Code Spell Checker
A basic spell checker that works well with code and documents.
The goal of this spell checker is to help catch common spelling errors while keeping the number of false positives low.
⬇️ Download Code Spell Checker
CSS Peek
This extension extends HTML and ejs code editing with Go To Definition and Go To Symbol in Workspace support for css/scss/less (classes and IDs) found in strings within the source code.
The extension supports all the normal capabilities of symbol definition tracking, but does it for css selectors (classes, IDs and HTML tags). This includes:
- Peek: load the css file inline and make quick edits right there. (Ctrl+Shift+F12)
- Go To: jump directly to the css file or open it in a new editor (F12)
- Hover: show the definition in a hover over the symbol (Ctrl+hover)
In addition, it supports the Symbol Provider so you can quickly jump to the right CSS/SCSS/LESS code if you already know the class or ID name
DotENV
Syntax Highlighting support for Environment (.env) Files
Error Lens
ErrorLens turbo-charges language diagnostic features by making diagnostics stand out more prominently, highlighting the entire line wherever a diagnostic is generated by the language and also prints the message inline.
ESLint
ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs.
ESLint is completely pluggable. Every single rule is a plugin and you can add more at runtime. You can also add community plugins, configurations, and parsers to extend the functionality of ESLint.
GitLens
GitLens supercharges Git inside VS Code and unlocks untapped knowledge within each repository. It helps you to 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.
Commit Graph
Worktrees
Git blame file
Git blame current line
Git blame status bar
HTML Boilerplate
This extension provides the standard HTML boilerplate code used in all web applications.
HTML CSS Support
HTML id and class attribute completion for Visual Studio Code.
- HTML id and class attribute completion.
- Supports linked and embedded style sheets.
- Supports template inheritance.
- Supports additional style sheets.
- Supports other HTML like languages.
- Validates CSS selectors on demand.
Import Cost
This extension will display inline in the editor the size of the imported package. The extension utilizes webpack in order to detect the imported size.
Live Server
Launch a local development server with live reload feature for static & dynamic pages.
Markdown Preview Enhanced
Markdown Preview Enhanced is an extension that provides you with many useful functionalities such as automatic scroll sync, math typesetting, mermaid, PlantUML, pandoc, PDF export, code chunk, presentation writer, etc. A lot of its ideas are inspired by Markdown Preview Plus and RStudio Markdown.
⬇️ Download Markdown Preview Enhanced
Path Intellisense
Visual Studio Code plugin that autocompletes filenames.
To use Path Intellisense instead of the default autocompletion, the following configuration option must be added to your settings:
{ "typescript.suggest.paths": false }
{ "javascript.suggest.paths": false }
Prettier - Code Formatter
Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
⬇️ Download Prettier - Code Formatter
Project Manager
It helps you to easily access your projects, no matter where they are located. Don't miss those important projects anymore.
You can define your own Projects (also called Favorites), or choose for auto-detect Git, Mercurial or SVN repositories, VSCode folders, or any other folder.
REST Client
REST Client allows you to send HTTP request and view the response in Visual Studio Code directly.
Trailing Spaces
A VS Code extension that allows you to highlight trailing spaces and delete them in a flash!
Turbo Console Log
This extension make debugging much easier by automating the operation of writing meaningful log message.
Version Lens
This extension shows version information when opening a package or project.
Angular Language Service
This extension provides a rich editing experience for Angular templates, both inline and external templates.
⬇️ Download Angular Language Service
ES7 React Redux React Native snippets
JavaScript and React/Redux snippets in ES7+ with Babel plugin features for VS Code.
⬇️ Download ES7+ React/Redux/React-Native snippets
Docker
The Docker extension makes it easy to build, manage, and deploy containerized applications from Visual Studio Code. It also provides one-click debugging of Node.js, Python, and .NET Core inside a container.
Kubernetes
The extension for developers building applications to run in Kubernetes clusters and for DevOps staff troubleshooting Kubernetes applications.
Works with any Kubernetes anywhere (Azure, Minikube, AWS, GCP and more!).
Settings
The JSON
code below, shows my current VS Code settings:
// settings.json
{
"breadcrumbs.enabled": true,
"breadcrumbs.icons": true,
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.fontSize": 14,
"editor.fontFamily": "Menlo, Monaco, 'Courier New', monospace",
"editor.fontWeight": "normal",
"editor.wordWrap": "on",
"editor.autoClosingBrackets": "always",
"editor.autoClosingQuotes": "always",
"editor.autoClosingDelete": "always",
"editor.codeLens": true,
"editor.codeLensFontSize": 12,
"editor.bracketPairColorization.enabled": true,
"editor.guides.highlightActiveBracketPair": true,
"editor.guides.bracketPairs": "active",
"editor.minimap.size": "fit",
"editor.minimap.scale": 1,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.formatOnPaste": true,
"editor.formatOnType": true,
"editor.tabSize": 2,
"editor.fastScrollSensitivity": 6,
"editor.renderWhitespace": "none",
"editor.accessibilitySupport": "off",
"emmet.includeLanguages": {
"javascript": "javascriptreact",
"typescript": "typescriptreact"
},
"errorLens.enabled": true,
"files.autoSave": "afterDelay",
"files.autoSaveDelay": 500,
"files.defaultLanguage": "${activeEditorLanguage}",
"git.autofetch": true,
"html.format.indentInnerHtml": true,
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"javascript.updateImportsOnFileMove.enabled": "always",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "vscode.json-language-features"
},
"keyboard.touchbar.enabled": true,
"liveServer.settings.donotShowInfoMsg": true,
"liveServer.settings.CustomBrowser": "chrome",
"liveServer.settings.port": 4201,
"[markdown]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"terminal.integrated.fontSize": 14,
"workbench.colorTheme": "Default Dark+",
"workbench.iconTheme": "material-icon-theme",
"workbench.editor.enablePreview": false,
"workbench.startupEditor": "newUntitledFile",
"workbench.editor.wrapTabs": true,
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"redhat.telemetry.enabled": false,
"typescript.suggest.paths": false,
"javascript.suggest.paths": false
}
Conclusion
In conclusion, I shared my personalized Visual Studio Code setup, including the themes, icons, and extensions that I use on a daily basis. These tools help me to streamline my workflow, increase productivity, and provide a visually appealing interface. The combination of these elements is tailored to meet my specific needs and enhance my overall experience with the code editor. By sharing this setup, I hope to inspire others to customize their own VS Code environment and find the tools that work best for them.
Contact Me
- 💻 GitHub
- ☕ Buy Me A Coffee
Top comments (17)
ENV instead of DotENV gives you more features.
Console Ninja display console output inline.
Nested Comments fixes some weird default behaviour.
Highlight Counter does what it says, tells you how many instances of a highlighted selection are present (default only tells you how many chars selected).
File Utils is a better workflow by rebinding some keys. Instead of creating an untitled file and then having to save it (ctrl+s) and give it a location / name. You can do it all in one step, which means autosave / format also starts working immediately.
Thanks, for your suggestions. I will definitely try them out and update the post with the ones that I will be using in the following days!!
Vscode Extensions that i used:
- Autoprefixer.
- Code spell checker.
- Css peek.
- ES7+ React/Redux/React-Native snippets
- EsLint
- Git Graph
- Git history.
- Git lens.
- Indent rainbow.
- Tabnine AI Autocomplete for Javascript, Python, Typescript, PHP, Go, Java, R
- Total typescript.
I will definitely check the ones that are not already included in the article. Thanks for your input!
Also, thanks to you sharing vscode extension :-)
Nice setup
This is the kind of IDE walkthrough I wish I had when I first started learning to be a Frontend Web Developer. This is succinct and straight-to-the-point. Thank you for the information.
I hope the others will also find it so useful! 🔥
Nice setup for basic usage, my suggest is "Color Highlight" nice for large code
Thanks for the suggestion. I like the default color preview but I will give this one a try!
Сongratulations 🥳! Your article hit the top posts for the week - dev.to/fruntend/top-10-posts-for-f...
Keep it up 👍
Thank you 🔥 🙏
Good one. Thanks for sharing this.
Very detailed explanation. Thanks
I am glad you liked it and I hope you've found something useful. Feel free to share your most used extensions, theme or icons, so we can improve our dev environment.
there is another extension that i start used recently is like the github autopilot but free, called : CODEIUM.
I will definitely check it out, thanks for the suggestion!