We Keep Coding

Invalid prettier configuration file detected in VS Code

Booted up my VM running xubuntu in vmware workstation 17 pro. Started working on an exercise in the Odin project in VS Code, beforehand, updated and upgraded via sudo apt-get update and upgrade. Started working and noticed my prettier rules were not formatting on save.
The following error occurs:
["INFO" - 5:58:23 AM] Formatting completed in 6ms.
["INFO" - 5:58:30 AM] Formatting file:///home/t/repos/css-exercises/flex/03-flex-header-2/style.css
["ERROR" - 5:58:30 AM] Invalid prettier configuration file detected.
["ERROR" - 5:58:30 AM] No loader specified for extension ".prettierrc"
Error: No loader specified for extension ".prettierrc"
at Explorer.getLoaderEntryForFile (/home/t/.vscode/extensions/esbenp.prettier-vscode-9.10.3/node_modules/prettier/third-party.js:8194:17)
at Explorer.loadFileContent (/home/t/.vscode/extensions/esbenp.prettier-vscode-9.10.3/node_modules/prettier/third-party.js:8448:29)
at Explorer.createCosmiconfigResult (/home/t/.vscode/extensions/esbenp.prettier-vscode-9.10.3/node_modules/prettier/third-party.js:8453:40)
at runLoad (/home/t/.vscode/extensions/esbenp.prettier-vscode-9.10.3/node_modules/prettier/third-party.js:8464:37)
at async cacheWrapper (/home/t/.vscode/extensions/esbenp.prettier-vscode-9.10.3/node_modules/prettier/third-party.js:8294:22)
at async Promise.all (index 0)
at async t.ModuleResolver.getResolvedConfig (/home/t/.vscode/extensions/esbenp.prettier-vscode-9.10.3/dist/extension.js:1:5693)
at async t.default.format (/home/t/.vscode/extensions/esbenp.prettier-vscode-9.10.3/dist/extension.js:1:13308)
at async t.PrettierEditProvider.provideEdits (/home/t/.vscode/extensions/esbenp.prettier-vscode-9.10.3/dist/extension.js:1:11417)
at async B.provideDocumentFormattingEdits (/usr/share/code/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:94:45902)
["ERROR" - 5:58:30 AM] Invalid prettier configuration file detected. See log for details.
Looked in user settings and the formatter was incorrect and then I switched it to prettier code formatter. Still nothing would work. Uninstalled and reinstalled prettier with no change. Tried disabling and reenabling the extension. Tried turning on and off prettier: use editor config, prettier: resolve global modules, prettier: require config. No change.
Currently the file is located in /home/t/repos/ and I also tried copy and pasting into the project directory and adding into the workspace of vs code. Side note, in the /repos folder is also the node_modules directory. The eslintrc.prettierrc and prettier.eslintrc files are correctly named and they remain intact.
What I did to try and work around this was to add a config path directly to the file in the repos directory via settings.JSON. Here is my current settings.JSON file:
{
"workbench.colorTheme": "Default Dark+",
"editor.guides.bracketPairs": true,
"workbench.iconTheme": "vscode-icons",
"editor.linkedEditing": true,
"security.workspace.trust.untrustedFiles": "open",
"prettier.configPath": "/home/t/repos/eslintrc.prettierrc",
"[javascript]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.defaultFormatter": "esbenp.prettier-vscode",
"gitlens.hovers.currentLine.over": "line",
"liveServer.settings.donotShowInfoMsg": true,
"liveServer.settings.AdvanceCustomBrowserCmdLine": "/opt/firefox/firefox",
"editor.formatOnSave": true,
"prettier.useEditorConfig": false
}
Where did I get these configs from originally?
Directly from this guide: https://vicvijayakumar.com/blog/eslint-airbnb-style-guide-prettier#4-install-the-airbnb-style-config-for-eslint-and-all-dependencies
Side note: The prettier: prettier path to the prettier module is currently blank. Inserting a path to the file did not work as I believe this is node module related?
Does anyone have any recommendations on how to fix this situation, please? I have tried every solution I have ran across. Deeply appreciate any help I can get.

TO START:
Its helpful to know which "settings.json" your configuring. You need to make sure that both your workspace ".vscode/settings.json" file, and your user "settings.json" file (path is contingent on the O.S. your running) are configured to work harmoniously, and that one is not overriding the other with the same configuration twice.
SECONDLY
Remove all configurations you added to your "./settings.json" file for prettier. Those settings were added by the extension author. Despite the esbenp.prettier-vscode being the official prettier extension for VS Code, Prettier was never intended to be configured via VS Code's configuration files. Prettier is very nit-picky about its "./.prettierrc" configuration file. When we use the VS Code config ("settings.json") when attempt to use a prettier config that the extension generates somewhere. If you end up with settings in some project workspace vscode configurations (e.g. ".vscode/settings.json" files) the extension will try to regenerate a file each time one loads a prettier setting. It may even try to load multiple, depending on the scope of your settings.json file. Some how it has to handle that the user-scoped settings.json file should always be overriden by a workspace "settings.json" configuration file. That's not to mention that prettier configs often contain there own overridden rule sets within the ".prettierrc" configuration file.
Note: Just FYI, the most problematic configuration your using is the "prettier.configPath" setting.
_I'm going to stop going down the rabbit hole, hopefully you get the point I am making, which is: Don't use VS Code settings.json configuration files to configure "Prettier".
This will be more easy to explain with a bullet-list
The following will help you configure a clean environment, one where Prettier will work as you have configure it to work.
To start...
...delete all Prettier settings that you added to all settings.json files. This includes any Prettier settings you added to project ".vscode/settings.json" files, and it especially includes all Prettier-settings that you added to your user "settings.json" file. After you finish, reload VS Code, by closing it out completely, and reopening it.
Rather than delete all prettier configuration files from any projects you have open, I am going to instead ask that when you reopen VS Code, that you only open one instance of VS Code. If VS Code opens a project (aka project-folder) after restarting, you're going to want to close that project w/o opening another one. To do that you can...
Use the keybinding ALT + K followed by the F key.
Alternatively you can use the title-bar menu like so: FILE  >>  CLOSE FOLDER
Additionally, make sure all tabs are closed as well.
At this point your instance of VS Code should be totally empty, completely a blank canvas. From here you are going to want to create a new file. To do this...
You have one of two options
(A) You can use the keybinding CTRL + ALT + SUPER + N
(B) Another way to achieve the same thing is to use the title-bar menu like so:   FILE  >>  NEW FILE
Once you've prompted VS Code to create a new file VS Code will want you to pick a location where it's to be created at. The location doesn't matter, so long as it is in a completely empty file, with nothing else in it. To name the file, VS Code will probably use the drop-down that is often refereed to as the quick input menu. The file needs to be a JavaScript file, as a consequence, the file must end with the file extension ".js". So I can reference the file later, I will call mine "main.js", but you can call your whatever you want, so long as you know which file I am referencing when you read "main.js".
In the same folder as "main.js", create one more new file without a file extension. This file MUST HAVE THE NAME...
.prettierrc
NOTE: "The file has a period (or dot) as the first character in its name (this makes it a hidden file)."
Add the following prettier configuration to the ".prettierrc" file you just created.
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": true,
"singleQuote": true
}
**Execute the following commands"
$ npm init
The command will ask a bunch of questions, just press enter for each one to quickly configure the environment with the default npm/Node.js configuration.
The purpose of this is simply to create a valid "package.json" file.
$ sudo npm i -g prettier && npm i -D prettier
// Or you can execute it as two commands, like this:
$ sudo npm i -g prettier
$ npm i -D prettier
The command (or commands, depending on how you enter them) install prettier as a project dependency, and as a global Node.js package.
NOTE: "Make sure that you have prettier installed as a vscode extension. And make sure that you have only one prettier extension. Having multiple can create problems and confusion. The one you should have should have the Extension ID: esbenp.prettier-vscode "
Prettier Should work now. Use the main.js file we created early to write some javascript, then press F1 to open the quick input, type the word "format document", until you see the option "Format Document", which you want to click. Then choose prettier from the menu. Prettier won't format if you have erroneous code, it needs to be free from error. (if you want to fix errors use a linter like ESLint).
You can add a bunch of blank lines, or put braces on the wrong line, leave out semi colons, and prettier should format all of those mistakes.

How can I resolve the following compilation error when running Jest for testing?

Although I am able to start the npm project using npm start without any issues with webpack or babel, once I run npm test, I find the following error related to testing App.js using App.test.js (where App.js imports ApolloClient):
TypeError: Cannot assign to read only property '__esModule' of object '[object Object]'
| import ApolloClient from 'apollo-boost';
| ^
at node_modules/apollo-boost/lib/bundle.cjs.js:127:74
at Array.forEach (<anonymous>)
at Object.<anonymous> (node_modules/apollo-boost/lib/bundle.cjs.js:127:36)
Essentially, I'm confused as to why I get an error when running the test but not when starting the project.
I've tried adding in a number of babel plugins to both .babelrc and in my webpack config file:
#babel/plugin-transform-object-assign
#babel/plugin-transform-modules-commonjs
babel-plugin-transform-es2015-modules-commonjs
However, I haven't been able to resolve the issue. My thinking was that this is related to the fact that the file that fails to compile was originally CommonJS.
I was only able to find something relatively similar here, https://github.com/ReactTraining/react-router/pull/6758, but I didn't find a solution.
Is there something that I'm missing specifically related to running tests? I should also mention I've tried frameworks other than Jest and ran into the same issue.
EDIT:
I removed everything from App.test.js except the imports to isolate the issue so it just contains the following:
import React from 'react';
import { shallow } from 'enzyme/build';
import App from './App';
UPDATE:
I was able to resolve the initial error by upgrading apollo-boost from version 0.3.1 to 0.4.2. However, I now have a different error that is similarly frustrating. I am using Babel 7 and have added the plugin #babel/plugin-syntax-dynamic-import to both my .babelrc and to my webpack.config.js files. Despite this, I get the following error related to the use of a dynamic import in App.js when running the Jest to test App.test.js:
SyntaxError: Support for the experimental syntax 'dynamicImport' isn't currently enabled
Add #babel/plugin-syntax-dynamic-import (https://git.io/vb4Sv) to the 'plugins' section of your Babel config to enable parsing.
I'm not sure if there is a parsing error or something else, but I've tried numerous things that have not worked. The closest discussion I could find related to this problem is, https://github.com/facebook/jest/issues/5920, however, the proposed solutions don't work for me.
UPDATE:
One thing that I'm trying is to avoid duplication of the babel options as right now they're both in .babelrc and in the babel-loader options within webpack.config.js. From what I found online (Whats the difference when configuring webpack babel-loader vs configuring it within package.json?), the way to make webpack use the settings in .babelrc is to not specify options. However, doing so results in the same error described above showing up only this time when running npm start. I will add that the project that was originally created using create-react-app, however, in order to support multiple pages, I needed to customize webpack's configuration and so ejected from it. I'm not sure why this is so convoluted.

its probably a babel configuration issue, I'm pretty sure jest needs to be compiled to work with create-react-app...
did you specify a setup file in package.json:
"jest": {
"setupFiles": [
"/setupTests.js"
]
}
and in setupTests.js:
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });

It turns out that one of the components in the project's src directory had its own local package.json file even though it wasn't being used and was not installed as a local dependency in the top level package.json (instead imports were done using relative urls). For some reason, the existence of this file changed the behavior of webpack and other tools when starting and testing the project such that none of the top level configurations were used for files within directories with separate package.json files. Once I removed these local package.json files from the components sub-directory, all the prior issues were resolved. One hallmark of this problem is that compilation errors were not showing up for JavaScript files that weren't nested under an alternate package.json file.
Hopefully this is useful for anyone that encounters similar errors as I don't think the cause can be directly determined from the compiler messages alone.

Could not find a declaration file for module 'react-native-foo-package'

while I added any component to my pure react-native project, the application screen turns to the white empty page.
The import 'react-native-foo-package' line has '...' near the package name, and it has this message:
[ts]
not find a declaration file for module 'react-native-foo-package'. '/project/node_modules/'react-native-foo-package'/index.js' implicitly has an 'any' type.
Try npm install #types/'react-native-foo-package' if it exists or add a new declaration (.d.ts) file containing declare module 'react-native-foo-package';
npm install #types/'react-native-foo-package' couldn't help, because this package doesn't exist in npm.
I don't use any typescript file or related code to typescript.
react: "16.6.0-alpha.8af6728"
react-native: "0.57.4"
This question Could not find a declaration file for module 'module-name'. '/path/to/module-name.js' implicitly has an 'any' type doesn't answer my question, because, in my package.json file, there is no "main" exists.

Well #Samane Yaghoobi is right! it has nothing to do with "main":"index.js".
Here's what you should do. After successfully setting up the library in your project on whatever platform (VsCode or Atom). Re run the project from the command line => react-native run-android. After that, navigate to your project in Android Studio. Then open up build.gradle and sync your gradle again. Then just to make sure, checkout the MainApplication in Android Studio to see if the file(e.g. import com.whatever.foo) imported properly, if everything looks good, you are good to go. If you need further instructions in setting up the library in VsCode/Atom let me know, I will create visual presentation to make things much more clear.

'File name differs from already included file name only in casing' on relative path with same casing

Error TS1149: File name 'C:/Project/frontend/scripts/State.ts' differs from already included file name '../frontend/scripts/State.ts' only in casing.
I've triple checked the casing in our references and the actual files have the correct casing as well. As far as I can tell, this is solely because the relative path uses incorrect casing, or perhaps it's just because of the relative path itself?
The thing is, it compiles just fine on Mac and Linux, but throws this error on Windows.
If it helps, forceConsistentCasingInFileNames is enabled in the tsconfig, and we're using tsify to compile.

For me, the issue occurred when a file was quickly renamed from someFile.ts to SomeFile.ts. Restarting my IDE (Visual Studio Code) made the warning go away.

In my case, the error was in the import statement. The import statement had a capital letter instead of small letter, which worked during develop in Windows, but not when compiling for production.
wrong:
import {SomeClass} from '/some/path/SomeClass.ts';
correct:
import {SomeClass} from '/some/path/someClass.ts';

UPDATE 2021
That's a weird error that occurred in my IDE, but it can be simply done with two simple steps:
rename your file (not component) to another name and once again back to your original name.
Example:
consider we have a myFile.js file in the components directory:
> src
> components
> myFile.js
First
Rename myFile.js into another name (anything) like temp.js:
myFile.js ----> temp.js
Second
back to its original name,
temp.js ----> myFile.js
It's also work fine with *.ts *.tsx *.js *.jsx extensions.

You need to disable the "forceConsistentCasingInFileNames" in the tsconfig.json file.
So you should have something like that:
{
"compilerOptions": {
...
"forceConsistentCasingInFileNames": false,
...
}
}

Restarting VS Code IDE didn't work for me and I didn't want to change config files. These are the steps that worked for me to resolve this problem:
From VS Explorer, rename the problem file to a new name
Change the component name to the new name inside the file
Save the file
Restart VS Code
Rename the file back to the name I originally wanted
Change the component name to match
It must be some kind of caching issue inside VS Code

For VS Code IDE users:
You can fix it by opening the Command Palette (Ctrl+Shift+P) --> Select Typescript: Restart TS server.

Mine was a vue problem, I removed the .vue extension and it worked

When two files exist in same folder with names like a.tsx and A.tsx you will get this error

Ok, just need to throw in my "solution" here as well, since it was different from the others. The error message clearly said where it saw an error. It was the casing of a directory that had been renamed (from Utils -> utils). Even though it was renamed correctly everywhere I still got the error. My solution was to rename it once more (why not, hehe) to utils2. After that it worked fine

For VS Code, only thing worked for me was to clear editor history:
Press Ctrl + Shift + P.
type command Clear Editor History.
Press Enter.

For me the problem only went away:
Close VS Code
Deleting the node_modules\.cache folder.
Re-open VS Code

It's not enough to restart your TS server!
As of 2023, I found a consistent way to reproduce the issue. This error will happen whenever you still have imports pointing to the wrong path! (after renaming)
// Wrong path, but same "Already included file name" error
import { Home } from './home';
// CORRECT path, but same "Already included file name" error
import { Home } from './Home'; // <- new path
Fix all imports path and restart your TS server (on VS Code, press F1 > Restart TS server)
TS team should definetly work on improving this error message :)

I've tried these two ways:
Import file with '#/frontend/scripts/State.ts' instead of '../frontend/scripts/State.ts'. It works only if you are using path alias.
Rename the directory of the project and open the project from the new directory.

Changing "React" to "react" worked for me.
Incorrect:
import React from "React";
Correct:
import React from "react";

Writing the import again worked for me.

Remove .vue extension and it worked

If nothing works try:
Remove node_modules
Restart Vetur
yarn or npm i again to get your node_modules
Restart developer window
Renaming files or restarting didn't help. The error started after renaming a file and letting Vetur do it's thing with imports.

In my case, I am using Nextjs. Removing the .next folder and starting the app again solved the problem.
Update: The error occurred again. This time deleting .next didn't help. Turned out it was due to a circular dependency in my code.

I had the same issues but it came from the imports inside test files (which were based on jest).
Solution was to clear the jest cache using the following command.
node ./node_modules/jest/bin/jest.js --clearCache

Even after changing cases and making git config ignore case false(git config core.ignorecase false) still I had to follow the following then only it worked as expected!
git rm -r --cached .
git add --all .
git commit -a -m "Versioning untracked files"
git push origin master
Thanks to this comment: https://stackoverflow.com/a/55541435/3272407

For Visual Stuido Code user, Restart TS Server fixed my issue without rebooting the whole VS code.

The answer was that we were using tisfy 1.0.1, when forceConsistentCasingInFileNames wasn't supported until 4.0.0. Updating fixed the issue.

Ember JS : Exlude running eslint on js files of addon

I am using eslint ("ember-cli-eslint") for my ember application. Whenever i run the tests, eslint includes files from addon's as well(check screenshot). We have 5 custom add-ons which is used in this project. Eslint currently includes the files from these add-ons. Need guidance on how to exclude files from eslint.
I have also created ".eslintignore" file and added below line, but its of not use
modules/**/*.js

An addon's hintings are run when isDevelopingAddon function of addon returns true. To disable it, you should give hintingEnabled: function() { return false; } in index.js.
Releated issue: https://github.com/ember-cli/ember-cli/issues/5594
--
Edit
Returning false from hintingEnabled also disables linter to run in that add-on. So if you want to enable linter in add-on and disable it while using in another app use the following check:
return this.moduleName() === this.app.project.name()