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.
In my Nuxt application where ESlint and Prettier are installed and enabled, I switched to Visual Studio Code.
When I open a .vue file and press CMD+ Shift + P and choose Format Document, my file does not get formatted at all.
My .prettierrc settings:
{
"tabWidth": 2,
"semi": false,
"singleQuote": true
}
I have so many source code lines, so I cannot format them manually. What am I doing wrong?
Select File -> Preferences -> Settings (Ctrl + comma) and search form formatter
Set Prettiers as Default formatter.
If doing what #Simin Maleki mentioned does not solve it for you, there is a chance that your default formatter is not set:
File > Preferences > Settings > Search for "default formatter"
Make sure your Editor: Default Formatter field is not null but rather Prettier - Code formatter (esbenp.prettier-vscode) and that all the languages below are ticked. This fixed my issue.
STEP BY STEP WALKTHROUGH
Also make sure that your format on save is enabled:
Sometimes, prettier stops working when there are syntactic errors in the code. You can view the errors by clicking on the x button on the bottom right corner beside Prettier
Prettier could also format your files on save.
However, installing and enabling does not result in working.
You have to check "format on Save" in VSCode: Setting >> User >> Text Editor >> Formatting
You only have to configure your Default Formatter and check the checkbox in Format On Save in the settings, after installing prettier to make it work. Don't mess with other configuration files.
1 - Select Default Formatter
Open Files -> Preferences -> Settings (or Ctrl + , in Windows).
Search for Editor: Default Formatter
Select your default formatter as Prettier - Code Formatter;
See the image below;
2 - Save On Format
Open Files -> Preferences -> Settings (or Ctrl + , in Windows).
Search for Editor: Format on Save
Click the check box under Format On Save;
See the image below;
disable and enable prettier extension solves my problem
I am not using Vue, but had the same problem.
I already had the settings
Editor: default formatter to prettier
Editor: Format on Save to true
I already had .eslintrc.js and .prettierrc files
But nothing worked.
The solution to my problem was that I had all set properly, except I needed to:
Command + Shift + p
type format document with
select Configure Default Formatter...
select Prettier as default.
I don't know why the Editor: Format on Save set to true was not enough.
I needed to select default formatter using the above steps so it worked.
can you try to add this section to your VS Code settings.json file?
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
},
These three steps may solve your problem:
1 - Go to settings, then search for auto format
2 - Select Text Editor
3 - Select esbenp.prettier-vscode as your Default Formatter.
Simply said, go to Settings > User tab > Text Editor > Editor: Default Formatter and change it to prettier.
On Windows:
We can open the below file using:
Start > Run
File Path:
%AppData%\Code\User\settings.json
Change
From:
"[javascript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
To:
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
Note:
If the above is not present, add it instead of changing.
You should already have installed the "Prettier - code formatter" to see the effect of the above change - https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
you can still have issues in spite of all these settings. In this case, as pointed out in an earlier answer, then it would be a good point to check the prettier notification at bottom status bar in VSCode.
When clicking on that status, the output panel should report the issue in the HTML file. For me, the issue was I had a div inside a p tag which I assume prettier/VSCode conventions are against. When I removed it (and combined with all the settings above, namely default formatter and format on save) I got prettier working.
.prettierrc is not required unless you want to override VSCode settings
For me the problem was with HTML files where formatting stopped working one day. I had Format On Save configured, which worked in all files except HTML.
I then realized that I experimentally set Format On Save Mode to modification instead of file and forgot about it. This had an effect of not formatting anything in HTML files, surprisingly not even my changes. Setting it back to file solved the issue.
This is not a problem with Prettier itself, but prettier-vscode, the VSCode extension. According to its documentation, Vue formatting is disabled by default:
prettier.disableLanguages (default: ["vue"])
A list of languages IDs to disable this extension on. Restart required. Note: Disabling a language enabled in a parent folder will prevent formatting instead of letting any other formatter to run
In this case, to enable you should set "prettier.disableLanguages": []. And since this is an extension configuration, you should do it in VSCode settings file, not .prettierrc.
in my case it was being hijacked by typescript formatter.
it was driving me crazy because it kept re-formatting my spaces!
to fix i did cmd+. (settings) type -> "default formatter"
and unchecked typescript
1 .Use the other extension prettier was not working for me i just use the other VSCODE extension named PrettierNow i think this will help, done for me.Checkout the extension here
2 .From Latest Updates of prettier you need to add .prettierrc file in your root of the projects if you want to stick with prettier.
An example of .prettierrc is this-
{
"tabWidth": 4,
"singleQuote": true,
"semi": false
}
If Prettier formats all other files except HTML files automatically on save:
Press Cmd + P or Ctrl + P to open the command palette and type the following text in it:
> open settings
Click on Preferences: Open Settings (JSON) from the suggestion dropdown.
Inside the settings.json file, Check if "[html]" key exists. If the key exists and its value indicates using another formatting extension installed in Visual Studio Code, you should reset it back to use Prettier.
"[html]": {
"esbenp.prettier-vscode"
}
For an instance, sometimes, the value of "[html]" key could be "remimarsal.prettier-now" when you would have Prettier Now extension installed.
If you don't have any other formatting extension installed other than Prettier, you can also remove the "[html]" key altogether from settings.json file.
This is what worked for me (my default formatter was already set to Prettier)
Change default formatter to default
Restart vscode
Change default formatter back to Prettier.
How to format your code through VScode's ESlint plugin
Alright, rather than giving a guide on how to use VScode's Prettier extension, I'd rather explain how to rely on ESlint and have both worlds: checking that your code is correct (ESlint), then formatting it (Prettier).
What are the advantages of this?
not forcing your entire team to use VScode with the Prettier extension, maybe some prefer Vim, IntelliJ's Webstorm, Emacs etc... A tool-agnostic solution is IMO always better.
I think that linting your code is more important that formatting it, but if you have both extensions working at the same time, you may have conflicts between the formatting and the linting.
your hardware will struggle less, if you have less extensions running (mainly because it can stop the conflicts)
using an ESlint + Prettier combo will strip the need to have a specific personal configuration aside of the codebase (untracked). You'll also benefit from having Vue/Nuxt specific ESlint rules and a simpler/more universal configuration.
an ESlint configuration can be configured to be run before a commit, in a CI/CD or anywhere really.
How to achieve this kind of setup?
Let's start first by installing the ESlint extension and only it, DO NOT install the Prettier one.
Not installed Vetur yet?
I do heavily recommend it for Vue2 apps (what Nuxt is running as of today), you can find it below. It will allow to quickly and simply ESlint (+ Prettier) any .vue files.
When it's done, access the Command Palette with either ctrl + shift + p (Windows/Linux) or cmd + shift + p (Mac) and type Preferences: Open Default Settings (JSON)
There, you should have something like this
{
"workbench.colorTheme": "Solarized Dark", // example of some of your own configuration
"editor.codeActionsOnSave": {
"source.fixAll": true,
},
"eslint.options": {
"extensions": [
".html",
".js",
".vue",
".jsx",
]
},
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"html",
"vue",
],
}
How to try that your configuration is now working?
To see if my solution is working, please download this Github repo, get the latest stable Node version (eg: 14) and run yarn to have it working. Otherwise, simply open VScode.
This repo can also be used to double-check that yours is properly configured by inspecting my files there!
Then, you could access any .js or .vue file and see the problems there (Command Palette: Problems: Focus on Problems View). nuxt.config.js and /pages/index.vue are good examples, here is the index.vue file.
You can see that we do have several things that can be fixed by Prettier but that we do also have an eslint(vue/require-v-for-key) error. The solution is available as a comment just below btw.
PS: if you want to have inline ESlint warnings/errors as in the screenshot, you can install Error Lens, it's a super amazing extension if you want to get rid of errors.
Save this file and you should saw that every auto-fixable things are done for you. Usually it's mainly Prettier issues but it can also sometimes be ESlint too. Since we do have the ESlint rules from Nuxt, you'll get some nice good practices out of the box too!
Tada, it's working! If it's not, read the section at the end of my answer.
If you want to create a brand new project
You can run npx create-nuxt-app my-super-awesome-project and select few things there, the most important being Linting tools: Eslint + Prettier of course (hit space to opt-in for one of them).
Warning: as of today, there is an additional step to do to have ESlint + Prettier working properly as shown in this Github issue. The fix should be released pretty soon, then the configuration below will not be needed anymore!
To fix this, run yarn add -D eslint-plugin-prettier and double check that your .eslintrc.js file is a follows
module.exports = {
root: true,
env: {
browser: true,
node: true
},
parserOptions: {
parser: '#babel/eslint-parser',
requireConfigFile: false
},
extends: [
'#nuxtjs',
'plugin:prettier/recommended', // this line was updated
'prettier'
],
plugins: [
],
// add your custom rules here
rules: {}
}
Then, you can have it working totally fine as above. Save the file and it should run ESlint then Prettier one after the other!
If you still have some issues
try to use the Command Palette again and ESLINT: restart ESLint Server or even Developer: Reload Window
feel free to leave a comment or contact me if you need some help
Go to Manage(located on left-bottom corner) -> Settings -> Users tab -> Text-Editor -> Formatting -> check the format on save
if not working then close and again open your vscode editor
Enabling "format on Save" in VSCode: Setting >> User >> Text Editor >> Formatting worked for me!
Recently I got the same problem, that Prettier does not format code automatically on saving. Checking Prettier, I saw an error: Invalid "arrowParens" value. Expected "always" or "avoid", but received true.
The error message was seen when I clicked this:
It turned out that I have Prettier Now installed also. This has a boolean value in my config file. After uninstalling Prettier Now, everything works fine.
If none of the other answers work, check that a conflicting prettier config .prettierrc does not exist in your working directory or check for .prettierignore to be sure the files/folders are not being ignored.
Check if there is a .vscode/settings.json file in your project directory (workspace). In my case someone had checked in this file:
{
"editor.formatOnSave": false
}
Solution: Delete the file (delete it from source control too) and add .vscode/ to .gitignore (if you're using git).
In some cases where prettier is provided as a dependency, you might need to install it before prettier vscode recognizes it using one of the following commands, depending on the package manager you are using
npm i or yarn
From the menu navigate through: view -> Command Palette
Form the command palette search for Format Document and then select Prettier as your format engine.
I had prettier already working on another project, but for the new one I had do it through this way to enable it again for the new project.
In my case it turned out I had configured prettier to use a configuration file that didn't exist (see screnshot below). That was hard to find since there wasn't any error message but prettier just didn't work. Maybe this helps somebody, too.
Check your package.json file for a property of prettier as this will take precedence.
{
"name": "example",
"scripts": { ... },
"prettier": {},
"dependencies": { ... },
"devDependencies": { ... },
}
Delete this property and the .prettierrc file will be used.
The order of precedence is stated in the prettier docs.
Some times with auto plugins update Required files used by Prettier might go missing .
Check this path if files are present here or folder is empty
C:\Users\YOURUSERNAME\.vscode\extensions\esbenp.prettier-vscode-2.2.2\out
If missing uninstall and reinstall prettier
For me - it was to do with ESlint which also works with Prettier. Eslint wasn't working (a local installation vs global installation conflict) which broke Prettier.
I Rolling back prettier to 1.7.3 and fixed it
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.