I have an issue where the missing dependencies warning doesn't show up any longer for useEffect in React. I am using VS Code if that matters.
Does anyone know what could be the cause for this, as right now I don't even know where to start debugging.
Please install both the Error lens and Microsoft ESLint. It worked for me.
I hope this works for you also.
your problem is related with eslint.
check your code to see is there any line of code like this?
// eslint-disable-next-line
or this:
// eslint-disable-next-line react-hooks/exhaustive-deps
if yes, delete it.
another cause can be the .eslintignore file.
check if there is this .eslintignore file exists on your project, delete it should solve your problem
In VS Code, press Ctrl + Shift + P to bring the command prompt, and run ESLint: Show Output Channel. If ESLint is missing certain React plugins, it will tell you so.
It might also be something wrong with VS Code's TS server. It is the thing that is checking for dependencies, amongst other things. Open the terminal (Ctrl + '), select the Output tab, and on the right hand side select Typescript from the dropdown menu.
If you are using Yarn v3, you need to install eslint and typescript as dev dependencies, then run yarn dlx #yarnpkg/sdks vscode and switch VS Code to the workspace version of Typescript (the prompt for that will show in a popup).
In my case, I am using React Extension Pack where some of included extension was already installed in my Vs Code. Then I uninstalled all included extension, after that again install React Extension Pack, and automatically removed all issues.
You may have disabled the react-hooks/exhaustive-deps eslint rule or extended an eslint ruleset which disables it. Make sure that the follow line is absent in any of the eslint configurations used:
'react-hooks/exhaustive-deps': 'off'
VSCode eslint will not work as expected if one of your .eslintrc configuration rules has a wrong configuration.
For example:
{
...
"rules": {
"react/react-in-jsx-scope": false, // <---- this will turn off the warning
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn"
},
...
}
and if you change 'false' into 'off' then the error will be shown up
{
...
"rules": {
"react/react-in-jsx-scope": "off", // <---- replace false into off
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn"
},
...
}
Related
I have this problem with Visual Studio Code for Windows 10: I can't see the NPM scripts in the explorer sidebar.
I deleted all the extensions, uninstalled VS Code, and installed the latest version of VS Code again with no custom options and no extensions, but it didn't solve my problem; the NPM scripts menu does not appear.
How could I fix this so that the NPM Scripts menu option is shown again?
Few places to look for the NPM-Scripts explorer :
The npm-scripts explorer can be enabled or disabled with the below settings, in VSCode's settings.json:
"npm.enableScriptExplorer": false
Default value is false, change to true and it should work. Try restarting VSCode for changes to take effect(although a restart is not often required) if it doesn't show up.
Another very hard to notice place is the three dots ... in the top right corner of your project explorer (verify if NPM scripts is checked). This is something which I had experienced personally for a different extension.
Open "File > Preferences > Settings"
Search "npm script"
Toggle "Npm: Enable Script Explorer"
Close VSCode; reopen
Version 1.59.1
Go to View -> Open View and type: npm scripts:
Appreciate I may be a bit late to answer this question. For me, this was due to npm scripts not being selected to display in explorer. Once I had selected the box, the npm scripts window was available to view.
Hopefully, this has just been fixed - see https://github.com/microsoft/vscode/issues/120279#event-4631666095 and https://github.com/microsoft/vscode/issues/120279#issuecomment-824950294 seeking test verification.
It is in the Insiders now and in Stable early May, 2021. It fixed it for me.
View/Open View...
Type NPM
Click on NPM Scripts
If it still isn't working, see https://github.com/microsoft/vscode/issues/119868
Is your package.json at the root level? Does it make any difference if you open your package.json first, and then check for the view? Or try opening another .json file (or even the Release Notes has been reported as working) and then do a Reload. Otherwise, add your info to the issue.
Work around: If I leave an editor tab open with my package.json (I have one in the root, and in two other places), close and re-open VSC, then it seems to 'find' the NPM View.
TL;DR;
My VSC (1.55.2) is inconsistently showing / not showing the NPM View.
When it starts without the view, I cannot use View->Open "npm".
No option in Explorer options (...)
When it starts with the view, View->Open has a result for "npm".
Has option in Explorer options (...)
Bug report here: https://github.com/microsoft/vscode/issues/120279
Try to delete package-lock.json and restart VSCode.
In my case it worked.
It happens to me sometimes when I open VSCODE.
Whenever it happens I simply load a package.json file.
The NPM SCRIPTS menu still appears when I close the package.json file.
If that doesn't do the trick, try installing NPM-Scripts extension.
If it worked normally before but now it does not, and you have the extension installed and enabled. Then all you have to do is open your package.json file and it will be available again.
I guess this weird behavior happens when you disable all your extensions or may happen if you're installing/removing extensions from a remote container
You can install NPM-Scripts extension which does the same as npm scripts functionality which was build into vscode.
ESLint is not working on my React project, and it keep showing below error even I reinstall vs code(version:1.52.1)
But I have another computer without any problem.
I was wondering if there are any extensions interfere with each other,
so I removed some extensions and still not working.
Here are the rest.
Open Code > Preferences > Settings
Search keyword "eslint", and enable "Always show the ESlint status bar item."
And make sure ESlint is running at bottom right.
My issue was that the settings file of the project itself (.vscode/settings.json) had the setting "eslint.enable": false, in it, for some reason. Removing that fixed the issue for me.
Recently I run into problem with ESlint extension in VS code. When I launch VS code and open up a js file, it popup message "Couldn't start client ESlint". It used to work fine. I tried to re-install eslint, VS code but it didn't help. Here are the versions I used.
VS code: 1.44.0 (user setup)
eslint: v6.8.0
ESLint Extension for VS code: 2.1.2
You need to dig a little bit more to get more details.
A good place to start would be to run the eslint show output command in VSCode. That should be a good starting point.
screenshot of ESLint: Show Output Command
The bottom line is that you need to follow the conventional installation path:
add eslint extension in vscode.
install eslint locally or globally via npm,
run eslint init in your project path and select proper configurations.
restart vscode just to make sure the settings are active.
again, the eslint output console should be a good starting point.
For me, it turns out I had the eslint.runtime and eslint.nodePath settings set to the specified node path on my system, but they were prefixed like this:
~/.nvm/versions/node/v14.17.0/bin/node
Using $HOME instead of ~ didn't solve it either.
I ended up having to specify an absolute path:
/home/<myusername>/.nvm/versions/node/v14.17.0/bin/node
I have ESlint configured with vscode using the plugin, now I'm wondering is there some way I can stop ESlint from showing me the parser/syntax errors, so I can instead view the syntax errors that the Salsa language service provides by default.
Update: please refer this updated answer
Open up settings.json and add the property:
"eslint.enable": false
Check:
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
The old:
"eslint.enable": false
Is deprecated, now you need to use the builtin VSCode mechanism for disabling extensions:
In order to disable ESLint only for a specific repo (instead of disabling it globally). Create .vscode folder in your project root and there create a settings.json then add the following config:
{
"eslint.enable": false
}
Maybe after this setting you should consider adding the .vscode/settings.json line to your .gitignore file too, but it is based on your dev team's preference.
}
Additionally if you'd like to ignore only some vendor/3PP .js files only then you should consider creating an .eslintignore file. Read more about this here.
go to File => Preferences => Settings
go to Extensions=>ESLint
Uncheck the EsLint:Enable
1-) npm install -g eslint
2-) Open up settings.json and add the property: "eslint.enable": false
In VSCode, go to
File >> preferences >> settings
Type 'eslint quiet' in the search bar and click
the check box for quiet mode.
In quiet mode, eslint would ignore basic errors.
This should work for many VSCode users as at March 4, 2022.
You're welcome!
Please open settings.json file and edit the configuration as below:
"eslint.enable": false
Hope this helps.
I don't understand why some answers states that eslint.enable is depracted. it works for me. in my WorkSpace settings (JSON), I add the following configuration and eslint errors disapears
{
...
"settings": {
"eslint.enable": false
},
}
I press Shift+Enter, but not working, Ctrl+Enter start a new line, but not add semicolon at the end of previous line. Is there a shortcut?
Now there is an extension called Colonize:
Shift+Enter Insert semicolon at the end of line and continue on the same line
Alt+Enter Insert semicolon at the end of line and continue on the new line
Ctrl+Alt+Enter Insert semicolon and stay at the same position
Visual Studio Code doesn't appear to directly support adding a semi-colon to the end of a line via a keyboard shortcut, meaning it'll need a custom extension to support it. Fortunately, Sergii Naumov has created one for us, named (appropriately) 'Trailing Semicolon'.
To install this extension:
Launch Visual Studio Code
Press "Ctrl+P" (or "Command+P" on the Mac)
type "ext install Trailing Semicolon" to search for the extension
With the extension visible below the search box, click the Install Extension icon in the bottom right of the extension. (It's a cloud with an arrow pointing down...)
You will need to restart Visual Studio Code to enable the extension (Visual Studio Code should prompt you to restart once the extension has been successfully downloaded.)
According to Sergii, the default keybinding for the extension is "cmd+;". On my Mac, this meant pressing "Command+;", which worked great.
On my Windows 10 PC, I tried several key combinations ("Window+;" "Ctrl+;" "Alt+;" etc.), and nothing worked. I opened the Keyboard Shortcut preferences (File > Preferences > Keyboard Shortcuts) and searched for the new extension. I found it listed at the end of the keybindings:
{ "key": "win+;", "command": "extension.trailing-semicolon",
"when": "editorTextFocus" }
The "win" key binding apparently doesn't work. I copied this binding to the keybindings.json file, changed "win+;" to "ctrl+;" and it worked like a charm!
Hope that helps.
I wrote an extension to mimic IntelliJ's complete statement.
Pressing ctrl+; (cmd+; on mac) appends ; to the line end,
and moves cursor to line end.
If the line already ends with ;, pressing ctrl+; just moves cursor to line end.
There is also experimental support for complete structures like class, interface, function, if, switch, for, and while. (Not understanding semantic of languages, so it may not work as you expected.)
You can install it as VSIX at GitHub.
The version vscode marketplace is outdated. (Unfortunately my M$ account has been suspended, thus I cannot update it.)
There is no way to do it by default that I could find. I just had to make do as best I could.
I ended up adding a binding via File>Preferences>Keyboard Shortcuts, and then pressing ; after the shortcut. Having the semicolon is part of the binding is as close as I could get... at least my finger is already over that key
// Place your key bindings in this file to overwrite the defaults
[
{
"key": "ctrl+;",
"command": "cursorEnd",
"when": "editorTextFocus"
}
]
This simply means that Ctrl+; brings you to the end of the line, and then tap ; again.
Update (May 2021)
Started using VSCode Vim keybindings extension a few months ago. Highly recommend it. Out of interest, semi-colon end of the line is A; with vim keys⌨️
at 2021
settings >search for colon
You will find a javascript option to insert the semi-colon.
Try install the following ext then use shortcut: Ctr+; (Cmd+;)
There is a way to have semicolon appended automatically by VSCode.
By default this property is disabled:
For Windows ctrl + ,
For Mac cmd + ,
Settings -> in Search bar type: 'semicolon' -> change values to 'insert' for both JS and TS, save and close.
Now every time on save, VSCode will look for missing semicolons inside the file you're in and append them.
I just started using Visual Studio Code and felt this requirement myself yesterday. After a quick google search I found this nice extension called "Prettier". Being a little new to VSCode it took me a few hours to get it all setup but it works like a charm now. Here are the steps and my setup. I hope it helps others.
My coding environment: VSCode running on a Windows 10 desktop environment connecting to my codebase SMB share hosted on my development machine which is running Ubuntu server 18.04.
Solution Steps
Install node on the Windows desktop
Run, npm install -g prettier
Install the Prettier extension in VSCode
Edit the settings.json file for VSCode and add the following
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
// Set the default
"editor.formatOnSave": true
Add the .prettierrc file at the root of my codebase on the ubuntu host (e.g.: /var/www/html/tutorials) with the following basic styling configuration
{
"semi": true,
"trailingComma": "all",
"singleQuote": true,
"printWidth": 80
}
Restart VSCode and open the code file
Use the existing VSCode keyboard shortcuts to apply formatting to the entire file (Ctrl+K Ctrl+F) or to a selection (Shift+Alt+F)
Or simply saving the file Ctrl+S adds the formatting while saving the file with no additional work required
Viola!
(March 2022) Missing semi colons can be added automatically without the needing of an extension (*with a little catch ;) They are added every time your code is formatted.
Go to settings: Look for this settings if you are writing javascript:
And/or go to settings: Look for this settings if you are writing typescript:
Go to settings: Look for this settings if you are writing javascript:
Format your code and semi colons will be added \o/ Yeah
*The catch: As the settings says: Your workspace needs to have typescript 3.7 or newer.
I know this is a really old post but Prettier - code formatter for vs code adds the semi colon (amongst other formatting).
ext install esbenp.prettier-vscode
If you need semicolons on Javascript/Typescript using vscode do:
Settings
type "semicolon"
you will have options for Javascript & Tyepscript
select the "insert" option as desired
You can also select semicolons for css, less, or scss
/*******/
You can select the "Show matching extensions" and get some extra help with extensions that address the same issue.
Go to settings: Look for this settings if you are writing javascript: enter image description here
And/or go to settings: Look for this settings if you are writing typescript: enter image description hereGo to settings: Look for this settings if you are writing javascript:
Format your code and semi colons will be added \o/ Yeah
*The catch: As the settings says: Your workspace needs to have typescript 3.7 or newer.
This solution works for me
Add the following configuration in settings.json：
"css.completion.completePropertyWithSemicolon": true
or you can cancel by:
"css.completion.completePropertyWithSemicolon": false
other
"scss.completion.completePropertyWithSemicolon": true,
"less.completion.completePropertyWithSemicolon": true
Add semicolon to the end of the line and go to the next line
Shortcode: ctrl+;
Install plugin: multicomando
ext install ryuta46.multi-command
Edit file: keybindings.json
// Place your key bindings in this file to override the defaults
[
{
"key": "ctrl+;",
"command": "extension.multiCommand.execute",
"args": {
"sequence": [
"cursorEnd",
{ "command": "type", "args": { "text": ";" } },
"lineBreakInsert",
"cursorDown"
]
},
"when": "editorTextFocus"
}
]
This plugin promotes a sequence of commands. Infinite possibilities!
I hope it helps someone!
You can try Semicolon Insertion Shortcut.
It's in Visual Studio's Preferences. Solution from sbi's answer here:
Go to Tools/Options/Environment/Keyboard.
Switch the "Use new shortcut in:" dropdown to "Text Editor".
Pick the Edit.BreakLine command.
In the Press shortcut keys edit pane press Shift+Enter.
Worked for me!
Ctrl+Shift+P and open Preferences:Open keyboard shortcuts (JSON) in VS Code
and insert
{
"key": "tab",
"command":"cursorEnd",
"when":"editorTextFocus"
}
tab is optional, ofc.
Put whatever you want from the keys on the keyboard.