将 Typescript 添加到现有 Node/Express Javascript 应用程序

Question

I am just adding Typescript to our Node / Express backend. I had existing ESLint setup but after adding Typescript it now causes problems with linting .js files and I actually have no errors any longer for my .js files.

The goal is to slowly move over existing .js files to .ts but with the project size and my current bandwidth can't do it all at once. So I'm taking the slow approach of anything new using Typescript and whenever I touch an old piece of code, rewriting that in Typescript as well.

Any help would be appreciated.

My .eslintrc.json

{
  "extends": ["airbnb", "prettier"],
  "plugins": ["prettier"],
  "rules": {
      "prettier/prettier": ["error"],
      "no-console": "off",
      "comma-dangle": "error",
      "semi": "error"
  },
  "overrides": {
      "files": ["*.ts", "*.tsx"],
      "extends": ["airbnb", "prettier", "airbnb-typescript", "prettier/@typescript-eslint"],
      "plugins": ["prettier", "@typescript-eslint"],
      "parser": "@typescript-eslint/parser",
  }
}

I also have .pretierrc

{
  "tabWidth": 2,
  "printWidth": 200,
  "singleQuote": true,
  "endOfLine": "lf",
  "trailingComma": "all"
}

Here are my dev dependencies for package.json

  "devDependencies": {
    "@types/bluebird": "^3.5.33",
    "@types/body-parser": "^1.19.0",
    "@types/chai": "^4.2.14",
    "@types/dotenv": "^8.2.0",
    "@types/express": "^4.17.11",
    "@types/mocha": "^8.2.0",
    "@types/mongoose": "^5.10.3",
    "@types/supertest": "^2.0.10",
    "@typescript-eslint/eslint-plugin": "^4.14.2",
    "@typescript-eslint/parser": "^4.14.2",
    "chai": "^4.3.0",
    "chai-http": "^4.3.0",
    "dotenv": "^8.2.0",
    "eslint": "^7.19.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-airbnb-base": "^14.2.1",
    "eslint-config-prettier": "^7.2.0",
    "eslint-config-standard": "^16.0.2",
    "eslint-import-resolver-alias": "^1.1.2",
    "eslint-plugin-async-await": "0.0.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^5.0.0",
    "link-module-alias": "^1.2.0",
    "lint-staged": "^10.0.8",
    "mocha": "^8.2.1",
    "mockgoose": "^8.0.4",
    "nodemon": "^2.0.7",
    "nyc": "^15.1.0",
    "pre-commit": "^1.2.2",
    "prettier": "^2.2.1",
    "sinon": "^9.2.0",
    "supertest": "^6.1.3",
    "ts-node": "^9.1.1",
    "tsconfig-paths": "^3.9.0",
    "typescript": "^4.1.3"
  }

Answer 1

You can tell you ESLint to ignore all the JavaScript files by creating a .eslintignore file, it works in a similar way of gitignore .

For ex: You .eslintignore may looks like:

build/*.js
model/*.js

Don't forget to restart your Editor.