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

Question

我已经在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/parser为TypeScript设置了ESLint。

.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文件显示引号棉绒错误：

为什么Visual Studio不能整理我的TypeScript文件？

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

Answer 1

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

Visual Studio 2017似乎尊重tsconfig.json中提供的TSLint设置。不幸的是，它还不接受ESLint的TypeScript规则。因此，如果要在VS编辑器中使用TypeScript衬棉，则必须使用旧的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不会使用此配置来整理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配置进行整理。因此，Visual Studio和Webpack最终使用相同的tslint.json配置，但它们通过不同的路径达到相同的行为。

此解决方法有几个缺点：

1. 我不能将新的ESLint本机规则用于TypeScript棉绒
2. 一旦VS最终通过ESLint支持TS linting，我将不得不更新配置
3. 这只为TS而不是JS设置了lint规则-即使没有TS规则，我也很难让VS处理.eslintrc（这不会打扰我，因为我将一个旧项目转换为TS-如果清除JS，很多文件将失败）