react-redux-typescript-scripts

react-redux-typescript-scripts 🛠

Shared dev-tools configuration files based on react-redux-typescript-guide

For now you can find eslint, tslint and tsconfig configurations, but I'm willing to add more tools and scripts in the future e.g. jest, babel, npm scripts etc.

I'm open to suggestion on improvements like adding or changing default rules so please feel free to open an issue.

Table of Contents

• Installation
• Usage
  • tsconfig.json
  • TSLint
    • tslint.json
  • ESLint
    • .eslintrc
    • create-react-app
• LICENSE

Installation

• This package is distributed via npm and should be installed as devDependencies:

npm i -D react-redux-typescript-scripts

• You should also install optional dependencies depending on

Usage

You can find usage instructions for each tool in it's onw section below.

tsconfig.json

{
  "include": ["./src"],
  "extends": "./node_modules/react-redux-typescript-scripts/tsconfig.json",
  "compilerOptions": {
    // you can further customize options here
  }
}

TSLint

WARNING: When using this config you need to install tslint as dependency in your project.

There are few configs available (you can use one or all by declaring an array in extends config property):

• react-redux-typescript-scripts/tslint.json - mandatory base config - based on recommended rules.
• react-redux-typescript-scripts/tslint-react.json- include react rules - based on tslint-react.

tslint.json

{
  "extends": [
    "react-redux-typescript-scripts/tslint.json", 
    "react-redux-typescript-scripts/tslint-react.json" // optional
  ],
  "rules": {
    // you can further customize options here
  }
}

ESLint

WARNING: When using this config you need to install eslint as dependency in your project.

There are few configs available (you can use one or all by declaring an array in extends config property):

• ./node_modules/react-redux-typescript-scripts/eslint.json - mandatory base config - based on recommended rules.
• ./node_modules/react-redux-typescript-scripts/eslint-prettier.json- disable eslint formatting rules conflicting with prettier - based on eslint-config-prettier (WARNING: Should be the last one in extends array).

.eslintrc

{
  "extends": [
    "./node_modules/react-redux-typescript-scripts/eslint.js",
    "./node_modules/react-redux-typescript-scripts/eslint-prettier.js" // optional
  ],
  "rules": {
    // you can further customize options here
  }
}

create-react-app

To fully integrate @typescript-eslint with your create-react-app add below snippet to your .eslintrc or package.json under the eslintConfig key:

{
  "extends": [
    "react-app",
    "./node_modules/react-redux-typescript-scripts/eslint.js",
    "./node_modules/react-redux-typescript-scripts/eslint-prettier.js" // optional
  ],
}

LICENSE

MIT