如何在我的角度文件中更漂亮地使用单引号答案

【问题标题】：How to have prettier working with single quote in my angular files如何在我的角度文件中更漂亮地使用单引号
【发布时间】：2021-10-31 17:48:00
【问题描述】：

我刚刚按照一些开发人员的建议在我的项目中安装了 Prettier，但我在配置它时遇到了一些问题。

当我安装它时，在第一种格式上，VS Code 询问我要使用哪个格式器（在 tslint 和 prettier 之间），所以我选择了 prettier。

但是现在，当我创建 .ts 文件时，我会收到 tslint 的警告，例如：

@Injectable({
  providedIn: "root",
})

这是真的，我想在我的项目中使用单引号。然后当我把它改成

@Injectable({
  providedIn: 'root',
})

它再次被双引号替换。

我去过设置并尝试将引用的每个引用更改为单引号，在我的设置文件中以这个结尾：

{
    "git.autofetch": true,
    "editor.formatOnSave": true,
    "files.autoSave": "afterDelay",
    "git.enableSmartCommit": true,
    "workbench.iconTheme": "material-icon-theme",
    "git.postCommitCommand": "sync",
    "git.pruneOnFetch": true,
    "git.confirmSync": false,
    "files.autoSaveDelay": 2000,
    "workbench.colorTheme": "Atom One Light",
    "html.format.wrapAttributes": "force-aligned",
    "html.format.wrapAttributesIndentSize": 120,
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "prettier.singleQuote": true,
    "prettier.jsxSingleQuote": true,
}

但是，当我保存时，单引号会被双引号替换。

我错过了什么，为什么 prettier 一直尝试使用双引号？

【问题讨论】：

stackoverflow.com/questions/48864985/…
这可能是您的 .editorconfig 文件中的设置。以前发生在我身上

标签： angular visual-studio-code tslint prettier

【解决方案1】：

由于某种原因，我的仓库似乎有一个 .editorconfig 文件，该文件没有指定报价设置。

我放弃了将其指定为 VS Code 设置的想法，并在我的项目的根目录中创建了一个 .prettierrc 文件，其内容如下：

{
  "printWidth": 120,
  "singleQuote": true,
  "useTabs": false,
  "tabWidth": 2,
  "semi": true,
  "bracketSpacing": true
}

【讨论】：

【解决方案2】：

您可以添加一个名为 .prettierrc 的文件，并在其中添加此规则以及您喜欢的其他规则：

{
  "singleQuote": true
}

更多here.

或者，如果您使用的是 eslint，则可以通过在 eslint 文件中的 rules 对象下添加它来获得相同的结果。

    'prettier/prettier': [
      { singleQuote: true },
    ],

【讨论】：

【解决方案3】：

也许您在tslint.json 中以这种方式进行了配置。检查这是否存在于tslink.json：

"quotemark": [true, "double"]

并用：

"quotemark": [true, "single"]

还要检查你的.editorconfig 中是否有这个：

quote_type = double

并用：

quote_type = single

【讨论】：

不，tslint 建议使用单引号是正确的，它重新格式化它更漂亮。