TypeScript 编译器不遵循 ESLint 规则

Question

I'm having an issue where the JavaScript produced by the TypeScript compiler doesn't follow the ESLint rules set for the project.

Here is the TypeScript configuration (tsconfig.json):

{
    "compilerOptions": {
        "lib": ["es2015"],
        "module": "commonjs",
        "outDir": "dist",
        "sourceMap": true,
        "strict": true,
        "target": "es2015"
    },
    "include": [
        "src"
    ]
}

Here is the ESLint configuration (.eslintrc.json):

{
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true,
        "node": true
    },
    "extends": [
        "standard",
        "plugin:@typescript-eslint/recommended"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": 11
    },
    "plugins": [
        "@typescript-eslint"
    ],
    "rules": {
    }
}

I'm using VS Code and when editing TypeScript the errors from ESLint are shown. However, the problems I am having are: The compiler will allow code which doesn't conform to the ESLint rules to pass through, and the JavaScript code which is produced doesn't conform to the rules either. For example, it will terminate each statement with a semicolon, when it should not.

I'm new to TypeScript and I'm pretty sure it's something basic I'm doing wrong, but haven't been able to find this info (so far) in any documentation.

Your guidance is appreciated.

Answer 1

ESLint is not in the business of type-checking your typescript code. You should rely on TypeScript for checking for type errors like tslint (Configure it accordingly). Example tslint.json

{
"rulesDirectory": ["node_modules/codelyzer"],
"rules": {
    "arrow-return-shorthand": true,
    "callable-types": true,
    .....
 }

Answer 2

ESLint is not involved with the bundle build pipeline. you may however run eslint before the bundle build in order to fail the whole build in case there are linting issues.

If you want to make any changes to the code generated it should be done with webpack plugins / typescript.

So for example, if you want to remove semicolons, this probably should be done with your minifier/compressor. such as uglifyjs : https://github.com/mishoo/UglifyJS#output-options

Answer 3

all you are missing is a property call project on the parserOptions of your eslint file.

....
“parserOptions”:{
  .....
  “project”: [“./tsconfig.json”]
.....

you can algo add more things to both files as well