Question

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

由于我安全地进行了一些漂亮的项目，使自动导入变得混乱：

保存之前： This one

保存后：

我不知道为什么现在会发生这种情况，但这肯定是由更漂亮引起的（在没有更漂亮的情况下进行测试就不会发生）。

我的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"]
  }
}

这可能是什么原因？我以前在其他项目中使用过这些设置，并且它们不会弄乱（即使我现在重新访问它们也很安全）。此外，只有导入变得混乱了，除此之外，更漂亮的方法效果很好。

Answer 1

尝试将.prettierrc文件添加到项目的根目录，然后向其中添加以下内容：

{
  "singleQuote": true
}

我的Angular + Typescript也有类似的问题，这似乎是由Prettier中的singleQuote选项引起的。 VS Code Prettier扩展具有一个选项，可以设置首选的引用样式，但是在这种情况下，它似乎并没有考虑到这一点。

Answer 2

为什么不告诉Prettier忽略代码的那部分。像这样：

// prettier-ignore
import { Styleheets } from 'react-native';
import fonts from '../../config/constants/fonts/';
import { companyBlack, companyGray } from '../../config/constants/colors';

请阅读以下内容：https://prettier.io/docs/en/ignore.html

VSCode，Prettier和TSLint：formatOnSafe弄乱了导入的自动排序

2 个答案: