Why is VSCode showing this error?
It's just a jsconfig.json file.
NOTE: I'm not using TypeScript.
Try adding "exclude": ["node_modules"] as described in the VSCode docs.
I added this and restarted VSCode and the error message went away.
Disabling typescript in the workspace options seems to be the one thing that stopped this warning for me:
"typescript.validate.enable": false,
I was facing the issue in Vuejs/Nuxtjs project:
Check the jsconfig.json file in root and include the following things if not available already:
"exclude": ["node_modules"]
{
"compilerOptions": {
"target": "es6",
"baseUrl": "."
},
"exclude": ["node_modules"]
}
Important
If you are getting the error even after having these values then you SHOULD RESTART vs code application
Add "exclude": [ "node_modules/**/*", ], in the tsconfig.json file and if it still doesn't work, try reloading the VSCode by pressing Crtl + Shift + P and Reload Window and it should work.
I also had some issues like this while using node modules. I just recreated the project copied and pasted all the code that i needed and installed every node modules after that i was able to fix the issue. However i dont recommend for large projects.
I am using VS Code with Prettier 1.7.2 and ESLint 1.7.0.
After every newline I get:
[eslint] Delete `CR` [prettier/prettier]
This is the .eslintrc.json:
{
"extends": ["airbnb", "plugin:prettier/recommended"],
"env": {
"jest": true,
"browser": true
},
"rules": {
"import/no-extraneous-dependencies": "off",
"import/prefer-default-export": "off",
"no-confusing-arrow": "off",
"linebreak-style": "off",
"arrow-parens": ["error", "as-needed"],
"comma-dangle": [
"error",
{
"arrays": "always-multiline",
"objects": "always-multiline",
"imports": "always-multiline",
"exports": "always-multiline",
"functions": "ignore"
}
],
"no-plusplus": "off"
},
"parser": "babel-eslint",
"plugins": ["react"],
"globals": {
"browser": true,
"$": true,
"before": true,
"document": true
}
}
The .prettierrc file:
{
"printWidth": 80,
"tabWidth": 2,
"semi": true,
"singleQuote": true,
"trailingComma": "es5",
"bracketSpacing": true,
"jsxBracketSameLine": false,
}
How can I get rid of this error?
Try setting the "endOfLine":"auto" in your .prettierrc (or .prettierrc.json) file (inside the object)
Or set
'prettier/prettier': [
'error',
{
'endOfLine': 'auto',
}
]
inside the rules object of the eslintrc file.
If you are using windows machine endOfLine can be "crlf" basing on your git config.
change this setting on VSCode.
In my windows machine, I solved this by adding the below code snippet in rules object of .eslintrc.js file present in my current project's directory.
"prettier/prettier": [
"error",
{
"endOfLine": "auto"
},
],
This worked on my Mac as well
Solution
git config --global core.autocrlf false
After global configuration, you need to pull the code again.
Root cause of the problem:
The culprit is git, a configuration property of core.autocrlf
For historical reasons, the line breaks of the text file on windows and linux are different.
Windows At the time of line break, carriage return is used at the same time CR(carriage-return character) and line breaks LF(linefeed character)
Mac and Linux only use the newline character LF
Old version of Mac uses carriage return CR
Therefore, there will be incompatibility problems when text files are created and used in different systems.
When I clone code on Windows, autocrlf is true as default and then each line of the file is automatically converted to CRLF. If you do not make any changes to the file, eslint delete CR by pre-commit since git automatically convert CRLF to LF.
Reference
https://developpaper.com/solution-to-delete-%E2%90%8Deslint-prettier-prettier-error/
in the file .eslintrc.json
in side roles add this code it will solve this issue
"rules": {
"prettier/prettier": ["error",{
"endOfLine": "auto"}
]
}
If the above code is not working for you try these two steps.
1.
in the file .eslintrc.json inside rules object add this code it will solve this issue
"prettier/prettier": ["error",{
"endOfLine": "auto"}
]
2
Change dev server --fix
npm run dev
To
npm run dev --fix
OR
npm run lint -- --fix
yarn run lint -- --fix
Fixed - My .eslintrc.js looks like this:
module.exports = {
root: true,
extends: '#react-native-community',
rules: {'prettier/prettier': ['error', {endOfLine: 'auto'}]},
};
Try this. It works for me:
yarn run lint --fix
or
npm run lint -- --fix
As you can see add this into .eslintrc works!
I know this is old but I just encountered the issue in my team (some mac, some linux, some windows , all vscode).
solution was to set the line ending in vscode's settings:
.vscode/settings.json
{
"files.eol": "\n",
}
https://qvault.io/2020/06/18/how-to-get-consistent-line-breaks-in-vs-code-lf-vs-crlf/
In the .eslintrc file add the following:
extends: ['prettier'] and plugins: ['prettier']
rules: {'prettier/prettier': ['error', {endOfLine: 'auto'}]}
In .prettierrc remove this:
endOfLine: 'auto'
It works for me.
Fixed: My eslintrc.js some rule look like this:
rules: {
'prettier/prettier': ['error', { "endOfLine": "auto"}, { usePrettierrc: true }], // Use our .prettierrc file as source
'react/react-in-jsx-scope': 'off',
'react/prop-types': 'off',
'simple-import-sort/imports': 'error',
"simple-import-sort/exports": "error"
}
I am using git+vscode+windows+vue, and after read the eslint document: https://eslint.org/docs/rules/linebreak-style
Finally fix it by:
add *.js text eol=lf to .gitattributes
then run vue-cli-service lint --fix
Add this to your .prettierrc file and open the VSCODE
"endOfLine": "auto"
npm run lint -- --fix
Run this command this worked for me
Add these below rule in .eslintrc file and then restart your project.
rules: {
'prettier/prettier': ['error', { "endOfLine": "auto"}, { usePrettierrc: true }],
}
In my case I am using windows OS and git code supports in Mac and getting converted to CRLF
run below Command in cmd prompt to stop files getting converted to CRLF:
git config --global core.autocrlf input
Checkout the code again and open Visual Studio Code again and run your scripts again. It worked for me.
I tried everything here and for me, I needed to manage prettier config extension through icon extensions > prettier > small engine > extensions settings > Prettier: End Of Line > set to auto.
After adding these two lines in my settings.json
"eslint.run": "onSave",
"editor.formatOnSave": true,
I was able to use the config below inside .eslintrc.js rule.
"prettier/prettier": ["error", {
"endOfLine":"auto"
}],
Check the right-hand side of VS Code's status bar at the bottom where it shows information such as line and column, spaces, text encoding (UTF-8 etc). You should see a Select End Of Line Sequence status display (either LF or CRLF) that you can click on to change. Make sure you haven't manually changed this to something that conflicts with what you wish Prettier to use.
I was having the same problem in my nest js app . Adding the below code to .eslintrc.jsrules and then running yarn run lint --fix fixed the issue .
'prettier/prettier': [
'error',
{
endOfLine: 'auto',
},
],
and my .eslintrc.js rules looks something like this..
rules: {
'#typescript-eslint/interface-name-prefix': 'off',
'#typescript-eslint/explicit-function-return-type': 'off',
'#typescript-eslint/explicit-module-boundary-types': 'off',
'#typescript-eslint/no-explicit-any': 'off',
'prettier/prettier': [
'error',
{
endOfLine: 'auto',
},
],
},
Solution
1. Disable auto conversion git setting
git --global config core.autocrlf false
2. Remove old cache data
git rm --cached -r .
3. Reset git files
git reset --hard
if you have already checked out the code
git config --global core.autocrlf input
git rm --cached -r .
git reset --hard
Error appears when I pull code from git, and this work for me:
STEP 1:
git config --global core.autocrlf false
STEP 2:
delete your current folder
STEP 3:
pull code from git again
try running command again
executing eslint for linting and fixing solved my issue.
eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore
or if you have lint script: npm run lint
The best solution is to use .editorconfig. Especially if you are working with a team with different type OS. So disabling prettier in .eslintrc is not a good option at all.
Install .editorconfig from your vscode extension. Create a .editorconfig file in your project root directory and it to your .gitignore file so it won't bother your teammates.
Add this to your .editorconfig file or choose what workflow settings you need from the documentation.
[*]
end_of_line = lf
This will save your file automatically to EOL type lf instead of crlf in windows. Vise versa if using mac. Or depends on the project workflow setup.
The root cause is windows is default to crlf. So every time you try to create a file you will face this prettier Delete 'cr' error.
In Addition
If all the files you got from git contains Delete 'cr'.
Delete your project
Reinstall your git and choose checkout as-is, commit Unix-style line endings
Clone your project from repo again
Use the .editorconfig set up above
In the root open the .editorconfig file and change:
end_of_line = lf
to
end_of_line = auto
This should fix it for new files.
What worked for me was:
Update prettier to version 2.2.1 (latest version at the moment) as Roberto LL suggested. To do it execute
npm update prettier
Execute lint fix as Hakan suggested (This will modify all files in the project to convert line ending to LF).
npm run lint -- --fix
It was not necessary to change .eslintrc and .prettierrc files!
edit your .eslintrc.json file and update "prettier/prettier" value shown below.
I face same problem and fixed using below changes.
"prettier/prettier": [
"error", {
"singleQuote": true,
"parser": "flow"
}
],
If you need to use with .prettierrc.js:
module.exports = {
...[config params],
endOfLine: 'auto',
};
Note! Not in rules or prettier/prettier.
Info here https://prettier.io/docs/en/options.html#end-of-line
I upgraded to "prettier": "^2.2.0" and error went away
Sometimes when I startup VSCode and I save an JS file, everything gets messed up.
example
From:
To:
On save
What I found out:
When I change a VSCode User setting (something related to the prettier plugin | anything (I normally change the prettier.eslintIntegration but it could be that any change in the setting resolves it)) it stops breaking on save.
Possible related environment details
// Part of .eslintrc
{
parser: 'babel-eslint',
extends: ['airbnb', 'prettier'],
plugins: ['prettier'],
rules: {
'prettier/prettier': 'error'
}
...
}
// .prettierrc.yml
printWidth: 80
tabWidth: 4
useTabs: false
semi: false
singleQuote: true
trailingComma: es5
bracketSpacing: true
jsxBracketSameLine: false
arrowParens: always
// Part of my VSCode 'User Settings' file
"javascript.format.enable": false,
"javascript.validate.enable": false,
"prettier.eslintIntegration": true,
"typescript.format.enable": false
// Possible related modules from my package.json
"babel-eslint": "^8.2.1",
"eslint": "^4.16.0",
"eslint-config-airbnb": "^16.1.0",
"eslint-config-prettier": "^2.9.0",
"eslint-import-resolver-webpack": "^0.8.4",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-prettier": "^2.6.0",
"eslint-plugin-react": "^7.5.1",
"prettier-eslint": "^8.8.1",
VSCode Extension suspects:
dbaeumer.vscode-eslint
esbenp.prettier-vscode
If any other (debugging) information needs to be provided, please shoot.
For me the issue was that the Beautify extension performed the formatting in .js files, and it didn't know how to handle JSX syntax.
The solution was to prevent Beautify from formatting Javascript files.
In order to do so you need to add the following setting to your User Settings in VSCode (reachable using ctrl+shift+p and selecting Preferences: Open User Settings):
"beautify.ignore": [
"**/*.js"
]
I had similar issues using ESLint and Prettier together in VS Code. After trying dozens of ways, the following configuration works for me.
ESLint and Prettier are installed globally on my machine.
I am using these extensions:
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
My .eslintrc.json file looks like this:
{
"env": {
"browser": true,
"commonjs": true,
"es6": true
},
"extends": ["eslint:recommended"],
"parserOptions": {
"sourceType": "module"
},
"rules": {
"indent": ["error", 4],
"quotes": ["error", "single"],
"semi": ["error", "always"],
"no-console": "off"
}
}
In your VS Code, please go to Preference > Settings > User Settings and add the following lines:
"editor.formatOnSave": true,
"prettier.tabWidth": 4,
"prettier.eslintIntegration": true,
"prettier.stylelintIntegration": true
I am not using eslint-config-prettier or eslint-plugin-prettier and everything works fine for me.
Important: Please make sure you do not have any other automatic formatter (other than Prettier) extension installed.
When using VSCode, Prettier and ESLint the same time you may have different conflicting rules.
Setting rules manually in VSCode and ESLint may have no effect, but try to do that first. Also, Prettier settings may be saved in its own config file - .prettierrc or some like that.
If no effect, then check these:
In dev dependencies is proper version installed [eslint-config-prettier][1]
If you've used React/Vue/other-3d-party tool or source, you have to check that you're use NOT #vue/eslint-config-prettier version (see package.json and lock files)
In eslintrc file there is extends: ['prettier']. Same as the previous check there no library depended version specified.
I had this issue after a VSCode update. I downgraded to the previous version and Prettier worked normally again.
The issue for me is that I had both Prettier and JS-CSS-HTML-formatter installed in VS Code. As soon as I uninstalled JS-CSS-HTML-formatter the issue went away.
I had the same issue. I uninstalled the extension and it solved the problem.
In VSCode, I get the error:
"Experimental support for decorators is a feature that is subject to change in a future release. Specify '--experimentalDecorators' to remove this warning."
I can add the --experimentalDecorators flag to my tasks.json file to remove this error on build, but I can't seem to remove it from my intellisense or error list when I load VSCode.
Is there a way to do this?
I was having this same error. I added the following tsconfig.json file to my project root, restarted VSCode and it finally went away:
{
"compilerOptions": {
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"module": "amd",
"target": "ES6"
}
}
UPDATE:
I've noticed that sometimes VS Code will not suppress this warning until you add a "files" array in your tsconfig.json, even an empty one will work. For me this has worked every single time now, if the message does not disappear, try the following:
{
"compilerOptions": {
...
},
"files": [],
"exclude": [
"node_modules"
]
}
Perhaps this will explain why everyone has mixed results?
VSC is by default looking at its own TS library and definition. If you're using a different version (which is very likely) you should point VSC to look for that versions definition.
In my settings.json file, i have the following set up:
// Place your settings in this file to overwrite default and user settings.
{
"typescript.tsdk": "node_modules\\typescript\\lib"
}
I believe you can set this for either your User Settings or your Workspace Settings. So you can do a one time configuration in your User Settings or just for one project/workspace. This works if you have your typescript installed locally in the specified folder - which i believe is the default nodes module folder.
To edit your settings go to File/Preferences/User Setting or File/Preference/Workspace Settings.
UPDATE: Visual Studio Code just released a new version with better support for different versions of typescript. Check it out here: https://code.visualstudio.com/updates#_languages
I've to add the following in the settings.json file of vscode to remove the warning.
"javascript.implicitProjectConfig.experimentalDecorators": true
VSCode -> Preferences -> Settings
You could do it the hard way by deleting the lines which create the error in %code%\resources\app\plugins\vs.language.typescript\lib\tsserver.lib.
Look for the following code and delete it
if (!compilerOptions.experimentalDecorators) {
error(node, ts.Diagnostics.Experimental_support_for_decorators_is_a_feature_that_is_subject_to_change_in_a_future_release_Specify_experimentalDecorators_to_remove_this_warning);
}
Struggling with this across two different Angular 2 final release projects, this is my solution.
tsconfig.json in the src fold.
{
"compilerOptions": {
"experimentalDecorators": true
}
}
AND
Add this setting to File->Preferences->User settings
"typescript.tsdk": "node_modules\\typescript\\lib"
As other answers pointed out, your Visual Studio Code needs to find the tsconfig.json file.
I had the same problem. And it's mostly because I didn't realize the project structure.
(Hint: Read the text from top to bottom in the picture below).
I had confused the tsconfig.json with the tsconfig.app.json.
And I had opened the wrong folder in Visual Studio. As a result, the tsconfig.json was not in scope.
Simply opening the right root folder (i.e. the project folder, one level higher than the src.) solved the problem for me.
This helped me with React JS files (VSCode Version 1.9.1).
1) Put into tsconfig.json:
{
"compilerOptions": {
"experimentalDecorators": true,
"allowJs": true
}
}
2) Restart VS Code.
Note: as Tim mentioned below, you need to add the tsconfig.json even if your not using TypeScript.
Source: https://ihatetomatoes.net/how-to-remove-experimentaldecorators-warning-in-vscode/
You can use "typescript.tsdk" in setting.json to change specific folder path containing tsserver.js and lib.ts files used by VSCode.
See this example: Can I use a relative path to configure typescript sdk?
note: You find setting.json in File > Preferences > User Settings.
If you use Grunt (grunt-ts), you must also add "experimentalDecorators: true" as option in the file gruntfile.js .
Your file should look something like this at the end:
module.exports = function(grunt) {
grunt.initConfig({
ts: {
default : {
src: ["**/*.ts", "!node_modules/**"]
},
options: {
experimentalDecorators: true
}
}
});
grunt.loadNpmTasks("grunt-ts");
grunt.registerTask("default", ["ts"]);
};
For more information you can read documentation on github https://github.com/TypeStrong/grunt-ts#experimentaldecorators
In Visual studio code 1.3.1 my fix is in C:\Program Files (x86)\Microsoft VS Code\resources\app\extensions\typescript\server\typescript\lib\tsserver.js and comment out or delete the line.
if (!compilerOptions.experimentalDecorators) {
error(node, ts.Diagnostics.Experimental_support_for_decorators_is_a_feature_that_is_subject_to_change_in_a_future_release_Specify_experimentalDecorators_to_remove_this_warning);
}
I was having same error i figure it out as this was i name component file extension as .js it should be .ts
Even when opening VSCode at the right level within your project you might still need an extra tsconfig file in your root. I now have a tsconfig in my project root (only containing php index and folders), ts folder (legacy typescript classes) and my src folder (vue components).
Don't forget to close the folder and to restart VSCode.
Please check you oppened in your VS Code the folder of the entire project and not only the src folder, because if you open only the src, then ts.config.json file will not be in scope, and VS will not recognize the experimental decorators parameters.
In my case this fixed all the problem
I already had experimental decorators enabled in tsconfig.json, so I was a bit baffled until I found this thread on GitHub where someone says to check the settings in VS Code.
So I went to File --> Preferences --> Settings and searched for experimental decorators and checked both of these settings:
Here are the details of my version of VSCode:
Version: 1.52.1 (user setup)
Commit: ea3859d4ba2f3e577a159bc91e3074c5d85c0523
Date: 2020-12-16T16:34:46.910Z
Electron: 9.3.5
Chrome: 83.0.4103.122
Node.js: 12.14.1
V8: 8.3.110.13-electron.0
OS: Windows_NT x64 10.0.18363
Below answer for VSCode version 1.60.12
press "ctrl" + ",".
type "settings.json".
see this image to click on settings..
paste "js/ts.implicitProjectConfig.experimentalDecorators":true -->
See my settings for reference