VSCode setup with ESLint + Stylelint, but w/o prettier

One day i've decided to remove Prettier from my tool set. Because ESLint itself can format the code, just like the Prettier.

Thus, why do i need one more config to maintain?

Steps to setup ESLint + Stylelint in VSCode

1. Install ESLint 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":"dbaeumer.vscode-eslint",
    "editor.formatOnSave":false
},
"[javascript]":{
    "editor.defaultFormatter":"dbaeumer.vscode-eslint",
    "editor.formatOnSave":false
},
"[typescript]":{
    "editor.defaultFormatter":"dbaeumer.vscode-eslint",
    "editor.formatOnSave":false
}

Formatting Vue, JS, TS files with ESLint.

"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"
]

Purpose of Stylelint is to validate/lint Vue, CSS, SCSS, PostCSS and Less files.

4. In case if you're using a monorepo, you need to setup working ESLint directories:

"eslint.workingDirectories": [
    "./src",
    "./app/frontend",
    "./app/frontend/packages",
    "./app/frontend/packages/core",
    "./app/frontend/packages/app",
]

Paths depends on the setup of your project. It is recommended to apply above settings inside Preferences: Open Workspace Settings (JSON), so it won't mess up with your other projects.