ESLINT PRETTIER Notes

eslint_notes.md

"ESLINT PRETTIER" === "CODE QUALITY"

PRETTIER - What is Prettier? Prettier is an opinionated code formatter

prettier(yourcode) {
    log("Your Code in prettier format");
}

Prettier fromat the code in actually three steps:

1. Parses the code to its abstract syntax tree(AST) getting rid of almost all original formatting.
2. Then it tranform the AST into another tree - "using some of the opinionated rules to group the code fragments"
3. Finally it prints the intermediate tree to a string, choosing the best places to add the line-breaks based on the max line length(default 80).

Prettier bans all custom styling by parsing it away and re-printing the parsed AST with its own rules that take the maximum line width into account, wrapping code when necessary.

What is ESLint? ESLint - the pluggable linting utility for JavaScript and JSX

Prettier doesn't replace ESlint Possible Errors. It can replace some of ESlint rules concerning styling. The goal of these rules is mostly to enforce consistency across the codebase.

###My Setup - Handling the task of static analysis to eslint and prettier to format the code.

Code before-prettier

var logToConsole = (msg) => {
    console.log(msg)
    }

        let message = 'my message to log'
              logToConsole(message)

Let's install prettier

npm install --save-dev prettier

Out of the box Prettier already has excellent defaults, including:

indenting using spaces and not tabs indents are 2 spaces semicolons inserted at the end of every line setting all quotes to double quotes formatting the code against a print width of 80

Instead of running the prettier from the command line every time, we can run the create a config file .prettierrc

Config with Eslint

npm install --save-dev eslint

A little more about ESLint Rules ESLint makes use of rules to determine whether certain code should be allowed or disallowed. No rules are enabled by default so it's up to us to define these rules based on our own requirements.

Run Eslint

./node_modules/.bin/eslint "**/*.{js,jsx}"

configure Prettier and ESLint to work together. We want our tools to really focus on their specialisations. To do this we need to disable all formatting rules inside ESLint and let Prettier take over managing the code style.

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

Enable the ESLint Prettier config The eslint-config-prettier shareable configuration disables all of the formatting rules within ESLint previously set by the airbnb ruleset. We definitely still want to keep all of the excellent code quality rules provided by that configuration though.

Edit .eslintrc.json and add "prettier" after the "airbnb" entry.

"extends": ["airbnb", "prettier"], The order of configs are important to ensure the new shareable config rules override and disable all formatting rules already set within ESLint.

Prettier will now automatically format our code on each file save and these changes won't conflict with ESLint.