如何使用 typescript 同步 eslint 或设置类似的 tslint 和 prettier？

Posted 2023-03-13

【中文标题】如何使用 typescript 同步 eslint 或设置类似的 tslint 和 prettier？

【英文标题】：How can I synchronise eslint or setup similar tslint and prettier with typescript?

【发布时间】：2019-04-13 22:05:05

【问题描述】：

我有一个现有的 React/Redux 项目，并且我已经开始在我的项目中使用 typescript。我已经为扩展 airbnb eslint 配置的项目设置了我的 eslint 配置。我的eslint如下：

module.exports = 
  "parser": "babel-eslint",
  "extends": [
    "airbnb",
    "plugin:flowtype/recommended"
  ],
  "plugins": [
    "react",
    "jsx-a11y",
    "flowtype"
  ],
  "env": 
    "browser": true,
    "node": true,
    "es6": true
  ,
  "globals": 
    "__DEV__": true,
    "__SERVER__": true,
    "__": true,
    "define": true,
    "describe": true,
    "expect": true,
    "require": true,
    "test": true,
  ,
  "ecmaFeatures": 
    "arrowFunctions": true,
    "binaryLiterals": true,
    "blockBindings": true,
    "classes": true,
    "defaultParams": true,
    "destructuring": true,
    "forOf": true,
    "generators": true,
    "modules": true,
    "objectLiteralComputedProperties": true,
    "objectLiteralDuplicateProperties": true,
    "objectLiteralShorthandMethods": true,
    "objectLiteralShorthandProperties": true,
    "octalLiterals": true,
    "regexUFlag": true,
    "regexYFlag": true,
    "spread": true,
    "superInFunctions": true,
    "templateStrings": true,
    "unicodeCodePointEscapes": true,
    "globalReturn": true,
    "jsx": true
  ,
  "rules": 
    // Strict mode
    "strict": [
      2,
      "never"
    ],
    // Code style
    "quotes": [
      2,
      "single"
    ],
    "arrow-parens": [
      2,
      "as-needed"
    ],
    // Key Spacing
    "key-spacing": 0,
    // Best practices
    "block-scoped-var": 1,
    "dot-notation": 1,
    "no-confusing-arrow": 1,
    "no-else-return": 1,
    "no-eval": 1,
    "no-extend-native": 1,
    "no-extra-bind": 1,
    "no-lone-blocks": 1,
    "no-loop-func": 1,
    "no-multi-spaces": 0,
    "no-param-reassign": [
      "error",
      
        "props": false
      
    ],
    "vars-on-top": 1,
    "max-statements": [
      1,
      20
    ],
    "no-underscore-dangle": 0,
    "no-undef": 1,
    "no-unused-vars": 1,
    "indent": [
      1,
      2,
      
        "SwitchCase": 1
      
    ],
    //React specific rules
    "react/jsx-filename-extension": [
      1,
      
        "extensions": [
          ".js",
          ".jsx"
        ]
      
    ],
    "react/forbid-prop-types": 0,
    "react/no-unused-prop-types": 1,
    //Overwriting airbnb stylings
    "array-bracket-spacing": 0,
    "comma-dangle": [
      2,
      "always-multiline"
    ],
    "func-names": 0,
    "jsx-quotes": [
      2,
      "prefer-double"
    ],
    "max-len": [
      2,
      200,
      2,
      
        "ignoreUrls": true,
        "ignoreComments": false
      
    ],
    "no-console": 0,
    "one-var": 0,
    "prefer-const": 1,
    "react/jsx-no-bind": 1,
    "react/require-default-props": 0,
    "space-in-parens": 0,
    "spaced-comment": 0,
    "no-multi-assign": 0,
    //Import rules
    "import/extensions": [
      2,
      
        "js": "never"
      
    ],
    "import/no-unresolved": 0,
    "import/no-extraneous-dependencies": 0,
    "import/no-named-as-default-member": 0,
    "import/first": 0,
    //Keeping below till idea supports these codestyles
    "object-curly-spacing": 0
  ,
  "parserOptions": 
    "sourceType": "module",
    "allowImportExportEverywhere": true
  ,
  "settings": 
    "flowtype": 
      "onlyFilesWithFlowAnnotation": true
    ,
    "import/resolver": "webpack"
  
;

现在，由于我正在使用 typescript，我希望这个 eslint 配置也可以在我的 typescript 文件（或类似的 tslint）上工作，但我不想创建任何其他 tslint 文件，因为如果我会需要更新，然后我必须在 2 个地方更新。另外，我想在 VSCode 中添加prettier。所以，我的问题是：

如何在 typescript 文件上配置/同步 eslint？ 如何在 vscode 上配置这个 eslint 配置？ （在此之前我使用的是 webstorm，但我想使用 vscode） 如何在 VSCode 中使用带有 Typescript 的 eslint 配置 prettier？

【参考方案1】：

依次回答三个项目符号...

1。 ESLint 与 TSLint

现在您使用的是 TypeScript，最好通过 ESLint 切换到 TSLint。 TSLint 受益于使用 TypeScript API 访问更丰富的类型信息，因此它的规则可以比 ESLint 的更强大。例如，它的规则可以防止您意外错误处理 Promise、不正确地比较错误类型的变量或以错误的方式迭代数组。

有关文档，请参阅 http://palantir.github.io/tslint，有关您可以启用的规则列表，请参阅 http://palantir.github.io/tslint/rules。有几个项目可以填补 TSLint 的空白，因为 ESLint 有更多的规则，主要是：

https://www.npmjs.com/package/tslint-eslint-rules 直接弥补了差距，大约 http://npmjs.com/package/tslint-microsoft-contrib 有很多特定于库的规则

2。 VS 代码配置

VS Code 有一个extension for ESLint 和一个extension for TSLint。无论您最终选择哪种方式，都可以安装该扩展程序，它会选择您项目的任何配置。

添加.vscode/settings.json 文件以在 VS Code 中微调项目的行为也是一个好主意。特别是对于 TSLint，至少这个设置会有所帮助：

    "tslint.alwaysShowRuleFailuresAsWarnings": true

这将告诉 VS Code 始终使用绿色波浪线而不是红色显示 TSLint 规则，因此您可以分辨什么是 TypeScript 投诉 （红色） 与 TSLint 投诉 （绿色） em>。

3。更漂亮

不错的选择！ ESLint 和 TSLint 都有可用的默认规则集，您可以从中扩展以禁用所有可能与 Prettier 冲突或冗余的 lint 规则。

对于 ESLint，请参阅此页面：https://prettier.io/docs/en/eslint.html。总之，您可以使用eslint-plugin-prettier 让ESLint 自己运行Prettier，或者使用eslint-config-prettier 包来禁用ESLint 的格式化规则。

在你的.eslintrc.json:

  "extends": ["prettier"]

对于 TSLint，只有 tslint-config-prettier 可用，您可以使用它来禁用 TSLint 的格式化规则。 https://www.npmjs.com/package/tslint-config-prettier.

在您的tslint.json 中，您可以扩展tslint-config-prettier 包：

  "extends": [
    "tslint-config-prettier"
  ]

【讨论】：

谢谢@Josh。我已将所有这些添加到我的项目中。我想知道是否有办法将现有的 eslint 规则扩展到 tslint，但我认为没有。我将不得不使用单独的 tslint.json 文件

明白了。是的，现在没有办法做到这一点? 但是在 GitHub 上有一些关于 TSLint 的讨论！ github.com/palantir/tslint/issues/1576

【参考方案2】：

2020 年第一季度，考虑到engineering comment included with VSCode 1.42：

TSLint 到 ESLint 迁移

VS Code 主要是用 TypeScript 编写的。除了编译器之外，我们还使用 linting 来强制执行某些样式和工程规则。 过去，我们使用 TSLint 来完成这项任务，但大约一年前，maintainers of TSLint announced弃用了支持 ESLint。

我们已经迁移到 ESLint 的这个里程碑——包括我们的lint-configuration 和我们的custom rules。