VSCode setup with ESLint + Prettier + Stylelint

Lately i was using Eslint w/o Prettier. Now i find it a bit inconvenient, because ESLint alone can't reformat max line length.

Now i'm back to ESLint/Prettier and Stylelint config.

Steps to setup ESLint + Prettier and Stylleint in VSCode

1. Install ESLint + Prettier and Stylelint VSCode extensions, then reload your IDE.
2. Press CMD+Shift+P and type Preferences: Open settings (JSON)
3. In the opened JSON file paste following properties (Please note, you are not forced to delete existing properties, if the do exist, ofcourse. If there's no conflict, justt add new properties):

"[vue]":{
    "editor.defaultFormatter":"esbenp.prettier-vscode",
    "editor.formatOnSave":true
},
"[javascript]":{
    "editor.defaultFormatter":"esbenp.prettier-vscode",
    "editor.formatOnSave":true
},
"[typescript]":{
    "editor.defaultFormatter":"esbenp.prettier-vscode",
    "editor.formatOnSave":true
}

Formatting Vue, JS, TS files with ESLint + Prettier.

"editor.codeActionsOnSave":{
    "source.organizeImports":false,
    "source.fixAll.eslint":true,
    "source.fixAll.stylelint":true
}

Automatic code fixes with the help of ESLint + Stylelint.

"scss.validate": false,
"css.validate": false,
"less.validate": false,

Turning off default CSS formatting and various preprocessors (now its handled by Stylelint).

"stylelint.validate": [
    "css",
    "less",
    "postcss",
    "scss",
    "vue"
]

4. In your Vue/Nuxt project w/ or w/o Vite, install the following packages for a Prettier support:

npm i -D prettier eslint-config-prettier

Then in your .eslintrc or .eslintrc.cjs:

'extends': [
  'plugin:vue/vue3-essential',
  'eslint:recommended',
  '@vue/eslint-config-typescript',
  'prettier'
],

.prettierrc contents:

{
  "semi": false,
  "tabWidth": 2,
  "singleQuote": true,
  "printWidth": 100,
  "trailingComma": "none"
}

There's a lot of confusion around eslint-config-prettier and eslint-plugin-prettier

Short answer: use eslint-config-prettier Here's the long answer: on StackOverflow