Skip to content

Instantly share code, notes, and snippets.

@cetinozgur
Last active August 25, 2022 10:06
Show Gist options
  • Save cetinozgur/aabb403ba3bc64b26fa3e73864f13c37 to your computer and use it in GitHub Desktop.
Save cetinozgur/aabb403ba3bc64b26fa3e73864f13c37 to your computer and use it in GitHub Desktop.
Project setup for typescript-react
{
"env": {
"browser": true,
"es6": true,
"jest": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:@typescript-eslint/recommended"
],
"plugins": ["react", "@typescript-eslint"],
"settings": {
"react": {
"pragma": "React",
"version": "detect"
}
},
"rules": {
"@typescript-eslint/explicit-function-return-type": 0,
"@typescript-eslint/explicit-module-boundary-types": 0,
"react/react-in-jsx-scope": 0
}
}

Setup

  1. Initialize project:
npx create-react-app my-app --template typescript
  1. Add .eslintrc with the following settings (no need to install any packages, it comes along in the previous step)
{
  "env": {
    "browser": true,
    "es6": true,
    "jest": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "plugins": ["react", "@typescript-eslint"],
  "settings": {
    "react": {
      "pragma": "React",
      "version": "detect"
    }
  },
  "rules": {
    "@typescript-eslint/explicit-function-return-type": 0,
    "@typescript-eslint/explicit-module-boundary-types": 0,
    "react/react-in-jsx-scope": 0
  }
}
  1. Next, we need to get our linting script to parse *.tsx files, which are the TypeScript equivalent of React's JSX files. We can do that by altering our lint command in .package.json to the following:
{
  // ...
    "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint": "eslint './src/**/*.{ts,tsx}'"
  },
  // ...
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment