Useful JavaScript Tools For WordPress Developers


Are you a WordPress enthusiast? If you are, then you need to take a look at our new plugin–Nelio Content. There's so many things you can do without leaving your Dashboard ever… Discover them all!

Dear programming friends, web makers, code tamers, compulsive semicolons lovers, and WordPress Hackermans. Do you really still use <table> and suffer from severe <div> illness? Don’t worry, fortunately there is a solution for you all.

Leave the 90’s behind once and for all and become a hipster web programmer! As our beloved leader Matt Mullenweg said a few years ago: learn JavaScript, deeply!

The future is today. And it’s time to leave our comfort zone (a.k.a. PHPland) to take the leap and be prepared for everything that is about to reach the WordPress world, thanks to the introduction of Gutenberg in particular and JavaScript in general.

Today there are a lot of JavaScript tools that allow you to tune your code with little to no effort. In this post I’ll introduce you to some of these JavaScript magic. Maybe you heard about some of these tools, but do you really know what they’re for?

No more excuses! I’m sure that after you’ve finished reading all this, you’ll want to try some of these JavaScript tools. Your productivity and programming hypsterism will take an incredible leap forward in quality. Let’s go!

Prettier – Beautify Your Code Automatically

Prettier is a tool that unifies the format of your code.
Prettier is a tool that unifies the format of your code.

Let’s start with something simple. I’m sure that if you’ve been programming for some time and have worked on a team or had to share code with someone else, you’ve had this problem. Tabs or spaces? Parenthesis on the same line or the next? 80 characters per line or more? In short, the way in which you format or indent your code can lead to heated discussions…

Coding guidelines are often used to solve this type of problem. And WordPress is no different in this case. If you want to contribute to WordPress, your HTML, CSS, PHP and JavaScript code has to follow the defined guidelines.

What Prettier does is format the code according to the configuration you have chosen. This way, once you save your JavaScript file in your editor (there are several editors compatible with Prettier, including my beloved Atom), the code is transformed and standardized. Therefore, all the members of your team, independently of how they write the code, will end up generating files with the same unified style.

If you want to try it yourself, just use its Playground, which is directly accessible from the Prettier website. Write your JavaScript there and you will see how it looks after the transformation. On the other hand, if you want to install it on your computer, npm is your friend:

npm install -g prettier

and to test it you have the prettier command, which you can use as follows:

prettier ./my/file.js

This command will apply the transformation to the ./my/file.js file and display the result in the command line terminal.

WordPress considered integrating Prettier into Core, but it looks like it didn’t happen in the end (you can see the discussion here). But once Prettier adds PHP support (it’s in the making) it may find a place in WordPress Core.

ESLint – Improve The Quality of Your JavaScript

ESLint allows you to detect problems with your JavaScript code before running it in order to solve them before it’s too late. In addition, it’s also able to tell you about changes you should make in your JavaScript code to make it compatible with certain guidelines (including WordPress).

You can take a look at the online demo on their website to see the typical errors that ESLint can find in your JavaScript. On the other hand, if you want to test ESLint on your computer, just use the following npm command:

npm install -g eslint

Then, set up a configuration file (.eslintrc, which you can modify later):

eslint --init

And that’s it. Try it with a JavaScript file directly from the terminal:

eslint ./my/file.js

As a result you will see the problems that this file has (errors and warnings) as a result of applying the eslint command.

PostCSS – Transform Your CSS Styles

When it comes to web development, I must confess one of the parts I hate the most is dealing with CSS. It can be a nightmare to take everything into account so that your CSS works as expected in all browsers.

Frustrated programming
Dealing with CSS can be a nightmare. I hate it! Source: Giphy.

Lucky for me (and for the rest of web developers, of course), there are tools that help you work with CSS. The one we use the most in Nelio is PostCSS. Thanks to it, we can forget about browser compatibility prefixes (-webkit or -moz, for example). In addition to this it includes CSSNext, which allows you to use today the CSS syntax of the future.

To test it you can go directly to the Playground of their website. Or you can also try the CLI version from your terminal:

npm install -g postcss-cli
postcss-cli ./my/file.css

But most commonly you should include a PostCSS package compatible with your code editor (again, Atom 😉) or configure it in Gulp or Webpack (or whatever you use to process your source files and generate your final code).

Babel – Use The Next Generation of JavaScript Today

Babel is a JavaScript transpiler that allows you to use future JavaScript syntax today, without waiting for browsers to support it. It works just like PostCSS for CSS, but in this case it’s for JavaScript. For example, with Babel you can use arrow functions in your JavaScript code. Here is an example of the original code and the code after passing through Babel:

On the left, JavaScript code with arrow functions. To the right, the equivalent JavaScript generated by Babel that is compatible with all browsers.
On the left, JavaScript code with arrow functions. To the right, the equivalent JavaScript generated by Babel that is compatible with all browsers.

Again, if you want to try Babel you can do it directly from its own website where you can write the JavaScript you want and see the JavaScript resulting from applying Babel. On the other hand, you can install the Babel package and test it on your own terminal:

npm install -g babel-cli
babel ./my/file.js

The result of the command is the JavaScript code transformed to be compatible with all current browsers. As with PostCSS, look at the instructions to install it in the way that best suits your project (Gulp, Grunt, Webpack…).

Webpack – Organize Your Code Better

I don’t want to miss another JavaScript tool that’s also included in Gutenberg. This is Webpack, a code packer that takes all the dependencies of your project, generates a dependency network, and is capable of creating packages to make it easier for you to work.

Webpack investigates your dependencies and packages them to make it easier for you to work.
Webpack investigates your dependencies and packages them to make it easier for you to work.

Webpack is a bit complicated to understand at first… So, here’s an example extracted directly from its website that should clarify how it works:

Example of using Webpack
Example of using Webpack.

In the image above you can see that you have two JavaScript files: app.js and bar.js. The point is that app.js relies on bar.js (and this in turn could have many other dependencies). The whole issue of dependencies can be a torment, but with Webpack it’s much simpler.

You have to create a webpack.config.js file like the one shown in the image, and establish app.js as the initial entry point and bundle.js as the output file you want to generate, which will obviously include all the required dependencies. Once this is defined, simply execute the webpack command tow automatically create the bundle.js file. Add it in your HTML file and you’re done!

The idea is that you define bundles from initial entry points and then forget about them. Dependencies are managed by Webpack itself. This is very useful when we have projects with a lot of files and modules, such as Gutenberg.

Personal Opinion

Whether you want it or not, today the odds of your using one of these JavaScript tools are enormous. Many web projects, such as WordPress themes and plugins, include them. Even Gutenberg makes use of a lot of utilities of this kind.

You don’t have to learn them all at once, but it would be nice if you were to integrate some of them little by little into your developments. And remember, if you use any other outstanding tools, leave us a comment with your experience.

Featured image by Charles Deluvio 🇨🇦 on Unsplash

PoorMehGoodVery GoodAwesome! (No Ratings Yet)


Antonio obtained his PhD in Computer Science at UPC. He has several publications in the field of data mining and information retrieval applied to conceptual modeling and health informatics. He specialized in the design, development, and integration of web services and cloud applications. He's an active contributor to the WordPress community and participates in meetups, seminars and WordCamps.

Leave a Reply

Your email address will not be published. Required fields are marked *