title: How to configure Vue CLI 4 with ESLint + Airbnb rules + TypeScript + Stylelint for SCSS, in VS Code editor with autofix on save?
body: <p><em>Note: This is a similar question to my previous question on the topic, which was left partly unsolved and after which the nature of the challenge changed considerably</em>: <a href="https://stackoverflow.com/questions/58670850/how-to-configure-vue-cli-4-with-eslint-prettier-airbnb-rules-typescript">How to configure Vue CLI 4 with ESLint + Prettier + Airbnb rules + TypeScript + Vetur?</a></p>
  <p>In 2019 I was fairly obsessed by getting a 'holy grail' tooling setup configured with <strong>Vue in TypeScript</strong> and having <strong>VS Code to autofix your code on file save in .vue, .ts, and .scss files</strong>.</p>
  <p>But getting <a href="https://prettier.io/" rel="nofollow noreferrer">Prettier</a> to work optimally with <a href="https://eslint.org/" rel="nofollow noreferrer">ESLint</a> and <a href="https://github.com/vuejs/vetur" rel="nofollow noreferrer">Vetur</a> ended up being too much of a challenge. Because of an inherent clash with Prettier and ESLint having partly the same aim and similar rule checks, and with Vetur adding more complexity to this particular mix in VS Code.</p>
  <p>Also when the setup was mostly working, it was rather irritating that you needed to save the file several times in a row. Because once ESLint found and fixed a set of errors, new errors appeared and it was not advanced enough to run those checks and fixes in a row until all was cleared...</p>
  <p>In November 2019 I was attending Vue Conf Toronto, and in Mr. Evan's workshop Deep Dive with Vue 3.0 I got to ask him about this problem. He told that the official tooling is going to see major overhauling pretty soon, and there will be new features coming in from newer versions of ESLint...</p>
  <p>He also hinted that at this point there is autofix logic written to nearly all of Vue's official <a href="https://v2.vuejs.org/v2/style-guide/" rel="nofollow noreferrer">Style Guide</a>'s rule checks, which in combination with the upcoming Vue 3.0 fully modular architecture may even see an official VS Code extension coming. Or at least is making it easier for Vetur and similar plugins to run code checks and fixes by leveraging these new capabilities.</p>
  <p>In December 2019, <strong>Vue CLI 4.1 plugins and presets upgrades brought ESLint version 6 features</strong> on the table. Which meant we could start using <strong>ESLint not just as a linter, but also a formatter</strong>, effectively <strong>dropping the need for Prettier</strong> in our setups.</p>
  <p>During the same time ESLint released version 2 of it's official VS Code extension <a href="https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint" rel="nofollow noreferrer">dbaeumer.vscode-eslint</a>, bringing in support for VS Code's <a href="https://code.visualstudio.com/updates/v1_23#_run-code-actions-on-save" rel="nofollow noreferrer">Run Code Actions on save</a> -feature, controlled by <code>editor.codeActionsOnSave</code> -setting.</p>
  <p>So finally the path was cleared for getting this setup running! <strong>Next up, I'll answer my own question on how to configure this mix.</strong></p>
  <p>PS. While it's possible Vetur could still be used as a part of this setup, here I've changed to using Stylelint. There has still been some problems with Stylelint's autofix feature, but is likely to be solved by future updates. <strong>Yet I'm still interested in hearing if Vetur would prove useful with or without Stylelint!</strong></p>