Visual Studio Code (hereinafter referred to as VS Code) is a powerful tool, but unfortunately many people have not found the correct way to open it. Today, I will teach you 3 easy-to-use and easy-to-learn tips to make your VS Code use smoothly!
Original link: https://medium.com/fractions/3-visual-studio-code-tips-to-boost-your-workflow-b107ec573d75
Disclaimer: This article is translated by CSDN, please indicate the source when reprinting.
The following is the translation:
As long as you know how to use VS Code, it's an all-purpose tool.
Over time, VS Code has gotten better and more features have been added. However, these features are often hidden in VS Code's JSON settings, and most newbies won't be able to find them at all. Today, I'm going to share with you 3 unusual tips that can help you improve your development efficiency.
1. There are too many configurations in the root directory, what should I do?
Configuration files aka dotfiles are an integral part of development because it's not 2000 anymore and nobody uses plain HTML, CSS and JavaScript anymore. We now have tools to do almost everything, there are transpilers, compilers, binders, compilers, beautifiers... Fortunately, we can configure them with configuration files according to the needs of the project.
However, having dozens of configuration files in the root directory can lead to a mess. As awesome as these customizable tools are, after configuring them once, I never open them unless there is something in the project that I can't foresee. So why do I have to find my home folder in this mess of folders every time?
Fortunately, VS Code has an experimental setup feature called fileNesting. It allows developers to visually nest files into another and clear the workspace. The good thing is that it doesn't mess up the file structure, and all the preconfigured tools continue to work without any extra effort.
For this project, I will put all my configuration files in the package.json file and the changelog and license under the README.md.
With this setup I can finally find whatever I want at first sight, and if I need to edit any config file, I can expand a folder like package.json and edit the files under it.
For this trick, you have to add three entries to setting.json. Press Ctrl or Cmd + Shift + P to open it and write "settings.json". Then add these entries to the end.
"explorer.experimental.fileNesting.enabled": true,
"explorer.experimental.fileNesting.expand": false,
"explorer.experimental.fileNesting.patterns": {
// Append as many as you want
// The keys are the parents and the values are the nested files.
"package.json": ".gitignore, .parcelrc, .prettierc ...",
"README.md": "CHANGELOG.md, LICENCE"
}
That's it! No more messy roots, all easy to find. Don't forget to review and start the project I took a screenshot of to confirm that the file structure hasn't changed.
2. No extension required
The extension is awesome! They are the main reason why VS Code is powerful. The number of these extensions is growing due to the huge community behind it. However, this bulk isn't always a good thing, as the more extensions you add, the longer VS Code takes to load. After a certain point it will take more than 6-7 seconds, if you are willing to wait that long, why not use an IDE?
Also, in scaling, there may be some security and performance issues that might lead to results you can't even imagine.
Here's my advice: if the extension isn't that important to your workstation, don't install it. Instead, take a look at VS Code's documentation and try to find a native way. As I said before, use settings. You can do a lot with VS Code. Below is an alternative to settings.json with a small list of extensions and their settings.
Double Quote Colorize
This is a very useful method that I have used for a long time. But now it's implemented natively in VS Code, not the extension, and I'm using the express native extension.
To enable it, open settings.json and add the following:
"editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs":"active",
Auto-Import
Auto-Import is another widely used extension, up to 2M+ download files. But why keep your workspace occupied when you don't need it?
Here's the same functionality implemented by VS Code developers. Add this code to settings.json.
"javascript.suggest.autoImports": true,
"javascript.updateImportsOnFileMove.enabled": "always",
"typescript.suggest.autoImports": true,
"typescript.updateImportsOnFileMove.enabled": "always"
Auto-closing and renaming HTML tags
These extensions were the first ones I installed on my system, but they're all gone now because now VS Code can do it automatically with these settings:
"editor.linkedEditing": true,
"html.autoClosingTags": true,
"javascript.autoClosingTags": true,
"typescript.autoClosingTags": true,
Doxygen Documentation Generator
This is another extension that is very useful when documenting your code, and because of this, VS code decided to implement it itself. Still, more than 6 million users have the extension installed on their workstations.
This is enabled by default, but if not you can add the following settings.json:
"javascript.suggest.completeJSDocs": true,
"javascript.suggest.jsdoc.generateReturns": true,
"typescript.suggest.completeJSDocs": true,
"typescript.suggest.jsdoc.generateReturns": true,
More often, people still use external extensions even though they can do it natively. If you have any suggestions, don't forget to share them in the reply section.
3. Rename now
It sucks when you have to change the name of a function or variable all over your codebase because you can't use the good ol' find & replace to replace it. The variable name can be in a string, or even in another function name, and changing it will break everything.
Fortunately, VS Code is smarter than you might think. It makes it easy to distinguish which characters are expected variable names and only change the variable names.
To do this, you have to select the variable that needs to be renamed and press F2. Then, enter the new variable name and press Enter. Voila! Nothing was broken and the variable's name changed immediately.
in conclusion
congratulations! Now you know the 3 VS Code tips I use to speed up my development environment. All in all, VS Code is a powerful tool, and it does what it is meant to be—and more. However, even having the best tool in the world won't help you if you don't know how to use it.