Easy methods to Format Your Code Utilizing .eslintrc

I’ve gotten very used to having VSCode autoformat my file after I save. Often, I exploit Prettier. However I joined a challenge that makes use of ESLint to handle its code model, and I needed to match the workforce’s formatting.

I needed that candy auto-formatting on save, however utilizing the eslintrc.json file within the challenge’s root dir as a substitute of Prettier.

Most weblog posts needed to make a whole tutorial out of this… the best way to arrange eslint, the best way to create the .eslintrc file, and so forth and so forth… however I didn’t want that. I’ve an current challenge, I simply wish to configure VSCode to make use of ESLint as a substitute of Prettier.

This turned out to solely want 4 strains of settings config and a plugin.

Right here’s the best way to do it:

1. Set up VSCode ESLint Plugin

In VSCode, open the extension browser with the button on the left. On the Mac, the keyboard shortcut Cmd+Shift+X ought to do the identical.

Seek for eslint

Set up the highest consequence, referred to as “ESLint”. (It’s this one with over 10 million downloads)

2. Configure VSCode Settings to make use of ESLint for Formatting

Open up VSCode’s settings. On a Mac, press Cmd+, or get there by way of the menus: Code > Preferences > Settings.

It’ll open the flowery settings editor, however we want the uncooked JSON settings file as a substitute.

Click on that tiny icon within the top-right that appears like a chunk of paper with slightly arrow.

Add these 4 new strains contained in the top-level settings object:

{
  // ...
  "eslint.format.allow": true,
  "editor.codeActionsOnSave": {
    "supply.fixAll.eslint": true
  }
}

The primary one activates ESLint for formatting, and the following 3 make it do the formatting while you hit save.

That ought to do it! Save the settings file and shut it, we’re achieved.

Strive making some adjustments to a file that violate some ESLint rule – perhaps leaving off a semicolon in the event that they’re required? – and urgent Save. It ought to auto-format.

Is the formatting nonetheless utilizing Prettier?

I bumped into an issue lately the place Prettier settings have been overriding the eslint settings. I’m truthfully unsure how these bought in there… perhaps I put them in and forgot.

In any case, if you’d like ESLint to indent your information, make certain Prettier isn’t overriding it. Search for any strains like this, that say the defaultFormatter must be Prettier (Cmd+F or Ctrl+F for “prettier” as a result of there is likely to be a number of!), and remark them out:

  // "[javascriptreact]": {
  //   "editor.defaultFormatter": "esbenp.prettier-vscode"
  // },

You would possibly must undo this if you happen to change again to a challenge that doesn’t use ES Lint.

You may as well create a number of VSCode profiles if you happen to typically work in initiatives with totally different necessities.

Studying React could be a battle — so many libraries and instruments!
My recommendation? Ignore all of them 🙂
For a step-by-step strategy, take a look at my Pure React workshop.

Study to suppose in React

• 90+ screencast classes
• Full transcripts and closed captions
• All of the code from the teachings
• Developer interviews

Begin studying Pure React now

Dave Ceddia’s Pure React is a piece of monumental readability and depth. Hats off. I am a React coach in London and would totally advocate this to all entrance finish devs eager to upskill or consolidate.

Alan Lavender

@lavenderlens