Visual Studio Code formats code with double quotes although linter code style requires single quotes

0
votes

I'm developing with NestJs and VueJs and use the code style configured via CLI. So Nest is using its own code style with TSLint and for VueJs I want to use the AirBnb code style.

Based on my current VSC extension settings

I use ESLint, Vetur and Prettier with the following settings

{
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },
    "editor.formatOnSave": true,
    "vetur.format.defaultFormatter.js": "prettier-eslint",
    "vetur.format.defaultFormatter.html": "prettier",
    "vetur.format.defaultFormatter.ts": "prettier-tslint",
    "prettier.singleQuote": true
}

Unfortunately VSC updates my Javascript code from single quotes to double quotes. I want to format my code based on the configured code style whether it is plain NodeJs, NestJs, Angular, React, Vue, ...

Would someone mind telling me how to set up the editor correctly?

1
vue.jsvisual-studio-codeeslintvue-clivetur

1 Answers

1
votes

Don't use eslint with prettier most of things will conflict. Here is the setting that works for me perfectly, I use eslint-airbnb:

{
  "window.zoomLevel": 2,
  "workbench.colorTheme": "Solarized Dark",
  "editor.tabSize": 2,
  "editor.wordWrapColumn": 100,
  "workbench.settings.editor": "json",
  "workbench.settings.useSplitJSON": true,
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.formatOnSave": false,
  },
  "eslint.autoFixOnSave": true,
  "eslint.alwaysShowStatus": true,
  "eslint.validate": [
    {
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "javascript",
      "autoFix": true
    }
  ],
  "cSpell.userWords": [
    "Dropdown",
    "vuex"
  ],
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.grammar.customBlocks": {
    "page-query": "graphql",
    "static-query": "graphql"
  },
  "explorer.confirmDragAndDrop": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
}

In root folder ./.eslintrc.json

{
  "extends": ["airbnb", "prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": ["error"]
  }
}

If you still like to use prettier then in root folder create file ./.prettierrc

{
  "printWidth": 100,
  "singleQuote": true,
  "trailingComma": "all",
}

Just in case if you haven't done this, install these vs-code extensions: