ESLint and Prettier Presets for Typescript + ReactJS

These are the ESLint and Prettier settings I like to use for Typescript and Typescript React projects.

Installing

1. Ensure you have package.json file
2. Install eslint-config-justinneff-ts-react and it's peer dependencies. (This command works with yarn too)

npx install-peerdeps -D eslint-config-justinneff-ts-react

3. Create a .eslintrc file in the root of your project that looks like this:

{
	"extends": ["justinneff-ts-react"]
}

4. Create a .prettierrc file in the root of your project. These are the default settings I use:

{
	"arrowParens": "always",
	"bracketSpacing": true,
	"jsxSingleQuote": false,
	"semi": false,
	"singleQuote": true,
	"tabWidth": 2,
	"trailingComma": "all",
	"useTabs": true
}

5. You can also add these scripts to the package.json file to give you simple commands for linting and fixing files.

"scripts": {
  "lint": "eslint .",
  "lint:fix": "eslint . --fix"
},