Airbnb - Part VI

Today we’re going to talk about linters. I confess, I didn’t always use them. In reality, as a good beginner and fool, I thought they were unnecessary. But… life shows that in reality they can be very useful when you’re developing, not only showing you the extra spaces you’re leaving, but also showing you good ways to develop your application, generating a real standard for your development stack, and simpler things too. For example, when you write a promise, until then, I, Igor Vieira, wrote it like this:

const umaFuncaoQualquer = () => {
    return new Promise((resolve, reject) => {
            UmaQuery.find()
                .then(res => resolve(res))
                .catch(err => reject(err))
    })
}

But there’s another way to make it a bit simpler, remembering something specific to arrow functions: the direct return of a Promise in its scope. In other words, I don’t need to pass a return inside an arrow function, I can write it like this:

const umaFuncaoQualquer = () =>
    new Promise((resolve, reject) => {
        UmaQuery.find()
            .then(res => resolve(res))
            .catch(err => reject(err))
    })

It may seem like a very small thing, but in reality it summarized the way we write. The less you write, and the more readable and syntactic your code is, the better it will be. Believe me, less is more, so the idea is always to do less in order to do more and better. Anyway, to get started, we’re going to use the eslint-config-airbnb package in our project. But wait, we’re not going to install it the same way we installed the other packages via npm. We’re going to copy a code snippet, and it will install the other dependencies we need for our application. Then we’ll make some small configurations, rules that will define what the code standard will be for our application. This is great for organizing our entire application and making maintenance of our product easier!

Anyway, on the npm website you’ll find how to install it. We’re going to copy this snippet here and paste it into the terminal, where our project is:

Note!

If you use a Linux-based system and need authentication, quickly enter as root and install. Remember that this is also a package, so you’ll need authentication to install it! =]

Then we need to make some configurations, the first one is in .eslintrc.js

// http://eslint.org/docs/user-guide/configuring

module.exports = {
  root: true,
  parser: 'babel-eslint',
  parserOptions: {
    sourceType: 'module'
  },
  env: {
    browser: true,
  },
  extends: 'airbnb-base',
  // required to lint *.vue files
  plugins: [
    'html'
  ],
  // check if imports actually resolve
  'settings': {
    'import/resolver': {
      'webpack': {
        'config': 'build/webpack.base.conf.js'
      }
    }
  },
  // add your custom rules here
  'rules': {
    // don't require .vue extension when importing

    'import/extensions': ['error', 'always', {
      'js': 'never',
      'vue': 'never'
    }],
    "semi": 2,
    "indent": [2, "tab"],
    "no-param-reassign": [2, {"props": false}],
    "no-console":0,
    "no-useless-constructor":0,
    "no-empty-function":0,
    "no-tabs":0,
    "no-unused-vars":0,
    "no-unused-expressions":0,
    "no-prototype-builtins":0,
    "no-restricted-syntax": 0,
    "no-underscore-dangle":0,
    "no-plusplus":0,
    "radix": 0,
    // allow optionalDependencies
    'import/no-extraneous-dependencies': ['error', {
      'optionalDependencies': ['test/unit/index.js']
    }],
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
  }
}

If you’ve followed from the beginning, this file comes by default and defines the rules, forms and extensions we can use, and some plugins we have available. Besides this file, we have another one for our editor, .editorconfig

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

The important thing is that here we’re going to make one more modification. In package.json, we’re going to add a lint to help make our error correction easier!

"scripts": {
    "dev": "node build/dev-server.js",
    "start": "node build/dev-server.js",
    "build": "node build/build.js",
    ...
    "lint": "eslint '**/*.js', '**/*.vue'",  <==
},

Let’s do more. Let’s make it do this on all of them. So for this, we’ll create another command, quite simple.

"scripts": {
    "dev": "node build/dev-server.js",
    "start": "node build/dev-server.js",
    "build": "node build/build.js",
    ...
    "lint": "eslint '**/*.js', '**/*.vue'",  <==
    "lint:fix": "eslint '**/*.js', '**/*.vue' --fix"
},

The —fix suffix will try to fix what it can fix in our application. It won’t be everything, but it can improve a good part around our application. So let’s run the following command:

sudo npm run lint:fix

And there, we can see what we need to fix in our application

What we have to do is fix it! =]

They are very simple errors. The first is to remove the comma ,. Actually, we’re going to use a catch to make it easier to write this function. It will look like this:

removeTask(taskItem) {
			this.service
        .deleteTask(taskItem._id)
        .then(() => {
          const taskRemove = this.tasks.indexOf(taskItem);
          this.tasks.splice(taskRemove, 1);
        }, err => console.log(`${err}`));
		},

For created, we’re going to make some changes. In the map, we’re going to change the return variable name, because it said the parameter value is the same as the scope above, so we change it to x

created() {
		this.service = new TaskService(this.$resource);

		this.service
    .listTasks()
    .then((tasks) => {
      const item = _.map(tasks, x => x);
      this.tasks = item;
    }, err => console.log(`Error listing our application ${err}`));
	},

And Info.vue, it’s much easier. We’re just going to remove the return from the function. It already returns the modified values through the function:

created() {
		this.service = new TaskService(this.$resource);

		if (this.id) {
			this.service
        .getTaskById(this.id)
        .then((res) => {
          this.task = res;
        }, (err) => {
          this.msg = err.message;
      });
    }
}

Guys, that’s it, something very simple about using linter. Airbnb has grown a lot and has been absurdly helping the web application development scene, especially when it comes to React, JS and Ruby, so there’s a lot there to study and work on.

Again, thank you and see you later!