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!