如何配置 tslint 或 prettier 来删除 if/while/for 和 () 之间的空格？

Question

我正在设置 React 项目并使用 tslint、prettier 和 tslint-config-prettier 格式化我的代码。还可以使用 vscode 自动格式化。

如何删除 if/while/for 和括号之间的空格，例如“if()”而不是“if ()”？

我在 tslint 和 prettier 中找不到与此相关的选项。但我在 eslint 中发现了 'keyword-spacing' 。所以我希望 tslint 和 prettier 包含诸如关键字间距之类的东西。

tslint.json

{
    "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
    "linterOptions": {
        "exclude": [
            "config/**/*.js",
            "node_modules/**/*.ts",
            "coverage/lcov-report/*.js"
        ]
    },
    "rules": {
        "class-name": true,
        "comment-format": [true, "check-space"],
        "curly": true,
        "interface-name": false,
        "interface-over-type-literal": false,
        "jsx-boolean-value": false,
        "no-console": false,
        "no-duplicate-variable": true,
        "no-empty-interface": true,
        "no-internal-module": true,
        "no-var-keyword": true,
        "object-literal-sort-keys": false,
        "ordered-imports": false
    }
}

.prettierrc

{
    "trailingComma": "es5",
    "tabWidth": 4,
    "semi": true,
    "singleQuote": true,
    "bracketSpacing": true,
    "quotes": true,
    "jsxSingleQuote": false
}

settings.json（在vscode中供参考）

{
    "editor.formatOnSave": true,
    "tslint.enable": true,
    "tslint.jsEnable": true,
    "tslint.alwaysShowRuleFailuresAsWarnings": true,
    "tslint.alwaysShowStatus": true,
    "tslint.autoFixOnSave": true
}

预计：

let i: number = 0;
if(i <= 10) {
    i++;
}

实际：

let i: number = 0;
if (i <= 10) {
    i++;
}

提前非常感谢！

Answer 1

我们应该注意到，在提出这个问题后不久，TSLint 被宣布已弃用。没有人应该再使用它了。 typescript-eslint 是它的替代品和继承者。

TSLint 有一个名为

whitespace

的规则来强制间距。该规则有一些选项，例如用于分支语句的

check-branch

(

if

/

else

/

for

/

while

)。

如今，推荐的格式化方法是与 ESLint 分开使用 Prettier。它的默认选项将强制执行类似于此问题中要求的间距约定的内容。

npx -y prettier some/file.ts --write

要在大括号周围不留空格，请使用其 bracket-spacing 选项

。请参阅该选项页面，了解您可能想要自定义的其他选项。