Every time I write something on stlye.css and save (or wait to live server to refresh), it scrolls my page up...it's really annoying, anyone know how to prevent this behavior?
The trick to solve this is to do the following
In program Visual Code:
File -> Preferences -> settings
In settings page drop down Extensions and click Live Server Config
Tick the box:
Settings:Full Reload
It stops the change of scroll position that you ask for.
However if it scrolls from top of page (in Chrome at least) down to the scroll position you're on when saving/reloading it is because you use:
html {
scroll-behavior: smooth;
}
Just comment it out under development (if you have it/use it) and want to prevent that from happening.
Input from another user:
Note: you have to stop the live server and start it again to see the changes
(happened to me)
go to live server extension and Disable then enable it ( don't forget to reload window
go to vs code setting 1) markdown> Scroll editor with preview --> "off it"
2) markdown> scroll preview with editor --> "off it"
Related
Does anyone know what the blue moving line (from left to right) in Visual Studio Code means?
It appears relatively often, especially when reactivating from hibernation mode. Looks like some background processes are currently active.
Once the bar shows, it doesn't go away until I restart the program.
It should be possible to make it transparent:
Put this into settings.json:
"workbench.colorCustomizations": {
"progressBar.background": "#fff0",
}
This occurs because when you try to find some file or functions which are not available, VsCode continues to keep trying to get that function and redirect cursor over there. So the loader stays there forever. The solution is to make VsCode look for something which it can find.
Just ctrl+click on any function which is available. Also you can ctrl+click on function where it is defined itself so it will directly point on it and loader will be removed.
For example you have below function
public function GetUSer(){
}
So just ctrl+click on GetUser and the loader will vanish.
No need to restart VsCode
Edit for js users :
Let say you have defined a variable :
var userName = 'Test';
And you have used it somewhere in the code
var userNameLength = userName.length
So just ctrl+click on userName where we get the length. It will go to defination (where the variable is defined) and the progress bar will be gone.
Like previous answer said it is a loading indicator which occurs when vscode is attempting to look something up like a function definition or trying to lint.
You cannot hide it that I am aware of but you can get it to go away obviously by relaunching vscode. It is also limited to the current editor window so you can split your editor and then close the one with the indicator.
That is a loading indicator. It happens when something is loading or is in process. It might be constantly refreshing the file tree because of changes in the directory
With VSCode 1.52 (Nov. 2020), that moving bar should be more explicit (and cancellable!)
Progress for long running operations in Explorer
We now show progress in the Explorer and Status bar for long running File operations (longer than 500ms).
There is also an inital support for cancelling these long running operations.
This should be particularly helpful when copying large folders or downloading resources from remote.
(Click on the picture to enlarge)
Perform the below changes in Visual Studio Code preferences settings
Disable Auto update
Disable Auto update of extensions
Disable error reporting service
Is there any way that we can enable auto scroll in Visual Studio Code? I have been looking in the settings but could not find anything(unless i missed something).
I am reviewing a log file and as it gets updated, its refreshed on my side. But it is not showing the latest logs but just stays where my cursor was and highlights everything that gets populated after that.
Had the same problem but did not find a setting within VS Code.
However there is an extension for VS Code:
https://marketplace.visualstudio.com/items?itemName=pejmannikram.vscode-auto-scroll
Works quite well for me.
There's now a built in VSCode setting - you can untick Smart Scroll option (output.smartScroll.enabled).
As described here:
VSCode: Turn auto scrolling permanently ON
"An option to turn off the smart scroll feature was included in one of the recents update (probably in the March 2020 update, I didn't found this on the changelog), see more: issue #69480
Since then, I've been able to "save" the scroll state, try this:
Go to File > Preferences > Settings (or Ctrl + ,)
In Features > Output, disable Smart Scroll option (or search output.smartScroll.enabled)"
Is there any way to completely remove this message popup or move it to somewhere?
I already know why this message comes, but I do not want to disturb my activity with annoying info popup.
When it pops up it hides the document tab, so I have to close it every single time. (I do not want to know how to fix this particular error message, this screenshot is just an example.)
It's very annoying and I've searched around for a way to remove it, but the answers keep saying how to fix that particular error and not how to hide the popup itself.
Press ESC.
I agree that this is really annoying. VS Code is all about high-speed workflow and not having to interact with anything except your code via keyboard. Everything has key chords, e.g. CTRL-P and CTRL-SHIFT-P. So having to stop what I'm doing, go to the mouse, and dismiss this popup, whenever a background task feels like completing (and not even really then, because the popup actually appears some short time later) just so I can get visual confirmation of which file I'm currently coding in, to refocus my work after being distracted by the same popup, is really awkward. They are in a stupid location and don't even fade away after time like well-behaved toasts.
That said, I think that's really two parts; the distraction, and relatively high workflow cost to dismiss.
It helped me a lot to learn that it can be dismissed quickly and easily with the ESC key. The other half the problem I still haven't solved, but hope that helps you.
In the screenshot it shows trying to validate PHP.
In a VS Code window select File > Preferences > User Settings
An editor will open on the left called Default Settings and on the right with a file called settings.json
In the right side editor you can add settings that will override those found in the left-hand-side one.
Between the braces type:
// Whether php validation is enabled or not.
"php.validate.enable": false,
Then save the document.
VS Code will no longer attempt to validate PHP files.
You can override any of the defaults using this method.
You can use the same technique for each Workspace (or project folder) using File > Preferences > Workspace Settings
You can't disable the alert bar in general as VS Code needs to tell you things and doesn't (thankfully) use modal dialogs to communicate.
Go to File > preferences > settings
Then add this to your user settings
"editor.parameterHints": false
You may want to try adding the line
"extensions.ignoreRecommendations": true
to your VS Code settings file (which you can easily reach with the keystroke (CMD + ,) on a Mac OS X or macOS system.)
Solution: User Preferences > change "editor.parameterHints": true to "editor.parameterHints": false
This will at least remove the obstructive boxes that appear above the cursor.
I created a javascript file in Plunker and I want to debug it. When I open 'Sources' panel, I don't see js file that I created. I only see plenty of Plunker js files. Please advice. Thanks
Another way is to put this in your javascript file
debugger;
and leave the console open, which will force the debugger to not only stop there but to also open the file.
You have two main options to drill down to the source file that you created.
1. Use the pop-up window mode of the preview panel
By default, the previewer runs inside an <iframe> inside the plunker webapp. You can ask plunker to show the previewer in a separate window by clicking the blue expand icon in the top right of the preview window. If you open dev tools for the pop-up window, you will only see your source files.
2. Right click the preview and hit inspect element
Doing it this way will let you use the embedded, live preview and will give you a shortcut to drill down to the DOM associated with your code.
The picture is worth thousand words...
F12 and then select sources; plunkerPreviewTarget has the source code
A quicker way I found is to simply grab the unique id of your plnk.
In normal 'edit' mode URL will be something like
http://plnkr.co/edit/P0fqZG6G6khKKrtfBkDP?p=preview
Simply append this id - P0fqZG6G6khKKrtfBkDP to the URL
http://run.plnkr.co/plunks/ therefore becoming
http://run.plnkr.co/plunks/P0fqZG6G6khKKrtfBkDP/
Important: Make double sure you add the trailing /
Open new URL in a new chrome window
Hit F12 in chrome, voila native angular JS debugging for your plnk
Note: You can then continue editing in plnkr, saving, and simply refreshing this URL when debugging, to maintain your active debugging session.
This may change, but currently on Chrome 47.0.2526.111 m on Windows 10, 64 bit, this is how you can find your plunk source files:
Open developer tools (F12)
Open sources
Look for run.plnkr.co
Expand this to show a single directory with a cryptic name
Inside, you will find your files so you can start debugging
First introduction to chrome apps. I'm trying to get some sort of workflow down. I've enabled the checkbox to collect errors, but can not seem to clear them between executions of the app. I assumed closing the app them re launching it would do the trick. The only thing that works right now is deleting the app then reloading the package.
To clear the list of errors at "Collect errors":
Toggle the "Developer mode" checkbox (disable, then re-enable).
Click on the Reload link (reload extension/app).
Refreshing the page instead of reloading the app/extension also works.
Using the 39.0.2171.95 64-bit Chromium all I need to do is toggle the Developer mode
I think the solution suggested by Rob does not work anymore for recent versions of Chrome.
You clear the errors by following the steps below.
Go to chrome://extensions
If it's not enabled, enable the Developer mode, see below.
Click on the Errors button (in red in the picture below) on the extension.
Now you can either delete each single error by clicking on the trashbin icon next to it, or you can just clear all errors by clicking on the Clear all button depicted below.