Why is my node_modules folder greyed out after command 'npm install'? - visual-studio-code

I wonder why my node_modules folder is greyed out in my VS Code editor after I run the command npm install.
Here the picture of my folder:

Files/folders that are included in .gitignore are greyed out. Normally node_modules folder is included within .gitignore.

It's because your node_modules folder is referenced in your .gitignore file.
Visual Studio tells you that this folder is ignored by the version control by graying it out.

As was already pointed out, VSCode automatically ignores everything in .gitignore. However, it also explicitely ignores some folders by default. All of this can be configured. Here are the steps you might want to take:
Check out the official documentation on Workspace settings
Open the relevant settings (you can choose between User (global) and Workspace). I usually do this via CTRL (or Command on Mac) + SHIFT + P -> > settings, which will show you the relevant choices: . For each you can either choose the UI or the JSON variant.
Also make sure to check the default settings via Peferences: Open Default Settings (JSON). You will find that, as of now (May 2021), **/node_modules is also automatically excluded, independent of other ignore files. Currently the default settings look like this:
// Configure glob patterns for excluding files and folders in fulltext searches and quick open. Inherits all glob patterns from the `files.exclude` setting. Read more about glob patterns [here](https://code.visualstudio.com/docs/editor/codebasics#_advanced-search-options).
"search.exclude": {
"**/node_modules": true,
"**/bower_components": true,
"**/*.code-search": true
},
// Controls whether to use global `.gitignore` and `.ignore` files when searching for files.
"search.useGlobalIgnoreFiles": false,
// Controls whether to use `.gitignore` and `.ignore` files when searching for files.
"search.useIgnoreFiles": true,
Enabling searching node_modules
"search.exclude": {
"**/node_modules": false
},
"search.useIgnoreFiles": false
WARNING: This will slow down things a lot since node_modules takes forever to search through - at least during cold start, that is when things are not cached. (Note that it is difficult to estimate how their caching works since it keeps evolving over time.)
To mitigate this, you might want to add some additional search.exclude settings. Note you will have to explicitely list everything you don't want, because...
The big shortcoming of VSCode search
search.exclude does not support:
negative look-ahead/behind
mutually cascading queries
Things like this will not work!
// does NOT work! :((
"search.exclude": {
"**/node_modules/#types": false,
"**/node_modules": true
}
This is a MAJOR problem which has been heavily discussed in the almost famous issue #869 for 6 years already! Join in and add to the 100+ comments! :)
Update: As of 2021/8/14, the issue has been taken off the backlog queue and put in the On Deck queue (but that also might not mean much).

Related

How to make VSCode Intellisense ignore certain folders but still have them appear in the Explorer window

I have a large C project which contains generated files among the source code. These will have names like g_*.c or be in directories named "out". I would like to have these generated files excluded from Intellisense, to speed up jump-to-definition. I have tried adding them to files.exclude:
"files.exclude": {
"**/g_*": true,
"**/out": true
}
However, this not only excludes them from Intellisense, but also removes them from the explorer window, so I cannot browse the files. Is there a way to exclude the files from Intellisense, but still make them appear in the Explorer window so that they are browsable?

Prevent deleting dead code during Auto Format on Save?

What is the magic configuration for allowing a file to be auto-formatted upon a Save operation, but stop / disable / prevent VSCode from deleting dead code?
Sometimes I want to deliberately throw an exception in the middle of a function, for debugging purposes but am forced to comment out all following code in order not to get it deleted.
What's worse is that sometime I save while the editor didn't yet recover from some error in the code, thinks the code still contains an error, and causes code deletions which should not happen in the first place. I found myself too many times pulling up git in order to restore good code which was wrongly deleted.
Is there a clear "do not delete dead code" option to switch on?
UPDATE:
Running Prettier (the file's formatter) from command line did not delete dead code.
Trying to disable all extensions didn't help either. The dead code is still deleted upon save.
Case solved.
I can't pinpoint the exact package that's causing it but it seems to be related to either ESLint or Prettier.
Turns out that the project's Github repo contains a .vscode directory with a settings.json that contains the following configuration:
{
"editor.codeActionsOnSave": {
"source.fixAll": true
}
}
I already saw posts saying to add "source.fixAll": false to VSCode's general settings.json file, but it had no effect when I did.
Setting the flag to false did the trick
{
"editor.codeActionsOnSave": {
"source.fixAll": false
}
}
Note: Adding the above block to the general settings.json had no effect as well. I had to modify the local .vscode/settings.json file to get it to work.
source.fixAll activates also TS fixes, which are somehow too aggressive to use on save. Only enabling eslint fixes with source.fixAll.eslint is a good compromise - it will still report dead code (no-unreachable) but not delete it.
https://github.com/microsoft/vscode/issues/109530

How to exclude all but certain files in the sidebar in Visual Studio Code?

Using Microsoft's Visual Studio Code, how do I show only certain files and file patterns in the sidebar and exclude all other files?
I want to show .yml files to achieve editing only them and not to scroll through all files.
I tried this, but it didn't work.
"files.exclude": {
"**/*": true,
"**/*.yml": false
}
P.S. I understand there is a way to hide certain files, but I want to show only specific files. I don't mind using an extension to achieve this.
This will get you pretty close:
"files.exclude": {
"**/*.[^y]*": true,
"**/*.y[^m]*": true,
"**/*.ym[^l]*": true
}
It should exclude all files except those starting with a .ym(etc.) extension, like .yml, .ym, .ymabcdef, etc. I don't know if you have any other files besides .yml that match that pattern. I think right now this is as close as you can get to what you want. The last entry doesn't seem to actually do anything though it should!!

Reindex a source code in the VSCode

I've started to get errors Unable to open 'header.h': File not found when I try to jump to var/func definition via [Ctrl+Click] after I've deleted/renamed several files.
Is it possible to force reindex source code?
This question is a few years old now, but this is an issue I've seen a lot, and can usually be fixed with one of the following 5 options:
Reload Session
You can reload the current session, with the workbench.action.reloadWindow command:
Open the Command Palette with Ctrl + Shift + P Then type Reload Window
Filter Files being Indexed
For C/C++ projects specificially, sometimes the intellisense indexing can be really slow, and feel like it's not working. One solution for this is to limit what it indexes with something like limitSymbolsToIncludedHeaders, or reduce the amount of parsed files in c_cpp_properties.json
"browse": {
"path": [
"/usr/include/",
"/usr/local/include/",
"${workspaceRoot}/../include",
"${workspaceRoot}/dir2",
"${workspaceRoot}/dir3/src/c++"
...
]
}
Set File Associations
Sometimes the file associations are incorrect, so files are not indexed as expected.
This can be fixed by adding something similar to this into your VS Code settings (settings.json):
"intelephense.files.associations": ["*.php", "*.phtml", "*.inc", "*.module", "*.install", "*.theme", ".engine", ".profile", ".info", ".test"]
Rebuild System Index
For Windows users, VS Code uses the system search index, so rebuilding that may help.
Ensure Intellisense Enabled
Finally, it may seem obvious, but just confirm that Intellisense is actually enabled, with editor.tabCompletion in your settings.json. And if you're searching with results not displaying, ensure there aren't any filters preventing results.

How to hide files with specific extension in VSCode tree view

I use VSCode with Unity3D and I wonder is there any way to hide/ignore/filter certain types of files, for example *.meta files in VSCode's tree view? I cant find any suitable option in settings.
They have added this feature now. Go to File->Preferences->Workspace Settings. That opens or creates the .vscode folder, and underneath it the settings.json file.
Here is a full settings.json file that shows how to exclude the .git folder, the dist folder and the node_modules folder.
// Place your settings in this file to overwrite default and user settings.
{
"files.exclude": {
"**/.git": true,
"dist": true,
"node_modules": true
}
}
Not at this time, but you can vote for the feature at the Visual Studio Code User Voice.
F1 > Preferences:Open Workspace Settings > [search settings] exclude >
Files:Exclude > Add Pattern
In other words, press F1 to open the thingy search thing, to find Preferences:Open Workspace Settings, then in the next search box, search for 'exclude', and add the pattern to exclude in the Files:Exclude section.
For example, to exclude all hidden backup files in Linux -- i.e. files with a tilde '~' on the end, add the pattern **/*~.
You might want to exclude the same pattern from the Search:Exclude and Files:Watcher Exclude sections.