Create react app typescript: eslint and prettier

Home   »   Create react app typescript: eslint and prettier

# Create react app typescript: eslint and prettier
  ## create react app with the typescript template.
>     npx create-react-app formatting-project --template typescript

## Install dependencies

    // Older versions of CRA may also need eslint babel-eslint
    yarn add -D --save-exact 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-eslint/parser @typescript-eslint/eslint-plugin

**For prettier:**

    yarn add -D --save-exact prettier prettier-eslint prettier-eslint-cli eslint-plugin-prettier

## create config files
**.eslintrc**

    // .eslintrc  
    {  
    "plugins": ["prettier", "[@typescript](http://twitter.com/typescript)-eslint"],  
    "extends": ["airbnb-typescript", "react-app", "prettier"],  
    "parser": "[@typescript](http://twitter.com/typescript)-eslint/parser",  
    "parserOptions": {  
    "project": "./tsconfig.json"  
    },  
    "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",  
    "[@typescript](http://twitter.com/typescript)-eslint/comma-dangle": ["error", {  
    "arrays": "only-multiline",  
    "objects": "only-multiline",  
    "imports": "only-multiline",  
    "exports": "only-multiline",  
    "functions": "never"  
    }]  
    }  
    }
**.eslintignore**

    // .eslintignore  
    build/*  
    public/*  
    src/react-app-env.d.ts  
    src/serviceWorker.ts

**.prettierrc**

    {  
      "printWidth": 80,  
      "singleQuote": true,  
      "trailingComma": "es5",  
      "tabWidth": 2  
    }


## 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"**  
    },

if you want to ignore rules for line or multiple lines 

    /* eslint-disable no-console, no-param-reassign */ For one or multiple lines  
    /* eslint-disable-next-line no-console*/ For next line

##  Visual Studio code autoformat

    // .vscode/settings.json{  
      "files.associations": {  
        "*.jsx": "javascriptreact"  
      },  
      "editor.insertSpaces": true,  
      "editor.detectIndentation": false,  
      "editor.formatOnSave": true,  
      "editor.codeActionsOnSave": {  
        "source.fixAll.eslint": true  
      }  
    }

Leave a Reply

Your email address will not be published. Required fields are marked *