为什么 Visual Studio 2017 不对 TypeScript 文件使用 ESLint？答案

【问题标题】：Why doesn't Visual Studio 2017 use ESLint on TypeScript files?为什么 Visual Studio 2017 不对 TypeScript 文件使用 ESLint？
【发布时间】：2019-09-18 12:45:12
【问题描述】：

我在 Visual Studio 2017 中创建了一个 Web 应用程序并安装了依赖项。

package.json：

{
    "version": "1.0.0",
    "name": "asp.net",
    "private": true,
    "devDependencies": {
        "@typescript-eslint/parser": "1.7.0",
        "eslint": "5.16.0",
        "typescript": "3.4.5"
    }
}

我使用最新的最佳实践为 TypeScript 设置了 ESLint，即@typescript-eslint/parser。

.eslintrc：

{
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "extends": [ "eslint:recommended" ]
    },
    "rules": {
        "quotes": [ "error", "double" ]
    }
}

（注意需要双引号的规则。）

我创建了两个文件，test_js.js 和 test_ts.ts，内容相同：

var x = 'Hello, world';

但是只有JS文件显示引号lint错误：

为什么 Visual Studio 不检查我的 TypeScript 文件？

（交叉发布在 Visual Studio 开发者社区：https://developercommunity.visualstudio.com/content/problem/552855/why-doesnt-visual-studio-2017-use-eslint-on-typesc.html）

【问题讨论】：

这可以帮助stackoverflow.com/questions/44249111/…
@ChristophLütjen 感谢您的提醒。在 VS 设置中启用了 ESLint。我知道 eslint.rc 有效果，因为我可以通过更改引号规则来消除 lint 错误。

标签： typescript visual-studio-2017 eslint

【解决方案1】：

更新：

VS 现在does things well。请不要做我在下面做的事情。升级 VS 并以正确的方式做事。

原答案：

我已经建立了一个临时解决方法。

Visual Studio 2017 似乎尊重 tsconfig.json 中提供的 TSLint 设置。不幸的是，它还不接受 ESLint 的 TypeScript 规则。所以如果我想在 VS 编辑器中进行 TypeScript linting，我必须使用旧的 tslint.json 样式配置。

tsconfig.json：

{
    "compilerOptions": {
        "plugins": [
            {"name": "typescript-tslint-plugin"}
        ],
        "target": "es5"
    },
    "exclude": [
        "node_modules"
    ]
}

tslint.json：

{
    "rules": {
        "quotemark": [true, "double"]
    }
}

为了面向未来（当 ESLint 最终吸收 TSLint 时），我希望我的构建过程使用 ESLint。

.michael-eslintrc（我将其命名为这样 VS 不会使用此配置来 lint JS 文件）：

{
    "plugins": [
        "@typescript-eslint/tslint"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": 6,
        "extends": [ "eslint:recommended" ],
        "project": "tsconfig.json",
        "sourceType": "module"
    },
    "rules": {
        "@typescript-eslint/tslint/config": [
            "warn",
            {
                "lintFile": "tslint.json"
            }
        ]
    }
}

这设置了我需要的所有依赖项。

package.json：

{
    "version": "1.0.0",
    "name": "asp.net",
    "private": true,
    "devDependencies": {
        "@typescript-eslint/parser": "1.7.0",
        "@typescript-eslint/eslint-plugin-tslint": "1.7.0",
        "eslint": "5.16.0",
        "tslint": "5.16.0",
        "typescript": "3.4.5",
        "typescript-tslint-plugin": "0.3.1"
    }
}

我已将 Webpack 配置为使用此 ESLint 配置进行 linting。因此，Visual Studio 和 Webpack 最终使用相同的 tslint.json 配置，但它们通过不同的路径达到相同的行为。

此解决方法有几个缺点：

我无法使用新的 ESLint-native 规则进行 TypeScript linting
一旦 VS 最终支持使用 ESLint 的 TS linting，我将不得不更新配置
这只设置了 TS 的 lint 规则，而不是 JS - 我在让 VS 处理 .eslintrc 时遇到了麻烦，即使没有 TS 规则（这并没有让我很困扰，因为我正在将一个旧项目转换为TS - 如果 JS 被 linted，很多文件都会失败）

【讨论】：