May 22nd, 2020 - written by Kimserey with .
Visual Studio Code is a free open source code editor. It comes packed with features and can also be extended with many extensions built by the community. Since its first launch five years ago, it has become the main editor to work on frontend projects like Angular or React projects. Because it is so quick and easy to use, we can get started straight away and build without having to explore much of its functionalities. But there are gems inside that if known, enhance drastically the productivity. In today’s post I will go through some file tips with Visual Studio Code version
1.44.2 which will boost productivity.
I am using a Macbook therefore my shortcuts are using
CMD which can be replaced by
CTRL on other platform.
There are multiple ways of accessing files. We can use the file explorer which should be opened on the side bar. If the side bar is not visible, we can toggle it with
CMD+B. Clicking one time on a file will open the file on preview. The preview allows us to switch between files without opening it. Making any modification on the file will open it and it will be in the
OPEN EDITORS section on the side bar. The open editors tracks all files opened with their unsaved changes accross the multiple panels we have opened.
To quickly access a file, we can use
CMD+P which opens the
Search file by name popup.
Clicking on any file will open it. To open on a side pan, we can use
We can also open on a side pan from the file explorer by doing
right click > open to the side.
Another interesting feature of Visual Studio Code is its file filtering on the file explorer.
When the focus is on the file explorer, we can start typing the file name and click on the filter. This will filter all the files in the file explorer and only show those matching the term.
This is particularly useful when working on frontend projects with dozens of files. As long as the files respect a pattern to distiguish the type of files, like
abc.service.ts, we’ll be able to quickl filter all services or components.
When we want to remove the filter we can then click on the cross.
The last feature that we all are used to use is the global search. Global search is either access through the search button or
CMD+SHIFT+F. Typing in the search box will display search results of files that contain the search terms.
If we expand the search details, we have two more options,
files to include and
files to exclude which allows us to specify a blob pattern. If we take our previous example of files
abc.component.ts, we could use the glob pattern
As we can see the search looks through the files in the current repository opened. Certain files are excluded by default, the list can be found in the settings
CMD+SHIFT+P and open the
exclude settings and we will see the following:
node_modules is excluded by default which makes sense as we don’t want to search accross all our NPM packages, most of the time we only want to search on our own codebase. But there are times where it comes handy to look through the
For example if we use frontend libraries that uses SASS, like
Bootstrap, we sometime need to search into
Bootstrap codebase in
node_modules. In order to do that, we can temporarily disable the
exclude settings by click on the cog.
Here we are able to search for the
.carousel-item class in the
**/boostrap/**/*.scss files as we have disabled the exclude settings.
And that concludes today’s post!
Today we looked into Visual Studio Code functionalities around files navigation and search. We looked at the different features offered to access files, then we looked at how we could filter files, and lastly we completed the post by looking at the global search functionality and the different options provided to include or exclude folders. I hope you liked this post and I see you on the next one!