Resolve conflicts between VS Code automatic formatting (alt+shift+F) and VueJs default formatting (npm run lint) rules
<p>I just initialized a VueJs project: </p>
<pre class="brush:php;toolbar:false;">npm init vue@3 .
Need to install the following packages:
create-vue@3.3.2
Ok to proceed? (y) y
Vue.js - The Progressive JavaScript Framework
√ Package name: ...no-interrupts
√ Add TypeScript? ... Yes
√ Add JSX Support? ... Yes
√ Add Vue Router for Single Page Application development? ... Yes
√ Add Pinia for state management? ... Yes
√ Add Vitest for Unit Testing? ...No
√ Add Cypress for both Unit and End-to-End testing? ... No
√ Add ESLint for code quality? ... Yes
√ Add Prettier for code formatting? ... Yes</pre>
<p>But now when I format my code (alt shift f), prettier emphasizes something. If I run <code>npm run lint</code>, things go back to normal. </p>
<p>For example, alt-shift-F seems to try to keep the first attribute of the html element on the first line: </p>
<pre class="brush:php;toolbar:false;"><img alt="Vue logo"
class="logo"
src="@/assets/logo.svg"
width="125"
height="125" /></pre>
<p>where npm run lint has a dedicated line for each property: </p>
<pre class="brush:php;toolbar:false;"><img
alt="Vue logo"
class="logo"
src="@/assets/logo.svg"
width="125"
height="125"
/></pre>
<p>This is especially a problem because the file is formatted on save. </p>
<p>I don't have a strong preference, but if possible I'd like to keep the one proposed by <code>npm run lint</code>. </p>
<p>My <code>eslintrc.cjs</code> contains the following content: </p>
<pre class="brush:php;toolbar:false;">/* eslint-env node */
require("@rushstack/eslint-patch/modern-module-resolution");
module.exports = {
root: true,
extends: [
"plugin:vue/vue3-essential",
"eslint:recommended",
"@vue/eslint-config-typescript/recommended",
"@vue/eslint-config-prettier",
],
parserOptions: {
ecmaVersion: "latest",
},
};</pre>
<p>What should I do so that the <code>alt-shift-f</code> command formats my code correctly? </p>
