Set Up ESLint, Prettier for WordPress

If you are interested in getting involved with WordPress development, you might want to follow the WordPress Javascript coding standards that WordPress requires from their developers. You might be tempted to set up formatting and linting to catch common bugs and ensure other contributors can read your code easily. WordPress offers various linting and prettier configurations, but due to sadly lacking documentation setting them up can be a bit cumbersome. This article aims to solve that problem by showing you how to set up ESLint, Prettier for WordPress.

If you are using SCSS in your project, don’t miss this post that tells you how to test up the WordPress Stylelint and Prettier configurations to work together.

Estimated reading time: 3 minutes

Install ESLint

First, let’s install eslint so we can use this to lint our Javascript files.

With NPM:

npm i eslint --save-dev

With Yarn:

yarn add eslint -D

Install Prettier (if you haven’t yet)

We need to install the prettier package to our project so we can run it on our files. Now, to get our JavaScript ready for WordPress coding standards we need to install prettier so that we can then install the WordPress configuration.

With NPM:

npm install --save-dev --save-exact prettier

With Yarn:

yarn add prettier --exact -D

Installing the ESLint configuration

Installing the eslint configuration from WordPress is simple enough. Follow these steps below.

If you use NPM:

npm install @wordpress/eslint-plugin --save-dev

If you use the yarn package manager:

yarn add @wordpress/eslint-plugin -D

You will run into problems using this configuration as is, especially if you want to use prettier in conjunction with ESLint.

Install eslint-plugin-prettier

To get ESLint and Prettier working to get your JavaScript ready for WordPress coding standards, set up the eslint-plugin-prettier package. The eslint-plugin-prettier configuration allows prettier to handle to formatting of your JavaScript code while allowing ESLint to catch possible errors with your JS.

With NPM:

npm i eslint-plugin-prettier --save-dev

With Yarn:

yarn add eslint-plugin-prettier -D

Set Up ESLint Prettier Configuration

Start by creating an eslintrc file. In your root folder, create a file named .eslintrc and add the following to the file:

{
    "extends": [ "plugin:@wordpress/eslint-plugin/recommended-with-formatting", "plugin:prettier/recommended" ]
}

You can test if this is working by throwing the following in your terminal (assuming your Javascript files are located in your root/src folder:

npx eslint ./src

Create/Update your linting script

Back in your package.json file you can create a script that will lint (and check for formatting issues) easily.

In your scripts key of your package.json add the following script command:

"lint:js": "npx eslint ./src",

Note, that if your JS files aren’t located in the src folder in your root, this won’t work. Be sure to update the folder path to your Javascript from ./src to whatever your folder structure is.

If you followed our SCSS stylelint and prettier post here, now is a good time to add one script to run them all, like this below.

One Script to Lint them all

Below is an example of how your package.json scripts key should look once you’ve added ESLint, Stylelint and Prettier to your project.

Notice how the “sniff” script below will run the scss linting before the JS linting. You may only get warnings for the scss until those are solved before you get warnings on the JS files. If you aren’t using our SCSS Sylelint configuration just leave out the lint:scss script.

"scripts": {
		"test": "echo \"Error: no test specified\" && exit 1",
		"build": "npx webpack",
		"lint:js": "npx eslint ./src",
		"lint:scss": "npx prettier -w **/*.scss && stylelint **/*.scss",
		"sniff": "npm run lint:scss && npm run lint:js"
	}