With the help of eslint plugin,we can get a warn in vscode when there are some mistakes in the sourcecode.
But after that,how could I format the code to remove these mistakes?If I just achieve the build-in format command,It will get a result not suitable with eslint's configuration.
So,is there a plugin which can solve this problem?
When ESLint highlights code with an error, if you place cursor on the part of code that has red squiggly under it, you should see a light bulb icon show up in the gutter. Clicking that light bulb will give you a menu to autofix this instance of the error, all instances of the errors from this rule, or autofix all fixable rules. You can also assign shortcuts to those actions and call them from keyboard.
Related
When writing JSX (or any typescript code really) if you have an available import that's not yet imported, you get a squiggly line under it and can press ctrl+dot on it and then automatically import the code as a "refactoring."
How can I set this up in Javascript? I've seen a screenshot of someone else's VSC where it is available underneath "more options" and so I'm pretty sure it's possible, but when I press ctrl+dot I get nothing.
Note: I'm aware I can press ctrl+space. However, I don't want to do this, for two reasons. (1) alt+space is pretty bad UX because if you press it in the middle of a word it continues to autocomplete even if you already had the full name there and so you are left with an incorrect tag (e.g. if your cursor was after the d in Keyboard for a component called KeyboardRow you are left with KeyboardRowRow) and (2) I want to rebind quick fix to alt+enter to match pycharm; and I want the same hotkey & UX in both Typescript and Javascript.
I haven't worked too much with JS, mainly with TS, but I have two extensions installed in my vscode that helped me a lot while coding in vanilla JS.
Path intellisense and Auto import
You can try if My Code Actions can be used to construct a Quick Fix for these types of PROBLEMS/squiggles
I love the dash effect instead of the squiggles in the Neon Night VSCode theme, but some of the ui colors are a little bright for me. Anyone know how it is achieving the effect? I'm trying to apply the effect to a different theme, and have even downloaded/combed through the GH repo, but haven't managed to figure it out. My apologies if this has already been asked. If my google-fu is broken, please be kind.
Theme author here, this was also posted as an issue on the repo and I wrote the response on the issue.
Here's what I shared...
You want to use these selectors:
editorError.foreground: error squiggles
editorWarning.foreground: warning squiggles
editorInfo.foreground: info squiggles
https://github.com/chaseadamsio/vscode-theme-neon-night/blob/mainline/src/colors/editor.js#L42-L45
you can set these on your workbench too (so you can use your favorite theme without forking) by adding them to your settings.json like this:
{
"workbench.colorCustomizations": {
"editorError.foreground": "#f00"
}
}
You can read more about them here and search for "Errors and warnings".
I found the 'offending color'.
"editorUnnecessaryCode.border": "#FF8E8E"
I found this by binary elimination of the theme entries.
I think it is implemented with a text Decorator, because I could not find as a style of the span with the Developer Tools of VSC.
The dash decoration is usually created by the semantic code check. Squiggles are the result of syntactic checks. So it's not a theme speciality and would appear similar with other themes.
Hover with the mouse over the dash decoration to see what vscode suggests to do.
Today, I was watching a video tutorial. The tutor did a minor mistake in his code and while he was trying to find out what the mistake was, he hoverd over the code and exactly at the place, where his error was, VSCode popped up with an Error message like this:
Does any one know how can I activate this in my VSCode? Do I need to install an extension?
The setting is called "Editor > Hover: Enabled". You can search for it in the VSCode settings and make sure the box is checked to enable it.
this should be a built in feature but may need enabling it..
more info at
https://developercommunity.visualstudio.com/content/problem/249839/vs2017-1571-no-values-on-hover.html
Currently eslint/tslint highlighting for issues/errors is super invisible (comparing, for example, to Atom). Its almost impossible to catch the issue - find the small green highlight zone (see screenshot)
VSCode:
Atom:
Question is not relevant since June 2018 (VSCode now has awesome highlights)
Simple. I use 2 extensions for that:
Error Lens (usernamehw.errorlens) for highlight the entire line and show on real time the error diagnostic
Error Gutters (igorsbitnev.error-gutters) for put error icons next of line number
Both look like this:
For those who would like a partial solution for this you can actually open up the console in vscode on the PROBLEMS tab to display all errors on across your application grouped by file.
I would prefer the inline visualised approach, but this does resolve this problem more or less.
To open the PROBLEMS tab, click CMD+Shift+M on Mac.
Not sure about windows.
when I code in javascript in vscode and get unknown variable underline in green, I can get the light bulb prompting up, suggesting to add some type definition file. However when coding in typescript, this awesome feature is gone away with just red underline remain. Any idea to get the same light bulb when coding in typescript?
Code actions ('light bulp') are not yet available when editing TypeScript. Please vote for adding it on User Voice