VSCode、Prettier 和 TSLint：formatOnSafe 搞乱了自动排序导入答案

【问题标题】：VSCode, Prettier and TSLint: formatOnSafe messes up auto sort of importsVSCode、Prettier 和 TSLint：formatOnSafe 搞乱了自动排序导入
【发布时间】：2019-05-18 17:23:07
【问题描述】：

我正在使用 TypeScript 构建 React 应用程序。我的编辑器是 VSCode。我使用 prettier 和 TSLint 来保持我的代码干净。

因为当我点击 safe prettier 时，有几个项目搞砸了自动类型的导入：

保存前：

保存后：

我不知道为什么现在会发生这种情况，但这肯定是由 prettier 引起的（没有 prettier 测试它不会发生）。

我的 VSCode 设置是：

"editor.formatOnSave": true,
"editor.formatOnType": false,
"prettier.tslintIntegration": true,
"tslint.autoFixOnSave": false,

这是我的 TSLint 设置 (tslint.json)：

{
  "extends": [
    "tslint:recommended",
    "tslint-eslint-rules",
    "tslint-react",
    "tslint-config-prettier"
  ],
  "jsRules": {},
  "rules": {
    "interface-name": false,
    "jsx-no-lambda": false,
    "quotemark": [true, "single", "jsx-double"]
  }
}

这可能是什么原因？我以前在其他项目中使用过这些设置并且它们不会被弄乱（即使我现在重新访问它们并且安全）。此外，只有导入会搞砸，除此之外，prettier 效果很好。

【问题讨论】：

标签： typescript visual-studio-code code-formatting tslint prettier

【解决方案1】：

尝试将.prettierrc 文件添加到项目的根目录并添加以下内容：

{
  "singleQuote": true
}

我在使用 Angular+Typescript 时遇到了类似的问题，这似乎是由 Prettier 中的 singleQuote 选项引起的。 VS Code Prettier 扩展有一个设置首选引用样式的选项，但在这种情况下它似乎不尊重这一点。

【讨论】：