Will & Skill Developers

Will & Skill Developers


Thoughts, snippets and ideas from the team at Will & Skill AB, Stockholm.

Faisal Mahmud
Author

“The mind is not a vessel to be filled, but a fire to be kindled.” ― Plutarch

Share


Automated JavaScript linting and formatting on VS Code for Your ReactJS project

Faisal MahmudFaisal Mahmud

At Will & Skill most of us have moved to VS Code due to the flexibility it provides when it comes to tools and languages. It is a great pleasure to just install a new extension and take it for a spin.

In this short guide I will show You how You can install ESLint and Prettier to automate the linting and formatting process when You code!

There are a few things You need to consider.

  1. Install Visual Studio Code
  2. Install ESLint
  3. Install Prettier
  4. Install the VS Code extension for Prettier
  5. Configure VS Code to use ESLint and Prettier according to the steps described below

NOTE: We will be using plugins that uses AirBNBs Javascript Styleguide.

Lets get started!

Add a .eslintrc.js in your project root

module.exports = {  
  parser: "babel-eslint",
  plugins: ["react", "prettier"],
  rules: {
    "prettier/prettier": "error"
  },
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
      modules: true
    }
  },
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "airbnb-base",
    "plugin:prettier/recommended"
  ]
};

And install the packages needed to support the configuration above

npm install --save-dev babel-eslint eslint-config-airbnb-base eslint-plugin-react  

or

yarn add --dev babel-eslint eslint-config-airbnb-base eslint-plugin-react  

Add a .prettierrc.js file in Your project folder

module.exports = {  
  printWidth: 80,
  parser: "flow"
};

Install the necessary prettier packages

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

or

yarn add --dev prettier eslint-plugin-prettier eslint-config-prettier  

Edit Your User Settings file to include the lines below

TIP: On macOS You can access the settings pane by pressing CMD + , on Your keyboard!

{
...
  "javascript.format.enable": false,
  "prettier.eslintIntegration": true,
  "editor.formatOnSave": true
...
}

or if You only want to format javascript files

{
    "javascript.format.enable": false,
    "prettier.eslintIntegration": true,
    "[javascript]": {
        "editor.formatOnSave": true
    }
}

You can also find these config files as a Github Gist

And You are done! You should be able to open a Javascript file inside VS Code and add some Javascript code and see the formatting in action when You press save.

Make sure that You can see that it says "Prettier" with a checkmark on the bottom right corner.

VS Code with the Prettier formatter enabled

Faisal Mahmud
Author

Faisal Mahmud

“The mind is not a vessel to be filled, but a fire to be kindled.” ― Plutarch

Comments