We’re Now Using ESLint for WordPress Coding Standards in GiveWP

WordPress has already defined Javascript Coding Standards which needs to be followed during development of WordPress Core, Plugins, or Themes. This allows developers to maintain the quality of the platform and even you can save time by getting rid of common JS errors.

Following WordPress Javascript Coding Standards using ESLint

To overcome JS errors and maintain quality for JS files as per the coding standards defined by WordPress, we have introduced ESLint in the upcoming release 1.8.12.

ESLint is a pluggable linting utility for Javascript which helps developers to get rid of common errors during development.

How to Configure ESLint

We’ve packaged Give Core with the ESLint config file. So, you need to worry much about it and just follow simple steps once and you’re done!

Step 1: Install Node Modules as defined in Give’s package.json

$ npm install

Step 2: Using ESLint

With Terminal:

  1. Open Terminal
  2. Type Command in format: eslint [options] file.js [file.js] [dir]
  3. You’ll get list of suggestions, if any:
Example of ESLint Suggestions

An example of ESLint suggestions

For Example,
$ eslint yourfile.js

With PHPStorm… please read on:

Configuring PHPStorm with ESLint

We use PHPStorm as our IDE of choice. If you use it as well, follow the below steps to configure ESLint with PHPStorm:

  1. Open PHPStorm and go to Preferences > Languages and Frameworks > Javascript > Code Quality Tools > ESLint
  2. Now, Tick the Enable checkbox.
  3. Set path for Node Interpreter and the ESLint Package, if it is not set by default.
Steps to configure ESLint in PHPStorm

Steps to configure ESLint in PHPStorm

ESLint suggestions in PHPStorm

ESLint suggestions in PHPStorm

That’s it! Now you’re all set up to code JavaScript in GiveWP using WordPress Coding Standards. Happy Coding! 🙂

 

Ravinder Kumar

Open source lover, the father of a daughter, continually improving developer, and Senior WordPress Engineer at GiveWP.

 

Leave a Comment