Take your typescript create-react-app to the next level with a nice code format.
If you follow these steps, you’ll have linting and prettier set up in less than 10 minutes.
I’m just setting up a project and thought it could be helpful for others to have a small guide with the main steps. Create-react-app is quite awesome to be honest and including some extra configuration can take it even further. I’ll be creating some posts covering nice features without ejecting.
As always, there is always room for improvement. I’m using the predefined configurations form airbnb, react-app and prettier in order to go faster. If you prefer to have your own rules go ahead.
Let’s cut to the chase!
Pre-requisite
As a first step, I’m going to install create react app with the typescript template.
npx create-react-app formatting-project --template typescript
It will take some time installing.
Step 1: Install dependencies
For linting:
npm i -D --save-exact eslint eslint-config-airbnb eslint-config-airbnb-typescript eslint-config-prettier eslint-config-react-app eslint-import-resolver-typescript eslint-loader eslint-plugin-flowtype eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks babel-eslint [@typescript](http://twitter.com/typescript)-eslint/parser [@typescript](http://twitter.com/typescript)-eslint/eslint-plugin
For prettier:
npm i -D --save-exact prettier prettier-eslint prettier-eslint-cli eslint-plugin-prettier
Step 2: create config files
All these files go on the root level.
.eslintrc
// .eslintrc
{
"plugins": ["prettier"],
"extends": ["airbnb-typescript", "react-app", "prettier"],
"settings": {
"import/resolver": {
"typescript": {
"alwaysTryTypes": true
}
}
},
"rules": {
"object-curly-spacing": ["warn", "always"],
"no-unused-vars": [
"warn",
{
"vars": "all",
"args": "none"
}
],
"[@typescript](http://twitter.com/typescript)-eslint/no-unused-vars": [
"warn",
{
"vars": "all",
"args": "none"
}
],
"[@typescript](http://twitter.com/typescript)-eslint/no-explicit-any": [
"error",
{
"ignoreRestArgs": true
}
],
"max-len": [
"warn",
{
"code": 80,
"ignoreStrings": true,
"ignoreTemplateLiterals": true,
"ignoreComments": true
}
],
"no-plusplus": [
"error",
{
"allowForLoopAfterthoughts": true
}
],
"react/jsx-key": "error",
"import/no-extraneous-dependencies": [
"error",
{
"devDependencies": [
"\*\*/\*.test.js",
"\*\*/\*.test.jsx",
"\*\*/\*.test.ts",
"\*\*/\*.test.tsx",
"src/tests/\*\*/\*"
]
}
],
"react/jsx-props-no-spreading": "off",
"import/prefer-default-export": "off",
"react/jsx-boolean-value": "off",
"react/prop-types": "off",
"react/no-unescaped-entities": "off",
"react/jsx-one-expression-per-line": "off",
"react/jsx-wrap-multilines": "off",
"react/destructuring-assignment": "off",
}
}
.eslintignore
// .eslintignore
build/\*
public/\*
src/react-app-env.d.ts
src/serviceWorker.ts
.prettierrc
{
"printWidth": 80,
"singleQuote": true,
"trailingComma": "es5",
"tabWidth": 2
}
Step 3: Add the running scripts
Look for the scripts area in package.json and include these:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"lint": "eslint --ext .js,.jsx,.ts,.tsx src --color",
"format": "prettier --write src/\*\*/\*.{ts,tsx,scss,css,json}",
"isready": "npm run format && npm run lint && npm run build"**
},
The first one npm run lint will run the linting and tell you what is wrong. The second one npm run format will format all the code based on your prettier and linting configuration. At last, a script that is very useful to run before committing and pushing code to git.
Step 4: Lint and format your code
Once you start running the scripts you will start getting errors.
$ npm run lint
$ npm run format
Some of them you may want to ignore so here the way to do it:
/* eslint-disable no-console, no-param-reassign */ For one or multiple lines
/* eslint-disable-next-line no-console */ For next line
Bob’s your uncle!!
Improvements
As I commented previously, there is room for improvement. If you have any comments or suggestions please leave a comment below.
Top comments (1)
Hey nice setup.
Maybe remove the @typescript links in the code and npm install instructions