My recommended Typescript configurations.

I have recently started to use Typescript in my React projects, although I still have a fair way to go in actually using it fully (currently I am more writing JS in ts/tsx files… but that can be for another day).

However I did find I was fighting the swiggly lines in my editor from eslint and prettier and they seemed to be fighting each other in regard to formatting. Having asked around my developer friends and a bit of wrangling myself below is my current config for these projects.

Note: This is mostly for my own reference and will be updated from time to time as I discover newer options and tools.

First up is my tsconfig.json, I expect this to change as I understand the power of typescript.

/* tsconfig.json */
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "es2020",
    "jsx": "react",
    "declaration": true,
    "declarationMap": true,
    "strict": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    /* Advanced Options */
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": [
    "./src/**/*"
  ]
}

Next is my devDependencies snipped from package.json

  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^4.8.2",
    "@typescript-eslint/parser": "^4.8.2",
    "eslint": "^7.1.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-prettier": "^3.1.3",
    "prettier": "^2.0.5",
    "typescript": "^4.1.2"
  },

Next is my .prettierrc file for formatting

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": false,
  "singleQuote": false,
  "printWidth": 120
}

and finally my .eslintrc.js file:

module.exports = {
  parser: `@typescript-eslint/parser`,
  extends: [`plugin:@typescript-eslint/recommended`, `plugin:prettier/recommended`, `prettier/@typescript-eslint`],
  plugins: [`@typescript-eslint`, `prettier`],
  parserOptions: {
    ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
    sourceType: `module`, // Allows for the use of imports
  },
  env: {
    browser: true,
    node: true,
  },
  rules: {
    quotes: `off`,
    "@typescript-eslint/quotes": [
      2,
      `backtick`,
      {
        avoidEscape: true,
      },
    ],
    indent: [`error`, 2, { SwitchCase: 1 }],
    "prettier/prettier": [
      `error`,
      {
        trailingComma: `es5`,
        semi: false,
        singleQuote: false,
        printWidth: 120,
      },
    ],
    "@typescript-eslint/explicit-function-return-type": `off`,
  },
}

I suspect I will need to tweak my tsconfig and my eslint but for now these are making my development experience somewhat sensible.

If you have any improvements on these files then please let me know!

#config #javascript #typescript #development