Be A React Dev

Lint In The Machine

05-May-2023


Amazon Prime

eslint plus prettier plus reactjs

This article is assuming you are using Visual Studio Code as your text editor when coding. There are other text editors that are suitable for coding. If you use them, you are dead to me. Just kidding. We just can’t be friends.

Prettier and ESLint are both popular tools used for linting and formatting JavaScript code.

Prettier is a code formatter that automatically enforces a consistent code style across your entire codebase. It can handle a wide variety of formatting rules, including indentation, line length, and spacing, and can automatically format your code as you write it.

ESLint, on the other hand, is a linter that analyzes your code for potential errors and coding conventions. It can identify problematic patterns or code that does not follow best practices.

The "prettier-eslint" plugin combines the functionality of Prettier and ESLint, allowing you to use both tools together to format and lint your code. It uses Prettier to format your code and then uses ESLint to check for any errors or warnings that might have been introduced by the formatting changes.

In summary, Prettier is a code formatter, ESLint is a linter, and prettier-eslint is a plugin that combines the functionality of both tools to provide a more comprehensive code formatting and linting solution for JavaScript.

My preferences for linting are as follows:

.prettierrc file

{
  "endOfLine": "lf",
  "printWidth": 80,
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all"
}

The above file goes in your root folder in a standard node / javascript project.

I find that code is easier to read when using the above settings. And slightly harder to write buggy code.

What does all this have to do with lint in the machine? Meh. I was feeling playful.

(written mostly by ChatGPT)


Get Cool Swag

If you are finding this content useful (or maybe you are just a nice person or maybe you just like my merch) I would be greatful if you headed over to my shop and make a purchase or two. All proceeds will go towards making more courses.

If there’s merch missing that you would like, let me know (click this: Make Something For Me ) and I’ll try to make it for you.

mom’s little shits times three

Mom’s little shits times three

You can buy this product or you can check out my shop of products.


About

The Author Guy

Find Me

Rob Welan <rob.welan@beareact.dev>FacebookKo-FiLinkedInMediumPatreonRSS FeedStack OverflowX

Tech In Use

Be A React Dev

© 2024 Be A React Dev. All rights reserved.