Only advice I can give is stop using Prettier. Trying to make it work with ESlint and Vetur was always pain. Then I found this question (and self answer) here on SO which recommends dropping Prettier and using ESlint not just for linting but also for formatting (needs version >= 6). I'm happy as clam now...
Answer from Michal Šindelář on Stack OverflowOnly advice I can give is stop using Prettier. Trying to make it work with ESlint and Vetur was always pain. Then I found this question (and self answer) here on SO which recommends dropping Prettier and using ESlint not just for linting but also for formatting (needs version >= 6). I'm happy as clam now...
I've been struggling with a similar problem with VSCode's formatting. I also have Prettier, ESLint and Vetur extensions installed. But my code formatting rules were somehow different from my co-worker's (they are using WebStorm by the way).
In my case, the problem was solved by:
- Turning off all the Vetur formatters and disabling all formatting capabilities of Vetur.
- Enabled ESLint as the formatter.
This seems to have allowed the Prettier extension to look at .eslintrc.js, which the Prettier plugin is setup.
I suggest that you look in on the Prettier extension logs to debug your problem.
On the bottom right corner of VSCode's window, you will see the Prettier extension indicator. Click on this and you can see the logs.
Once the logs are shown, you can see where the extension is getting the Prettier configs from, or where the Prettier module is being imported from.
Why does Prettier not format code in VS Code?
can't format for vue
.vue file can not format when set `prettier.eslintIntegration` in vscode setting config
HELP : Prettier and vue template are not working well
Videos
- Select
File -> Preferences -> Settings(Ctrl+comma) and search formformatter - Set Prettiers as Default formatter.
If above does not work:
ctrl+shift+p > Format Document With... > Configure Default Formatter... > Prettier - Code formatter
This also work with ctrl+shift+I
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:
Hello,
Since I've started my vue project and wanted to do things properly (formatting and linting).
Prettier has been giving me headaches, I fixed many problem and learned at lot in the process but there are still some things that drive me crazy like "infinite lines" in html classes etc ..
How do you format you vue files ?
here is my vscode settings
"[vue]": {"editor.defaultFormatter": "esbenp.prettier-vscode"
},
Thank you
Hi everyone,
I am trying to create the following:
-
Vue.js project that uses ESlint + prettier
-
ESlint config uses the "recommended" config
-
Visual Studio code that runs with the prettier extension
The problem is, some rules are different between the vscode extension and the standard prettier config vue ui adds, for example:
eslint(prettier) thinks this is correct: <router-view/> vscode(prettier) thinks this is correct: <router-view />
Problem is, when I save, these two are in a permanent conflict with eachother.
So my question is, how are you guys doing this? How are you guys running your projects in combination with vscode?
Any help is greatly appreciated.
I seem to struggle to properly configure VS Code with Prettier and ESLint and Vue snippets.
I have found many blogs and articles but I somehow still struggle to configure it the way I want. Is there somewhere a guide which describes in easy language how to set it up and how to configure them with the extensions?
Edit: with Vite