VsCode, as you may have already experienced, has become the recommended choice of editor for Javascript and other web application, because it is convenient and powerful, due to its open-source nature and the enormous plugin and contributors community.
Yet using the editor down the road, some disadvantages show up. It become confusing when it comes to navigating between files in the project panel. especially when it comes to components based developments. while components rely on relative path to import. That so many stacked and nested layers cannot be comprehended properly.
Custom CSS and JS Loader Plugin
It would be better if we there is grid line showing the parent and children directory and files structure
Here, we have a simple tweet on the the editor with the use of the **Custom CSS and JS Loader** plugin. The plugin enable us to inject Css to the editor itself.
First, just simply search and download the plugin **Custom CSS and JS Loader** at the Plugin panel.
Next, we need to setup a custom Css file,
Here is the direct download link: vscode-style
As described by the plugin details, by applying the following setting, and specifing the location of the custom CSS file at the "vscode_custom_css.imports"
...
"vscode_custom_css.policy": true,
"vscode_custom_css.imports": [
"file:///Users/brentleung/bitbucket/vscode-style.css"
],
Next, The Custom Css plugin give us a function to reload the CSS
just press F1 to toggle the command plattee
and search for reload Css
There may be prompts saying that restarting VsCode is required, or VS code is Corrupted. It is fine as you can now see the custom CSS has been applied to the project files panel!
Gotcha, now your directory should look quite different now!
with each layer , indent and
grid line
Leave a Reply