Visual代码用双引号格式化代码，尽管linter代码样式需要单引号

Question

我正在使用NestJ和VueJ进行开发，并使用通过CLI配置的代码样式。因此，Nest在TSLint中使用自己的代码样式，对于VueJ，我想使用AirBnb代码样式。

基于我的当前VSC扩展设置

我使用ESLint、Vetur和更漂亮的设置

{
    "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
}

不幸的是，VSC将我的Javascript代码从单引号更新为双引号。我想根据配置的代码样式格式化我的代码，不管它是普通的NodeJs，NestJ，角，React，Vue，.

有人能告诉我如何正确设置编辑器吗？

Answer 1

不要将eslint与prettier结合使用，大多数事情都会发生冲突。这里的设置非常适合我，我使用的是eslint：

{
  "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
  },
}

在根文件夹./.eslintrc.json中

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

如果您仍然喜欢使用更漂亮的，那么在根文件夹中创建文件./.prettierrc

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

如果您没有这样做，请安装这些vs代码扩展：

• 维图尔
• ESLint