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

Posted 2023-02-23

【中文标题】Visual Studio Code 使用双引号格式化代码，尽管 linter 代码样式需要单引号

【英文标题】：Visual Studio Code formats code with double quotes although linter code style requires single quotes

【发布时间】：2020-07-04 09:41:15

【问题描述】：

我正在使用 NestJs 和 VueJs 进行开发，并使用通过 CLI 配置的代码样式。所以 Nest 在 TSLint 中使用了自己的代码样式，而对于 VueJs，我想使用 AirBnb 代码样式。

基于我的current VSC extension settings

我使用 ESLint、Vetur 和 Prettier 的设置如下

    "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、NestJs、Angular、React、Vue，...

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

【参考方案1】：

不要使用eslint 和prettier 大多数事情会发生冲突。这是最适合我的设置，我使用 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
  ,

在根文件夹./.eslintrc.json

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

如果你仍然喜欢使用 prettier，那么在根文件夹中创建文件 ./.prettierrc

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

以防万一你还没有这样做，安装这些 vs-code 扩展：

Vetur ESLint