Search code examples
vue.jsvisual-studio-codevue-clivetur

How to make Vue CLI and Vetur (in VS Code) generate code with double quotes


I use double quotes in my TypeScript and JavaScript code for strings.

But all the boilerplate generated by Vue CLI and the plugin Vetur (for VS Code) uses single quotes for strings. Is there a way to configure that?

Bonus: Additionally, I would love to see the generated code not have a semicolon…


Solution

  • There is currently no configuration to tell Vue CLI or Vetur how to generate the code, but you can auto-format the generated code with Vue CLI by running npm run lint. Running the command would report any lint errors and also automatically update your code to resolve the errors (if possible).

    Assuming you selected TSLint as your linter in the Vue CLI generator prompts, you can edit the generated tslint.json file as follows:

     {
       "rules": {
    -    "quotemark": [true, "single"],
         "quotemark": [true, "double"],
    +    "semicolon": [true, "never"]
       }
     }
    

    This does two things:

    • changes the quotemark rule to enforce double-quotes
    • adds a semicolon rule to disallow trailing semicolons

    Now, run npm run lint to automatically fix the single-quotes and semicolons.