Visual Studio Code settings ignore project files - visual-studio-code

I've noticed that in my project, my project files don't adhere to the settings. EG tab == 4 spaces. Tabs are only adding 2 spaces. The settings file does it properly. It uses 4 spaces with I hit tab. Do I need to add something to include the project files? I've tried adding this to my user settings. I also added this to the workspace settings but it still didn't seem to work.
"editor.insertSpaces": false,
"editor.tabSize": 4,
and tried using true as well. It just doesn't do it. The project files seem to be ignored. Is there some place I can fix this?

You need to also set "editor.detectIndentation": false,, otherwise the program auto-detects the indentation based on the open file. Documentation has default file that should help with any other settings.

Related

How do you reset an extension's settings in vscode?

I was trying to do some custom settings for the C++ and CMakeTools extensions. But now I want to reset/revert everything to defaults. How do I do that?
I tried uninstalling the extensions and re-installing, and they got re-installed with my custom settings wtf.
I see no reset buttons in the UI
I don't know where the per-extension settings are stored on my computer.
What am I not understanding? Why is this so unobvious?
As described in this feature request, you cannot do this directly. However, you can open your settings.json file and find the extension settings, then manually remove them.
Keep in mind, removing the extension won't remove its settings. So reinstalling the extension will not reset it at all, but keep your previous configuration.
There's a Settings tab (and apparently extension settings can be both in the User subtab and the Workspace subtab).
There's User, Workspace, and Default settings.json's which you can open from Ctrl+Shift+P, start typing "settings.j", and see the 3 suggestions (the user settings file is located at C:\Users\{USER_NAME}\AppData\Roaming\Code\User\settings.json (see docs for all OS paths).
Compiler settings are in c_cpp_properties.json, Compiling settings are in tasks.json, Debugging settings in launch.json. These are in your project folder under the .vscode folder, and you can search them in Ctrl+Shift+P (but don't write .json at the end or it won't show up).
Also check your system environment variables for "CXX" and "CC" env variables which can also overwrite the compiler (and the ui says nothing about this).
Apparently there's no way to reset all settings (the "permanence" is a giant source of ux confusion, a meme decision in my professional opinion).
Luckily you can just go to Settings and write #modified to see all the settings you've changed!
Ok, so to finally answer: HOW do you RESET an individual setting?
This cannot be "googled": There's an invisible hover hitbox on the left side leading to a hidden settings gear (red dotted line):
This ux is the source of the problem.
In VSCode, "removing"/"deleting" a setting means "resetting" it. Your settings are just "overwritings". So all auto-defaults should pop back into the UI after a VSCode restart, I hope. (also the aforementioned .vscode settings / env vars / build folder might still override)

Change line guide frequency in vscode

I have some dart code I am looking at in vscode.
The dart code uses 4 space indentation (literal 4 space, opposed to tabs).
When I view the code in vscode, it is putting line guides every two spaces. This doesn't make any sense since the indentation only occurs every 4 spaces. So it is essentially showing line guides to no where.
Observe the following screenshot
How can I fix this???
Go to Files > preferences > settings > select:Editor-Tab size You can change tab-size there.
Note: If you are using Eslint or Prettier make sure your editor settings are not overriding
The problem is that editor.tabsize setting is being overridden by language specific settings.
To fix I put the following in my user settings.json file...
"[dart]": {
"editor.tabSize": 4,
"editor.insertSpaces": true,
"editor.detectIndentation": false
},

showing project folder in title bar for Visual Studio Code

Is it possible to show the last folder in the title bar? If you have multiple instances of VS Code open, it is difficult to distinguish between them from the task bar. If both instances are open on say a file called 'main.ts', you will see 'main.ts' in the taskbar item.
Currently, the title would be [filename open] - [folder open] (e.g main.ts - angular2-training. Is it possible to invert them to become [folder open] - [filename open] (e.g angular2-training - main.ts?
Use window.title in user/workspace settings
The documentation is here with the full list of options of what can be shown. It's quite flexible.
In your case, to display angular2-training - main.ts you can use this
{
"window.title": "${rootName}${separator}${activeEditorShort}"
}
Older VS Code versions
The above only works in v1.10 and up. Here's how to do it in older versions:
v1.9, v1.8 - "window.showFullPath": true shows the full path to the current file, so you can at least see the project folder. Note this config is unsupported after v1.10
v1.7 and below - it's not possible
On version 1.13
Go to settings, inside UserSettings add this line to the json blob:
"window.title": "${activeEditorLong}"
On version 1.41.1
based uploaded image:
1,2: Go to Setting
3: Search windows title in search box
4: Type this statement in windows title box:
${dirty}${separator}${rootName}${separator}${activeEditorShort}
If you want to be able to identify which project you are working on by looking at the window title bar, one option is to set "window.title" to a custom value in the workspace settings file at
/.vscode/settings.json
If the file doesn't exist, create it, then add the following to it:
{
"window.title": "<PROJECT NAME> : ${rootName}${separator}${activeEditorShort}"
}
This is a simple solution that works rather well.
Tested in 1.44
The setting which matches the OPs problem... not being able to tell which VS Code editor is which from the taskbar... is:
"window.title": "${folderName} ${separator} ${activeEditorShort}"
I prefer the simpler
"window.title": "${folderName}"
${activeFolderShort} and friends, don't do what I want, as these follow the folder the active file is in. Whereas I want the folder of the whole "project" shown at all times.
Also, when browsing from the taskbar, I don't care what file is active - it is just noise. I care about the project (i.e. folder). On many occasions, every open VS Code will "main.rs" as the active file, so it is pointless to show it!
Editing the settings in json format even includes intellisense now, so you can see all the options without even having to look them up, and they appear as soon you save the settings file. No need to reload. Awesome!
v1.31 of vscode added these options to window.title:
There are three new variables that can be used within the window.title
setting:
${activeFolderShort}: The name of the folder the file is contained in.
${activeFolderMedium}: The path of the folder the file is contained
in, relative to the workspace folder.
${activeFolderLong}: The full
path of the folder the file is contained in.
In addition of the setting:
"window.title": "${rootName}${separator}${activeEditorShort}"
You now can configure the separator as well with VSCode 1.45 (April 2020)
Allow customize the window title separator
A new setting window.titleSeparator allows to change the separator that is used in the window title.
By default a dash is used.
Just some tweaks i found out:
// will not work on workspace settings.json -> only global
"window.titleBarStyle": "custom",
// show only the name of the workspace folder in the title bar
"window.title": "${folderName}",
// remove the useless icons on the top-right
"window.commandCenter": false,
// make left & top green :-)
"workbench.colorCustomizations": {
"activityBar.background": "#1e2127",
"activityBar.foreground": "#95C085",
"titleBar.activeBackground": "#165900",
"titleBar.activeForeground": "#ffffff",
},

How do I hide certain files from the sidebar in Visual Studio Code?

In Visual Studio Code, what setting can be configured, using file patterns, to hide files from view in the sidebar's file-explorer?
I would like to hide certain groups of files, like .meta and .git files.
You can configure patterns to hide files and folders from the explorer and searches.
Open VS User Settings (Main menu: File > Preferences > Settings). This will open the setting screen.
Search for files:exclude in the search at the top.
Configure the User Setting with new glob patterns as needed. In this case add this pattern node_modules/ then click OK. The pattern syntax is powerful. You can find pattern matching details under the Search Across Files topic.
When you are done it should look something like this:
If you want to directly edit the settings file:
For example to hide a top level node_modules folder in your workspace:
"files.exclude": {
"node_modules/": true
}
To hide all files that start with ._ such as ._.DS_Store files found on OSX:
"files.exclude": {
"**/._*": true
}
You also have the ability to change Workspace Settings (Main menu: File > Preferences > Workspace Settings). Workspace settings will create a .vscode/settings.json file in your current workspace and will only be applied to that workspace. User Settings will be applied globally to any instance of VS Code you open, but they won't override Workspace Settings if present. Read more on customizing User and Workspace Settings.
Sometimes you just want to hide certain file types for a specific project. In that case, you can create a folder in your project folder called .vscode and create the settings.json file in there, (i.e. .vscode/settings.json). All settings within that file will affect your current workspace only.
For example, in a TypeScript project, this is what I have used:
// Workspace settings
{
// The following will hide the js and map files in the editor
"files.exclude": {
"**/*.js": true,
"**/*.map": true
}
}
The "Make Hidden" extension works great!
Make Hidden provides more control over your project's directory by enabling context menus that allow you to perform hide/show actions effortlessly, a view pane explorer to see hidden items and the ability to save workspaces to quickly toggle between bulk hidden items.
The __pycache__ folder and *.pyc files are totally unnecessary to the developer. To hide these files from the explorer view, we need to edit the settings.json for VSCode. Add the folder and the files as shown below:
"files.exclude": {
...
...
"**/*.pyc": {"when": "$(basename).py"},
"**/__pycache__": true,
...
...
}
I would also like to recommend vscode extension Peep, which allows you to toggle hide on the excluded files in your projects settings.json.
Hit F1 for vscode command line (command palette), then
ext install [enter] peep [enter]
You can bind "extension.peepToggle" to a key like Ctrl+Shift+P (same as F1 by default) for easy toggling. Hit Ctrl+K Ctrl+S for key bindings, enter peep, select Peep Toggle and add your binding.
For .meta files while using Unity3D, I found the best pattern for hiding is:
"files.exclude": {
"*/**/**.meta": true
}
This captures all folders and subfolders, and will pick up foo.cs.meta in addition to foo.meta
If you're using VSCode:
File > Preferences > Settings
Search for:
files:exclude
Then add
**/node_modules
Click OK.
You shouldn't need to restart or reload VSCode to take effect
2022 New File-explorer Features
There are a couple very cool new features that let devs configure the files that show in the sidebar, as well as offering new ways of hiding files, while keeping them accessible.
This answer covers
"explorer.fileNesting" (NEW as of April-2022)
"files.exclude"
explorer.excludeGitIgnore (new as of June-2022)
File Excludes
So the best answer included in this post, originally, was the "files.exclude"
VS Code's File Nesting Feature
Because "File Nesting" is IMO one of the coolest features added to VS Code in recent releases, I thought I'd take the time to create a animated GIF-image that shows how it works in real-time.
Below is a .gif image that shows the explorer.fileNesting feature being used in Real-time
File nesting is very cool, it is important to note, like most VS Code features, it does need to be custom configured for your personal development environment.
Personally I find this is a good addition for the workspace scoped settings.json configuration file. Unless you only ever use VS Code for developing the same type of projects, using the same project template, over & over again (which I understand some people do) I suggest using it to configure each individual project.
An alternative is per-language configuration. I don't use it this way, but it is very helpful with TypeScript's tsc emissions. For Example .d.ts files & *map files, they can configured to always be nested into *.js files, with the same name. Or the *.js files can be configured to nest under the *.ts files.
The above two notes point out that this is a feature aimed at improving the environment for compiled languages that have a compiler that emits project-build files; and specifically "transpilers" like TypeScript in other words,
Below shows a "File Nesting" configuration that you'll likely find written to "./.vscode/settings.json" file that belongs to a TypeScript project.
"explorer.fileNesting.patterns": {
"*.ts": "${capture}.js",
"*.js": "${capture}.js.map, ${capture}.min.js, ${capture}.d.ts",
"*.mts": "${capture}.mjs, ${capture}.d.mts",
"*.mjs": "${capture}.mjs.map, ${capture}.min.mjs, ${capture}.d.mts",
"*.cts": "${capture}.js",
"*.cjs": "${capture}.js.map, ${capture}.min.js, ${capture}.d.ts",
"*.jsx": "${capture}.js",
"*.tsx": "${capture}.ts",
}
The above configuration is actually from one of my projects, and it results in the following behavior:
I have included below, a complete list of All available configurations, as well as the link to the official release-notes (early form of documentation) that covers the "VS Code File-nesting Feature".
As of 2022-06-17 the following list contains all configurations available for "VS Code's File Nesting Feature".
explorer.fileNesting.enabled
Controls whether file nesting is enabled at-large. It can be set either globally or for a specific workspace.
explorer.fileNesting.expand
Controls whether nested files are expanded by default.
explorer.fileNesting.patterns
Controls how files are nested. The default configuration provides nesting intelligence for TypeScript and JavaScript projects, but you're encouraged to modify this to fit your own project's structure. Some examples:
VS CODE'S OFFICIAL RELEASE NOTES ON THE NEW FILE NESTING FEATURE
File Excludes
NOTE: "File excludes, has been covered by other answers so I will be brief."
"It's important we cover files.exclude though, as the next feature builds on it."
File-nesting is awesome, but don't exclude files.exclude Just yet. Comparing features like explorer.fileNesting, and files.exclude against each-other is not very helpful. It is actually best to look at the new "File Nesting" feature as either an alternative to files.exclude, or as a complementing feature to files.exclude. There's no need to go indepth about using explorer.fileNesting as an alternative, so lets talk a bit about it complimenting files.exclude.
There are several ways you can use the two settings to configure your projects "file-explorer" (the file-tree in the side-bar). I use both explorer.fileNesting & "files.exclude". I nest certain groups of files that obviously share somthing in common. A common example given in the official docs for the file nesting feature is using file nesting to hide your package-lock.json file under your package.json file, which is obviously a great way to make use of file nesting.
However I take it a step further: I also hide my .npmrc file, and if I am writing an NPM-Package, I hide my .npmignore file with the package files too.
Here are two groups I create
package.json
package-lock.json
.npmignore
.npmrc
eslintrc.json
.eslintignore
.prettierrc
.markdownlintrc
The problem is with file nesting, you get a bunch of 1-offs, like .editorconfig (ya I can place it with my .eslintrc.json group, but it doesn't really fit their. And what about .gitignore. I suppose I could just leave .gitignore in the view.
Or I could use files.exclude, and configure my "files.exclude": {} object in my project's .vscode/settings.json file to hide files like .gitignore, LICENSE, .editorconfig, etc...
I can also use it to hide directorys this is somthing File Nesting cannot do. I use it to hide my "build" dir & "node_modules" dir.
By default, files.exclude hides project's .git/ directory, which is why you never see it.
Below is the default configuration I use for ESM NodeJS TypeScript projects, which is what most of my projects are. The configuration is generic, and changes from project to project.
"files.exclude": {
// -------- PROJECT DIRECTORIES --------
"**/.git/": true,
"node_modules/": true,
"out/": true,
"typings/": true,
// ------- PROJECT FILES -------
"LICENSE": true,
"README.md": true
},
"explorer.fileNesting.patterns": {
"*.ts": "${capture}.js",
"*.js": "${capture}.js.map, ${capture}.min.js, ${capture}.d.ts",
"*.jsx": "${capture}.js",
"*.tsx": "${capture}.ts",
".eslintrc.*": ".eslintignore, .editorconfig, .prettierrc",
"tsconfig.json": "tsconfig.*.json, package.json, .gitignore",
},
The Latest Feature of the Bunch, Which I Edited in a bit after editing in File Nesting's new settings, is the new...
GitIgnore Exclude Feature
This feature allows you to configure VS Code to treat entries in your .gitignore file, as if they were included in your files.exclude object. The means that the File Explorer actually parses your .gitignore file, and reads its contents, then hides the files you configure it too.
To configure the setting to on use explorer.excludeGitIgnore.
Remember, this setting, like the other two features, should not be thought of from a perspective of,
"Is "GitIgnore Exclude" better than "Files Exclude"?
Its unhelpful, and counter productive to think in this way. Git Excludes (as the release notes say)...
...works alongside files.exclude to hide unwanted files from the Explorer.
       ~ VS Code Release Notes v1.68
You can read more about GitIgnore Excludes Here
If your working on a Angular 2+ application, and like me you like a clean working environment, follow #omt66 answer and paste the below in your settings.json file.
I recommend you do this once all the initial setup has been completed.
Note: This will actually hide the .vscode folder (with settings.json) in as well. (Open in your native file explorer / text editor if you need to make changes afterwards)
https://pastebin.com/X2NL6Vxb
{
"files.exclude": {
".vscode":true,
"node_modules/":true,
"dist/":true,
"e2e/":true,
"*.json": true,
"**/*.md": true,
".gitignore": true,
"**/.gitkeep":true,
".editorconfig": true,
"**/polyfills.ts": true,
"**/main.ts": true,
"**/tsconfig.app.json": true,
"**/tsconfig.spec.json": true,
"**/tslint.json": true,
"**/karma.conf.js": true,
"**/favicon.ico": true,
"**/browserslist": true,
"**/test.ts": true
}
}
The accepted answer is perfect if you're looking to hide something like node_modules.
In the case you're working with a static meta-framework like Astro.js, you'll end up with index.astro files but also get a lot of noise because of dist/test/index.html or /dist/about-page/index.html etc... pages.
To exclude them from the command palette search but still be able to inspect the dist folder in your files tree, I recommend using the following in a .vscode/settings.json file
{
"search.exclude": {
"dist/**": true
}
}
That way, you still keep it visible while not having it polluting your ctrl + p search.
PS: more info can be found here (submit the URL again after opening it to go to the highlight directly).
I had the same problem in the past as I was looking to remove the .class files generated after we suceessfully run .java files so .class files are created automatically after compilation and .exe files are created after compiling C or C++ code.
The most simple method to do this is to change your workspace settings by pressing F1 and selecting Preferences: Open Workspace Settings from the popup. After that scroll to the Files: Exclude row and add a tag - **/*.class in the list and now the .class files will not be shown in the Vscode Project File Explorer.
You can do the same method to remove .exe files by using the tag **/*.exe
for C & C++ files.
Thanks
Manpreet Singh
Open Settings and search for Files.Exclude then click on add pattern then it will give a notification
Unable to write into user settings. Please open the user settings to correct errors/warnings in it and try again.
Now open that settings.json file and search for files.exclude{ } block and include
"**/*.exe": true Here I use .exe as example, Instead of that use the extension whatever you want to block.
I hope this helps.

Github and sublimetext tab spacing

After upgrading to the new iOS and getting a ton of Java exceptions from WebStorm, I've switched to Sublimetext. I've changed my tab settings to 2 spaces (I've tried toggling between both true/false for translate tabs to spaces.
"tab_size": 2,
"translate_tabs_to_spaces": false,
This seems fine in the editor, however now on new files whenever I push to github, it's showing a full tab or 4 spaces. For those that use GitHub/Sublime, any idea how to fix this so github recognizing the tab settings also?
Thank you!
EDIT:
It turns out the following settings in sublime will do as expected:
"tab_size": 2,
"translate_tabs_to_spaces": true,
"detect_indentation" : false
It's not something you can control. Github represents tabs as 4 spaces. The actual file still consist of tabs, so will appear correctly in your text editor (assuming it is configured to 2 spaces per tab).