Red Squiggly Lines in VS Code - javascript

My Visual Studio code editor keeps underlining my code incorrectly and I don't know how to stop it.
Here is an example of my JavaScript being squiggled:
I have tried installing prettier, eslint but it does nothing to solve this.
How can I stop these squiggly lines from appearing incorrectly? I want them IF they are correct.
If I click on the problems tab, it shows this:

Solved! Thanks to zscoop98's answer, I was able to find this page which showed there exists an option standard.enable in settings.json that, after setting that from true to false, it solved the issue and there are no longer these annoying red squiggly lines.

And you can uninstall ESLint extension in vs code to get rid of red lines.You can search ESLint extension in extions folder of vscode

Related

My js code doesn't show any definition when hover or press ctrl+k or ctrl+space

My question simply is:
I can't show any definition when hover on my specially my javaScript code
even by hovering or pressing ctrl+k or ctrl+space
I tried my ways but I can't reach this point
Installing the Visual Studio IntelliCode extension will fix that.
But even with that installed, since JavaScript is a loosely typed language, things like variables will just show any when you hover over them.
Installing IntelliSense removed this issue for me.

eslint tells me there are warnings, but doesn't show them

I am using vscode with eslint. It shows me this:
How do I actually see what those errors and warnings are, so I can fix them?
Clicking on that blue bar takes me to line 4292 in the code, but there's no indication of what's wrong...

Visual Studio Code and ESLint aren't detecting typos e.g. "style.backgroundCOlor". How can I fix this?

When I'm using Visual Studio Code and the extension "ESLint" my typos are not being recognised. These typos are actually workable (but not working because of the typo) code not just comments. I am new to Visual Studio Code and most of my experience has been with Brackets.
I've tried looking in the ESLint extension files: eslintrc.js, package-lock.json and package.json. I've also looked at my "code-workspace" file but I really don't know what I'm looking for.
document.body.style.backgroundCOlor = "#f00";
The line of code simply won't work because of the obvious upper-case "O". The code obviously works when the "O" is lower-case. It took so long to find this typo because it wasn't being flagged as an error.
Any help is greatly appreciated.
As mentioned by #Olian04, you can put //#ts-check at the top of your file, what you can also do is add "javascript.implicitProjectConfig.checkJs": true in your settings.json file to automatically do this for every file, without having to add this comment at the top of every file and cluttering code (albeit in a very minor way).
To find the settings.json file, hit cmd + , and click on the braces in the top right corner.

Visual Studio Code - Missing most syntax highlighting for JavaScript

When editing JavaScript files in Visual Studio Code on my Mac I'm only seeing very basic syntax highlighting. The same also applies for TypeScript files.
I'm certain there used to be more syntax highlighting when editing JavaScript and TypeScript files.
I already tried to disable all extensions but it didn't help.
Visual Studio Code version: 1.25.1
How can I re-enable proper syntax highlighting in Visual Studio Code?
Uninstall Visual Studio Code using the description here: How to completely uninstall vscode on mac
After a reinstall of Visual Studio Code syntax highlighting works fine again.
Please try to switch color theme back and forth (Ctrl/CMD+Shift+P and type theme and then select random one. Repet procedure to revert to one you choose).
For me it solves issues with syntax highlighting in version 1.38.1
I had some problems with my js/ts codes syntax highlighting.
(In the basic theme, 'functions' don't turn yellow, 'booleans' don't turn dark blue, 'types' don't turn green. However, when I hovered them, they showed the right colors)
I looked for the answer everywhere but not solved. Today I accidentally uninstalled the extension "Syntax Highlighter", and it just solved.
enter image description here
I believe this is not the problem of the extension, but it may somehow cover the config of original js/ts.
Hope this can help someone who has the same problem.

Chrome DevTools won't let me set breakpoints on certain lines

In the image above, I tried setting breakpoints on every line from line 437 to line 443. However, I cannot set breakpoints on lines 439 and 440. When the function runs, the breakpoints on lines 437, 438, 441, and 442 are ignored. Chrome breaks on line 443. This means that I cannot do some debugging before the first conditional runs.
When I click on lines 439 or 440, the breakpoint appears for half a second and jumps to line 443.
Is this a bug or am I missing something? How do I set a breakpoint at or before line 439?
If you are using js minification and sourcemaps, ensure that they are up to date with your source code.
I have same problem in chrome dev tool source panel snippets when I write some codes to test my idea.
Only way for me worked is close dev tool panel and refresh page then reopen
This problem happened after I modified codes in debug mode
This was frustrating for me today but I found the problem. I was trying to place a breakpoint inside an orphan function (nothing was calling it). As soon as I fixed it, all was well. Smart - but wish there was even a tiny hint that this was the case.
I think that my classmate and I had this issue as well today. We made our changes and then hit Ctrl + S (or Cmd + S) to save the changes in the debugger and then we were able to add the breakpoints.
This recently became an issue for me, running System.js and Babel, and with plain ES6 transpiling, I haven't gotten to minifying/mapping yet. A workaround seems to be to add your breakpoint to the !transpiled file, a matching breakpoint will automagically appear in the corresponding line in the raw file.
In my case, I could not put a break point on the calling function line, but it worked into the function... weird but at least it works.
I just had that problem and realized that what I saw in the dev tools source was not the code that actually ran in the browser.
Make sure you empty your cache and reload and have the up to date code.
My problems where in sourcemaps definitions.
I solved my chrome debugging problems with this article: https://www.mistergoodcat.com/post/the-joy-that-is-source-maps-with-vuejs-and-typescript
I was allmost there, all i had to change was at vue.config.js: devtool: "inline-source-map" -> devtool: "eval-source-map"
In my case it was, most likely, a bug in the devtools. When I clicked to set a breakpoint inside an async function nothing seemed to happen, no visual indication of the breakpoint. Although outside the function it showed the blue mark correctly.
But when I ran the code it turned out that all the breakpoints had been set actually.
In my case, it turned out the function I was trying to add a breakpoint in, was never called but I'm not sure why it didn't allow me to add a breakpoint that would never hit anyway.

Categories