Question

我有一个现有的React / Redux项目，并且已经开始在项目中使用打字稿。我已经为扩展airbnb 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"
  }
};

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

如何在打字稿文件上配置/同步eslint？
如何在vscode上配置此eslint配置？（我之前使用过webstorm，但我想使用vscode）
如何在VSCode中使用带有Typescript的eslint配置更漂亮？

Answer 1

依次整理三个子弹...

1。 ESLint vs TSLint

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

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

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投诉（绿色）。

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

Answer 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。

如何与打字稿同步eslint或设置类似的tslint和更漂亮？

2 个答案:

1。 ESLint vs TSLint

2。 VS代码配置

3。更漂亮

从TSLint到ESLint的迁移