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

Question

我有一个现有的 React/Redux 项目，并且我已经开始在我的项目中使用 typescript。我已经为扩展airbnbeslint 配置的项目设置了我的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 个地方更新。另外，我想添加prettierVSCode。所以，我的问题是：

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

Answer 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 Code 配置

VS Code 有一个ESLint 扩展和一个扩展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"
  ]
}