Enhance Your Workflow with These 3 VS Code Tips
Written on
Chapter 1: Introduction to VS Code Tips
Visual Studio Code is an incredibly powerful tool, provided you know how to make the most of it.
As time progresses, VS Code continuously evolves, incorporating new features. Yet, many of these enhancements can be hidden within the JSON settings, which often intimidate newcomers. In this guide, I will unveil three unconventional techniques that can significantly enhance your development setup.
Section 1.1: Organizing Configuration Files
Configuration files, commonly referred to as dotfiles, play a crucial role in modern development. In today's world, relying solely on plain HTML, CSS, and JavaScript is outdated; we now have a plethora of tools at our disposal, including transpilers, compilers, bundlers, linters, and prettifiers. Thankfully, we can tailor these tools using configuration files to suit our project's requirements.
However, having numerous configuration files cluttering your root directory can be overwhelming. While customization is beneficial, frequently sifting through these files can be a hassle. For instance, when I primarily work with main.js, it can be challenging to locate it amidst the clutter.
Fortunately, VS Code offers an experimental feature called fileNesting. This functionality allows you to visually group files, streamlining your workspace without altering the actual file structure or affecting the functionality of your preconfigured tools.
For this project, I plan to nest all configuration files under package.json, while placing changelogs and licenses under README.md. This way, I can expand package.json whenever I need to access a configuration file.
To implement this, simply add three entries to your settings.json. You can open it by pressing Ctrl (or Cmd) + Shift + P and typing "settings.json". Then append the following entries:
"explorer.experimental.fileNesting.enabled": true,
"explorer.experimental.fileNesting.expand": false,
"explorer.experimental.fileNesting.patterns": {
"package.json": ".gitignore, .parcelrc, .prettierc ...",
"README.md": "CHANGELOG.md, LICENSE"
}
With this setup, navigating through your project becomes a breeze, allowing for easy access to all necessary files without a cluttered root.
How to Improve Developer Productivity on VS Code - YouTube
This video delves into various strategies aimed at enhancing your productivity while using VS Code.
Section 1.2: Rethinking Extensions
Extensions are fantastic and are largely responsible for VS Code's power. However, as the number of available extensions grows, so does the time it takes for VS Code to load. If you find yourself waiting over 6-7 seconds for it to start, you might as well opt for a full-fledged IDE.
Moreover, extensions can introduce potential security and performance issues that you may not even anticipate. Therefore, I recommend avoiding unnecessary extensions and instead exploring VS Code’s documentation for native alternatives. Here are a few commonly used extensions alongside their native counterparts:
- Bracket Pair Colorizer: Previously a staple for me, this functionality is now integrated into VS Code. To enable it, add the following to your settings.json:
"editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs": "active",
- Auto Import: With over 2 million downloads, this extension is popular, but you can achieve the same results natively by adding:
"javascript.suggest.autoImports": true,
"javascript.updateImportsOnFileMove.enabled": "always",
"typescript.suggest.autoImports": true,
"typescript.updateImportsOnFileMove.enabled": "always",
- HTML Tag Management: Previously reliant on extensions for auto-closing and renaming HTML tags, you can now accomplish this with native settings:
"editor.linkedEditing": true,
"html.autoClosingTags": true,
"javascript.autoClosingTags": true,
"typescript.autoClosingTags": true,
- Doxygen Documentation Generator: Even though it’s widely used, VS Code has incorporated similar functionality by default. You can enable it with:
"javascript.suggest.completeJSDocs": true,
"javascript.suggest.jsdoc.generateReturns": true,
"typescript.suggest.completeJSDocs": true,
"typescript.suggest.jsdoc.generateReturns": true,
There are numerous instances where native features replace external extensions. If you have any tips, please share them in the comments!
Chapter 2: Efficient Refactoring Techniques
VS Code Tutorial – Become More Productive - YouTube
This tutorial offers insights into effective techniques for improving your productivity while using VS Code.
Section 2.1: Instant Renaming
Renaming a function or variable throughout your codebase can be frustrating, particularly when using traditional find-and-replace methods. Variable names might be embedded within strings or other function names, complicating the process and risking errors.
Fortunately, VS Code simplifies this task significantly. It intelligently identifies the intended variable name, allowing you to rename it effortlessly.
To rename a variable, select it and press F2. After entering the new name, hit Enter, and just like that, the variable has been updated without any disruptions to your code.
Conclusion
You’ve now learned three valuable VS Code tips to enhance your development workflow. Overall, Visual Studio Code is a robust tool that exceeds expectations. However, possessing the best tool is futile if you aren’t leveraging it effectively.
If you enjoyed this guide, please give it a thumbs up, and feel free to share your insights in the comments. Additionally, I'm currently working on a project—if you could star it on GitHub, I would greatly appreciate it. Stay tuned for more updates!