Why do my linter and formatter hate each other?

I recently started playing with Vue.js and was getting frustrated with my code formatter and linter in VS Code. They simply did not agree on the goals. I would get warnings, correct them, then format my code and my errors would be back.

The rule that was being violated was:

" should be '

First, I needed to decide which quote style I wanted to use single or double. Once I decided on single, I needed to make sure my linter and formatter were aligned.

With that decided I needed to find out which extension I installed was responsible for formatting my code. When I opened my first .vue file VS Code suggested some extensions for me. The one I selected was vetur. After some research I learned that vetur uses the Prettier formatter. From the Prettier.io website I was able to see how to configure the formatter using a .prettierrc file. Adding a .prettierrc file to the root of my project with the following content is all it took.

   "singleQuote": true

But what if I wanted to update my linter instead? Because I selected TypeScript when I ran the Vue CLI I had a tslint.json file in my root folder. Using the information about the quotemark rule on the TSLint site I could have also updated the rule to:

"quotemark": [true, "double"],

Just make sure they match!

Add comment