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.
Prettier – Beautify Your Code Automatically
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…
npm is your friend:
npm install -g prettier
and to test it you have the
prettier command, which you can use as follows:
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.
npm install -g eslint
Then, set up a configuration file (
.eslintrc, which you can modify later):
As a result you will see the problems that this file has (errors and warnings) as a result of applying the
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.
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 (
-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).
npm install -g babel-cli babel ./my/file.js
Webpack – Organize Your Code Better
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:
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.
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.