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
},
}
Related
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"
},
...
}
I can't get the prettier extension to use my config files. It keeps using the global settings (as defined in the config path setting in vscode). I made an example project:
https://github.com/Supperhero1/prettierTest
I set tabWidth to 1 in the .prettierrc file. When I run "npx prettier --write ." the prettier package properly formats the test.ts document to have an indentation of one, but if i save the file (I have format on save turned on) it gets formatted back to the global setting (4 spaces). I deleted all settings in the global setting but then it defaults to a tab with of two spaces. The extension seems to ignore the config file completely. A collegue has the extension and it works fine with config files.
I'm trying to figure out what could be overriding the setting, the exension description says the precedence for figuring out settings is:
Prettier configuration file
.editorconfig
Visual Studio Code Settings (Ignored if any other configuration is present)
And in the official docs, the config file resolution precedence is:
A "prettier" key in your package.json file.
A .prettierrc file written in JSON or YAML.
...
Seeing how I don't have a prettier key in my package.json file, there should be nothing that can override my .prettierrc file. I tried restarting vscode but that didn't help. Has anyone else had this issue, I'm not sure where to look to solve this problem...
In VS Code press Ctrl + shift + p to open command palette then chose
Preferences: Open Settings(JSON) and add the line among other settings you have:
"prettier.configPath": ""
Save the file. Now the Prettier extension respect your local .prettierrc config files. Basically Prettier: Config Path Path to the prettier configuration file option overrides all other config files regardless of placement.
I have encountered this problem it took me a lot of time to solve it. And finally, I found the solution to my problem similar to yours.
In VS Code Press open Command Palette (Ctrl + Shift + P)
Search and select this: Format Document With...
After selecting this choose Prettier - Code formatter to make as default formatter
It seems that the VSCode prettier extension uses the config file in the VSCode settings over the local one, even if that config is an empty json file it then falls back to the default settings instead of the local ones (from .prettierrc). When I removed the path from Prettier: Config Path setting in VSCode it worked as expected.
I guess I expected the file in this path to be the fallback for when you don't have a local config file but, seeing how this file seems to overwrite every other setting, I guess the intended use is to set a User setting as default and then set a workspace setting for every workspace where you don't want to use the default. Or just leave the prop empty in the user settings.
For me it seems that my VSCode was already set to use its own internal parser and because of that it was being used instead (for example when doing format on save
I needed this in my settings.json
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
So, i got the same trouble with mistake: "Detected local configuration (i.e. .prettierrc or .editorconfig), VS Code configuration will not be used"
The solution is to disable this options in vscode prettier:
Prettier: Use Editor Config - mark it as disabled
enter image description here
I tried so many different ways that other people recommended; however, nothing worked for repository. The only way that worked with me was uninstalling prettier from VScode. My work repository currently has the following formatting rules in ".editorconfig", ".eslintrc.json", ".prettierrc.html.json", ".prettierrc.ts.json", ".prettierrc.scss.json" locally.
Adding the editor.defaultFormatter on the VSCode settings has worked for me,
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.formatOnPaste": false,
"prettier.useEditorConfig": false,
"prettier.useTabs": false,
"prettier.configPath": ".prettierrc"
}
I have Visual Code Studio(1.41.1) Editor and I need Auto Formatter
I have installed this code format: Prettier - Code formatter Successfully installed but not working,
I also tried to use the command ext install esbenp.prettier-vscode
that too was successful installation but is not working.
I checked that the composer is installed properly and the environment variable path is given correctly in my system, Also, I added it to the settings.json file by looking in the document: "phpformatter.composer": true but not success in auto-formatting my code
Visual Studio Code and System Restart also tried but did not succeed
Why can't I Auto Formatter in my Visual Studio code use this "Prettier - Code Formatter"? No errors are received, but the auto formatter is not working
try this, it worked for me
File -> Preferences -> Settings (for Windows)
Code -> Preferences -> Settings (for Mac)
Search for "Default Formatter". In the dropdown, prettier will show as esbenp.prettier-vscode.
Maybe the prettier extension is not working for javascript file. Open your settings.json for vs code and paste
{ "editor.defaultFormatter": "esbenp.prettier-vscode", "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } }
This might work for you
You may have local .vscode directory in the root of your project with settings that prevent formatting. Try to edit or remove .vscode local configurations if you have. After close and reopen VS Code.
as #harkesh kumar said : press Ctrl+shift+p and type format document then select prettier format, it may work for you
Make sure you have a file in the root folder with this name .prettierrc.js
inside you should have something like:
module.exports = {
bracketSpacing: false,
jsxBracketSameLine: true,
singleQuote: true,
trailingComma: 'all',
arrowParens: 'avoid',
};
If you don't have and don't want a prettier config file for some reason, you can uncheck the option "Prettier: Require Config"
In settings.json it's "prettier.requireConfig": true
In the UI it looks like this:
For me it was failing silently because I was using await inside of a function that wasn't marked with async. That raises another question - why would it fail silently here. Regardless, once I fixed that error then prettier began working again.
I finally found the issue. I was trying to format code on a remote server.
In the extension page for Prettier, it says:
This extension is disabled in this workspace because it is defined to run in the Remote Extension Host
Then I clicked on the button "install on remote host ..." and it worked
For about a month now, my Prettier extension has stopped working as it normally does. Most notably - format on save does not work. Other notes:
Format on typing a ; works
I get this error type symbol in the status bar next to the Prettier button - I can't find any reference to this relating to Prettier on Google:
]
I have my format on save checked in Settings:
'Format Document,Format SelectionandFormat Document with` command palette options all do nothing
Timing of the break coincides with moving from Prettier 2-3
I've followed the migration steps and think all is in order. Some snippets of the configuration between eslint and prettier that I have:
As per the prettier documentation, my VS Code settings has:
"eslint.autoFixOnSave": true, // (even though VSCode has this as deprecated), have tried with and without this line
"editor.codeActionsOnSave": {
"source.organizeImports": true,
"source.fixAll.eslint": true
},
My Dev dependencies include:
"eslint-config-prettier": "^6.5.0",
"eslint-plugin-prettier": "^3.1.2",
"prettier-eslint": "^9.0.0",
I have a prettier.config.js file
My .eslintrc.js file includes:
extends: ['airbnb', 'prettier'],
plugins: ['react', 'jsx-a11y', 'import', 'react-hooks', 'plugin:prettier/recommended'],
Anyone have any idea on how to fix this or further debugging tests to do here? It's driving me nuts!
Follow these steps:
CTRL + SHIFT + P
Format Document (in pop-up bar)
Select Format Document
Select Configure Default Formatter...
Select Prettier - Code formatter
Done!
In VSCode settings, search for "Editor: Default Formatter" and set it to esbenp.prettier-vscode
Configuration has changed you need to add this into you vs-code settings:
According to the documentation: "You can enable Auto-Fix on Save for ESLint, TSLint or Stylelint and still have formatting and quick fixes"
"editor.codeActionsOnSave": {
// For ESLint
"source.fixAll.eslint": true,
// For TSLint
"source.fixAll.tslint": true,
// For Stylelint
"source.fixAll.stylelint": true
}
On VScode go to Settings > Text Editor > Formatting
Then check the Format On Save checkbox.
For me, using prettier+(svipas.prettier-plus) -- because the default prettier plugin is no good -- ONLY changing:
"editor.formatOnSaveMode": "modifications",
to
"editor.formatOnSaveMode": "file",
solved my problem.
Try to make your code prettier manually by pressing CTRL + SHIFT + P >>> Format Document. If your file is being formatted without any issues, it means that the issue lies in formatOnSave settings. Probably, you can try to make further debugging from there.
in my case the issue was that the default formatter setting was not being used for typescript files. Looking at my settings.json I saw
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
After adjusting the value for [typescript] the issue was resolved.
I couldn't find a place Settings UI where the default formatter can be changed for TS only, but it would be a nice feature though.
For formatonSave was already checked and the defaultFormatter was prettier ... when I switched into settings.json, it was like!!
"[javascript]": { "editor.formatOnSave": false }, "eslint.autoFixOnSave": true, "prettier.disableLanguages": [ "js" ],
After changing it to
"[javascript]": { "editor.formatOnSave": true }, "eslint.autoFixOnSave": true, "prettier.disableLanguages": [],
it did work...
I had to add a jsconfig.json file containing:
{
"exclude": ["node_modules"]
}
to my app directory, and reload Visual Code, in order for Prettier to work.
Also, I can't choose "Format Document With..." in the Visual Code command palette until I add this file.
Basically it tells Visual Code that the project is written in JavaScript (if I understand it correctly) and to exclude node_modules from intellisense.
This was after doing everything else people mentioned here.
First check if Prettier works fine. You can try to format a single file using Shift + Cmd + P and Format Document. If this doesn't work then it is most likely an issue with Prettier extension. Disable and Enable Prettier extension from Extensions.
If Formant Document works fine on single file then the best way to resolve these type of issues is going to settings.json and looking up the config. I had an issue where the first few lines in settings.json had issues and hence the other settings like format on save (editor.formatOnSave) and defaultFormatter which were below the ill-formatted line wasn't working.
I tried checking the "format on save" box but it didn't do it for me, even prettier selected as a default formatter.
Editing the settings' json file worked for me :
Open the command palette with ctrl + maj + p
Search 'open settings json'
Select the user option
enter image description here
In the file look for "editor.defaultFormatter" for html (line 16 in my case)
Set its value to "esbenp.prettier-vscode"
enter image description here
Done
I had one repo formatting on save and another not, in two different VSCode windows. The broken repo was using this filename:
// incorrect
.prettierrc.json
The functioning repo was using this filename:
// correct
.prettierrc
Dropping the .json extension corrected the problem.
I use Visual Studio Code with Vetur extension, when I right click on my .vue file and chose "Format Document" option Visual Studio Code automatically add the semicolons that intentionally removed them.
How do I stop this?
Put this in your user settings and it won't change your semis:
"vetur.format.defaultFormatter.js": "vscode-typescript",
Forget the earlier answer, gives me runtime issues.
Install Prettier- code formatter extension and disable the addition of semi colons by unchecking the Prettier:Semi as in the screenshot below
Note : Dont forget to reload your vs code after you install the extension and before u do the config changes
Adding .prettierrc file in project root worked for me with following settings:
{
"semi": false,
"singleQuote": true
}
Changing prettier settings in VSCode Workspace did not work in my case.
You can go to VSCode settings and search for the prettier section.... there's an option for turning off adding semicolons....
Or, just add this line to your custom settings in VSCode:
"prettier.semi": false
I was trying to find a way to do this in the eslint config, and have vs code pick up whatever settings are in the eslint settings... but haven't found it yet. In the meantime, the above works for me...
You can add in your VSCode settings.json
"vetur.format.defaultFormatterOptions": {
"prettier": {
"semi": false
}
},
go to settings
Go to Text Editor's Settings
"javascript.format.semicolons": "remove",
"typescript.format.semicolons": "remove",
"typescriptHero.imports.insertSemicolons": false,
"typescript.preferences.quoteStyle": "single",
"javascript.preferences.quoteStyle": "single",
Editor
YouTube Video
May be, you have different extensions installed where the usage of semicolons (;) is defined.
Try to go to VSCode settings and search for "semicolon". All settings regarding the usage of semicolon will be shown and you can configure it as you like.
This is what worked for me:
"typescript.format.semicolons": "remove"
Add this line to your custom settings in VSCode (helps with js files):
"autoimport.useSemiColon": false
setting organizedimports to false worked for me
"editor.codeActionsOnSave": {
"source.organizeImports": false
},
Easiest fix is go to "Settings" in vs code, Search for ";"
In the search result that follows, remove ";" as demonstrated in the below screenshots.
Before the change:
After the change: