Why doesn't Visual Studio 2017 use ESLint on TypeScript files?

Question

I've created a Web Application in Visual Studio 2017 and installed dependencies.

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

I've set up ESLint for TypeScript using the latest best practice, i.e. @typescript-eslint/parser.

.eslintrc:

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

(Note the rule requiring double quotes.)

I've created two files, test_js.js and test_ts.ts, with identical content:

var x = 'Hello, world';

But only the JS file shows the quotation mark lint error:

Why is Visual Studio not linting my TypeScript file?

(Cross-posted on Visual Studio Developer Community: https://developercommunity.visualstudio.com/content/problem/552855/why-doesnt-visual-studio-2017-use-eslint-on-typesc.html)

Answer 1

Update:

VS now does things well. Please don't do what I did below. Upgrade VS and do things the right way.

Original Answer:

I've built a temporary work-around.

Visual Studio 2017 seems to respect the TSLint settings provided in tsconfig.json. Unfortunately, it won't accept ESLint's TypeScript rules yet. So if I want TypeScript linting in the VS editor, I have to use the old tslint.json style configuration.

tsconfig.json:

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

tslint.json:

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

For future-proofing (when ESLint eventually absorbs TSLint), I want my build process to use ESLint.

.michael-eslintrc (I've named it this so VS doesn't use this config to lint JS files):

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

This sets up all the dependencies I need.

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

I've configured Webpack to use this ESLint config for linting. So Visual Studio and Webpack end up using the same tslint.json config, but they arrive at the same behavior by different paths.

There are a couple disadvantages to this workaround:

1. I can't use the new ESLint-native rules for TypeScript linting
2. I'll have to update the config once VS finally does support TS linting with ESLint
3. This only sets up the lint rule for TS, not JS - I've had trouble getting VS to handle .eslintrc, even without TS rules (this doesn't bother me much, because I'm converting an old project to TS - lots of files would fail if JS were linted)