Skip to content
Home » A Guide to Babel, Prettier and ESLint

A Guide to Babel, Prettier and ESLint

Babel, Prettier and ESLint

Hey there! So, I’ve been diving deeper into frontend development, and I’ve realized that having a solid workflow can make a huge difference. I’m talking about using tools like Babel, Prettier, and ESLint to streamline your coding process and write cleaner, more efficient code.

Why Do You Need Babel, Prettier and ESLint?

Think about it: Imagine trying to read a book where every page has a different font, some sentences don’t make sense, and the story jumps around randomly. It would be a total mess, right? Well, coding can be the same way without the right tools. These tools help keep your code organized, consistent, and easy to read.

Babel: Your Code Translator

Babel is like a translator for your code. It takes your modern JavaScript code and converts it into a version that older browsers can understand. This is important because not everyone uses the latest browser. Babel makes sure your code runs smoothly for everyone, no matter what browser they’re using.

Prettier: Your Code Formatter

Prettier is like a spell-checker and formatter for your code. It automatically arranges everything in a neat and consistent way. So, you don’t have to worry about minor details like spacing or line breaks. Prettier takes care of those for you, allowing you to focus on the bigger picture.

ESLint: Your Code Guardian

ESLint is like your coding buddy who always checks your work for errors. It scans your code for mistakes and recommends best practices, helping you write cleaner and more bug-free code. By following ESLint’s suggestions, you can improve your code’s quality and efficiency.

Setting Up Your Frontend Development Workflow

Now that you understand the advantages of using these tools, let’s get them set up. It’s actually pretty easy!

1. Install Node.js and npm

    Node.js and npm are the foundation for any frontend project. They’re essentially tools that allow you to install and manage other tools you’ll need for development. You can download them both from the official Node.js website here.

    2. Create a Project Folder

    Open your terminal (Command Prompt on Windows) and create a new folder for your project. Navigate to this folder using the cd command in your terminal. Once you’re in the project directory, run the following command to initialize a basic package.json file:

    npm init -y

    The package.json file keeps track of all the tools and dependencies (other packages your project relies on) you’ll use in your project

    3. Install Babel

    Now that you have your project set up, let’s install Babel. Run the following command in your terminal to install the necessary Babel packages:

    npm install --save-dev @babel/core @babel/cli @babel/preset-env

    Here’s a breakdown of what each package does:

    • @babel/core: This is the core part of Babel that handles the compilation process.
    • @babel/cli: This package allows you to use Babel from the command line.
    • @babel/preset-env: This preset includes all the necessary configurations to convert your modern JavaScript code into a format compatible with older browsers.

    Once the installation is complete, create a file named .babelrc in your project directory. This file will contain the configuration settings for Babel. Add the following line of code to your .babelrc file:

    {
  "presets": ["@babel/preset-env"]
}

    This configuration tells Babel to use the @babel/preset-env preset, which we installed earlier.

    4. Set Up Prettier

    Prettier helps you maintain consistent code formatting throughout your project. Let’s install Prettier using the following command:

    npm install --save-dev prettier

    Now, create a file named .prettierrc in your project directory. This file will specify the formatting preferences for Prettier. Here’s an example configuration you can add to your .prettierrc file:

    {
  "singleQuote": true,
  "semi": false
}

    This configuration tells Prettier to use single quotes instead of double quotes and to remove semicolons at the end of lines.

    5. Configure ESLint

    ESLint is a linter that helps you catch potential errors and enforce coding style rules. Let’s install ESLint using the following command:

    npm install --save-dev eslint

    Next, initialize ESLint with:

    npx eslint --init

    Follow the prompts to set up ESLint according to your preferences. You can choose to check syntax, find problems, and enforce code style, and pick the JavaScript modules you’ll be using.

    6. Combine Prettier and ESLint

    To avoid conflicts between Prettier and ESLint, install the following plugins:

    npm install --save-dev eslint-config-prettier eslint-plugin-prettier

    Then, update your ESLint configuration in .eslintrc.json:

    {
  "extends": ["eslint:recommended", "plugin:prettier/recommended"],
  "rules": {
    "prettier/prettier": "error"
  }
}

    This configuration tells ESLint to use the recommended rules and also to enforce Prettier’s rules.

    7. Run Your Tools

    Now you can run these tools to check and format your code:

    • For Babel, add a script to your package.json:
    "scripts": {
  "build": "babel src --out-dir dist"
}

    This command compiles your code from the src folder to a dist folder.

    • For ESLint, run:
    npx eslint yourfile.js
    • For Prettier, format your files with:
    npx prettier --write .

    And that’s it! You’ve successfully set up a modern frontend development workflow. By using these tools, you’ll be able to write cleaner, more efficient, and more maintainable code.

    Tags: