How to Setup EsLint + Prettier for Your React Project in 2021?

How to Setup EsLint + Prettier for Your React Project in 2021?



In this article, we will look up how to perfectly setting up Eslint and Prettier for React Project.

This article is for any React projects, whether or not if you are using create-react-app.

To have a productive result with your react project, it is crucial to be not disturbed by other people's bad formatted code! That's why you should set up linters and it's may not be as hard as you thought!

Talking to Eslint enforces code quality (unused variables, unreachable code, etc). And Prettier makes you not worry about all the minor formatting details. For more information about Prettier, see here

Now let's dive into setup both tools for productive outputs




Install Dependencies


To install all the dependencies you need, run the following in the terminal while you’re at the root of your project:



npm i --save-dev eslint@6.8.0 prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks


Note: The version for eslint is set to 6.8.0 so that it is compatible with create-react-app.



Modify package.json


Now, modify your package.json so that you can lint your code easily.



{
    "scripts": {
... add the following two line        "lint": "eslint --fix .",
        "lint-check": "eslint ."
    }
}


And make sure every line ends in a comma (except the last one).



Create eslintrc File


To configure the linter, create a file named .eslintrc.js at the root of the project. I have created a template for you to copy-paste.



module.exports = {
  extends: [
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
    'plugin:prettier/recommended',
  ],
  env: {
    es6: true,
    node: true,
    browser: true,
  },
  parserOptions: {
    ecmaVersion: 8,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  },
  ignorePatterns: ['/node_modules/**', '/build/**'],
  rules: {
    'no-unused-vars': ['warn', { args: 'none', argsIgnorePattern: 'req|res|next|val' }],
    'prettier/prettier': ['error'],
  },  settings: {
    react: {
      version: 'detect',
    },
  },
};


For more options and what they mean, you can view the ESLint official documentation.



This configuration will be read by ESLint, which in turn uses Prettier to format code. This way the two linters won’t have a fight on coding styles.



One Other Configuration File


Create a file named .prettierrc. This file provides additional configurations to Prettier. This the last step of the configuration.



{
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "quoteProps": "as-needed",
  "trailingComma": "all",
  "bracketSpacing": true,
  "arrowParens": "always",
  "endOfLine": "lf"
}


You can view Prettier documentation for options.



Finally


Now you can run npm run lint to fix all the styling issues.


If you just want to see the styling issues without fixing them, run npm run lint-check.










Thanks for reading! If you encountered any problems, please leave a comment, I am happy to help!


Also read this article 10 Best Free Templates for React Js in 2020





Comments

Post a Comment

Popular posts from this blog

How to optimizations by Angular in 2021?

Image
H ave you ever wondered How Angular renders all the HTML, CSS, Typescript files present in the application into the browser? What happens to the code when the application is run in production(prod) mode? What if the developer accidentally creates any component or any piece of code that is not used anywhere in the application? So after reading this article one should be able to answer the above questions. Let’s dive into the topic. Angular implicitly or explicitly does some optimizations for the application. They are: Bundling AOT Compilation Minification Uglification Tree shaking Let’s get into the above-mentioned ones in detail. Bundling :  Bundling is the process of combining code in multiple files into a single file. So during compilation, Angular generates 5 javascript files and loads them into the application. They are : inline.bundle.js (or) inline.js polyfills.bundle.js (or) polyfills.js main.bundle.js (or) main.js styles.bundle.js (or) style
Read more

How to create a blog in PHP and MySQL database - DB design

Image
The Database This is the second part in a series on How To Create A Blog with PHP and MySQL. You can get the first part  here We will continue where we left off in the last tutorial. In this section we will be working on our database design and user authentication (registration and login). Create a database named  complete-blog-php . In this database, create 2 tables:  posts  and  users  with the following fields. You can create these tables using these commands. users : CREATE TABLE `users` ( `id` int(11) AUTO_INCREMENT PRIMARY KEY NOT NULL, `username` varchar(255) NOT NULL, `email` varchar(255) NOT NULL, `role` enum('Author','Admin') DEFAULT NULL, `password` varchar(255) NOT NULL, `created_at` timestamp NULL DEFAULT CURRENT_TIMESTAMP, `updated_at` timestamp NULL DEFAULT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; posts : CREATE TABLE `posts` ( `id` int(11) NOT NULL AUTO_INCREMENT PRIMARY KEY, `user_id` int(11) DEFAULT NULL, `title` varchar(255) NOT N
Read more

Secure React SPA using Keycloak with OpenID Connect in 2021

Image
In the light of my previous post  “ Secure React SPA using Azure Endpoints with Authorization code flow ”  I realized that configuring multiple providers with you application needs lots of coding and configuration and specially when you want to stick with Authorization code flow for all the providers. While Azure, Google supports a request from cross origin requests in a way and on other hand Facebook strictly doesn’t support it. (So we needed to create a proxy server to modify CORS policy to get your request accepted). 1. Introduction Thanks to  WildFly  developer community for developing a open source project  Keycloak . “ Keycloak  is an open source software product to allow  single sign-on  with  Identity and Access Management  aimed at modern applications and services” as from Wikipedia. All you need to do is keep Keycloak application server running on a machine whether it is on same domain or cross domain doesn’t matter. In this post we are going to learn about running a Keycloak
Read more