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

Question

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

现在，因为我正在使用打字稿，所以我希望此 eslint 配置也适用于我的打字稿文件（或类似的 tslint），但我不想创建任何其他 tslint 文件，因为那时如果我需要更新，那么我将不得不在 2 个地方进行更新。另外，我想在 VSCode 中添加 prettier。所以，我的问题是：

我如何configure/synchronise eslint 打字稿文件？
如何在 vscode 上配置此 eslint 配置？（我之前用的是 webstorm 但我想用 vscode）
如何在 VSCode 中使用带有 Typescript 的 eslint 配置 prettier？

Answer 1

按顺序回答三个项目符号...

1。 ESLint 与 TSLint

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

有关您可以启用的规则列表，请参阅 http://palantir.github.io/tslint for documentation and 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 and an extension for TSLint。无论您最终选择哪个，您都可以安装该扩展，它会根据您的项目的配置进行选择。

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

{
    "tslint.alwaysShowRuleFailuresAsWarnings": true
}

这将告诉 VS Code 始终使用绿色波浪线而不是红色波浪线显示 TSLint 规则，因此您可以分辨什么是 TypeScript 投诉 (red) 与 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 to ESLint migration

VS Code is mostly written in TypeScript. In addition to the compiler, we use linting to enforce certain style and engineering rules.
In the past, we have used TSLint for that task, but roughly a year ago, the maintainers of TSLint announced its deprecation in favor of ESLint.

This milestone we have migrated to ESLint - that includes our lint-configuration and our custom rules.

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

How can I synchronise eslint or setup similar tslint and prettier with typescript?

typescript

eslint

visual-studio-code

prettier

1。 ESLint 与 TSLint

2。 VS 代码配置

3。更漂亮

TSLint to ESLint migration