如何在我的 angular 文件中更漂亮地使用单引号

Question

我刚刚按照一些开发人员的推荐在我的项目中安装了 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 一直尝试使用双引号？

Answer 1

也许您在 tslint.json 中以这种方式配置了它。检查 tslink.json:

中是否存在

"quotemark": [true, "double"]

并将其更改为：

"quotemark": [true, "single"]

还要检查你的 .editorconfig:

中是否有这个

quote_type = double

并将其更改为：

quote_type = single

Answer 2

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

{
  "singleQuote": true
}

更多here.

或者，如果您使用的是 eslint，则可以通过将其添加到 eslint 文件中的 rules 对象下来实现相同的结果。

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

Answer 3

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

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

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

如何在我的 angular 文件中更漂亮地使用单引号

How to have prettier working with single quote in my angular files

angular

visual-studio-code

tslint

prettier