Cubicforest JS setup

dsp2017-1.png

I’ve spent some time lately to prepare JS environment for the Cubicforest project:

  • Editor (Webstorm)
  • Eslint (plus Webstorm)
  • Babel (plus Webstorm)

It’s not much, but before starting the development, I’ve had some problems with the setup. Some of them were fixed in the way I can’t remember, so the exact steps of setup will not be shown.

Without much experience with linting tools (which check Javascript code for e.g. syntax errors) I chose ESlint. The next step was the configuration. eslint-config-airbn choice made https://github.com/airbnb/javascript. Setup steps with npm are listed here https://www.npmjs.com/package/eslint-config-airbnb, everything went smooth.

Having some experience with Webstorm, I’m declaring it as the best IDE for JS development. Previously I was working with Brackets and Sublime. I even have spent some time with Emacs configuration, which gave pretty satisfying results, but in the end Webstorm is the clear winner.

Coming back to the Eslint: Webstorm needs a .eslintrc.js configuration file and path to the binary. After that it shows the errors during the coding. If it comes to airbnb, these are some rules which convinced me to that choice (all of the rules listed here):

  • support for ES6: forcing many ES6 improvements like:
    • using const for all references (let eventually)
    • object method shorthand, property value shorthand
    • default parameter syntax rather than mutating function arguments
    • others..
  • single quotes for strings
  • named function expressions instead of function declarations
  • Never reassign parameters
  • aaaaand many others…

Having linter helps to improve code quality.

Digression about shorthands… really cool example of the issue where ES6 really shines:

const hello = 'hello';

// old way
var obj = {
  hello: hello
};

// es6 Airbnb way
const obj = {
  hello,
};

Notice the trailing comma: it’s another example of the detail which intuitively seems to be a better option.

Next: transpiling ES6 with Babel. Haven’t used yet syntax which would not be understood by Chrome except the modules. Another thing in which ES6 rocks and gives shock about how the things can be simple. Few notes about that: Babel has to choose the way in which ES5 modules will be translated. I’ve chosen AMD + RequierJS. Example how the final code looks like (taken from https://www.npmjs.com/package/babel-plugin-transform-es2015-modules-amd):

from:

export default 42;

to:

define(["exports"], function (exports) {
  "use strict";

  Object.defineProperty(exports, "__esModule", {
    value: true
  });

  exports.default = 42;
});

How to watch files for Babel transpile: again Webstorm comes with help. When .babelrc is properly configured like this:

{
  "presets": ["env", "es2015"],
  "plugins": ["babel-plugin-transform-es2015-modules-amd"]
}

Webstorm launches Babel on every file save and exports results by default into the dist directory. I have lost a lot of time because of the lack of the ‘babel-plugin-transform-es2015-modules-amd’ plugin. Without it Requirejs wasn’t able to load the files.

written in Emacs with org2blog mode

Leave a Reply

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