Airbnb - Part VI

Hoje vamos falar sobre linters, confesso, eu nem sempre usava, na real como bom iniciante e tolo, achava desnecessário, but…a vida mostra que na real eles podem ser muito úteis na hora que você está desenvolvendo, não somente mostrando os espaços que você está deixando a mais, mas te mostram boas formas de você desenvolver a sua aplicação, gerar um padrão de fato para a sua stack de desenvolvimento, e coisas mais simples também, por exemplo quando você escreve uma promise, até então, eu, Igo Vieira, escrevia assim:

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

Mas tem uma outra forma de tornar um pouco mais simples, lembrando de algo próprio de arrow functions, o retorno direto de uma Promise em seu escopo, ou seja, eu não preciso passar um return dentro de uma arrow function, posso escrever assm:

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

Pode parecer uma coisa muito pequena, mas na real resumiu a forma como escrevemos, quanto menos você escrever, e quanto mais legivel e sintatico for seu código, melhor ele será, acredite, menos é mais, então a ideia é sempre fazer menos para poder fazer mais e melhor, enfim,e para começarmos, vamos usar em nosso projeto o pacote eslint-config-airbnb, mas calma, não vamos instalar da mesma forma que intalamos os demais pacotes via npm, vamos copiar um trecho de código, e ele vai instalar as demais dependencias que precisamos para a nossa aplicação, e depois vamos fazer umas pequenas configurações, roles que vão definir como será o padrão de código para a nossa aplicação, isso é ótimo para poder organizar toda a nossa aplicação e facilitar a manutenção do nosso produto!

Enfim, no site do npm você vai encontrar como instalar, vamos copiar esse trecho aqui e vamos copiar no terminal, onde está o nosso projeto:

Nota!

Se você usa um sistema baseado em linux e precisa de autenticação, entra como root rapidão, e instala, lembre-se isso também é um package então vai precisar de autenticação para instalar! =]

Depois precisamos, fazer algumas configurações, a primeira é em .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
  }
}

Se você seguiu desde o início, esse arquivo vem por default e o que define as regras, as formas e extensões que podemos utilizar e alguns plugins que temos a disposição, além desse arquivo temos um outro que é para o nosso editor, o .editorconfig

root = true

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

O importante é que aqui vamos fazer mais uma modificação, no package.json, vamos adicionar ele um lint para poder ajudar a facilitar a nossa forma de correção de erros!

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

Vamos fazer mais, vamos deixar com que ele faça isso em todos, então para isso, criaremos mais outro comando, bem simples.

"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"
},

O sufixo —fix, tentará arrumar aquilo que ele pode arrumar em nossa aplicação, não será tudo, mas boa parte ele pode melhorar em torno da nossa aplicação, e ai vamos rodar o seguinte comando:

sudo npm run lint:fix

E ai, conseguimos ver o que precisamos arrumar em nossa aplicação

O que temos a fazer é corrigir! =]

São erros bem simples, o primeiro é tirar o comma ,, na real vamos usar um catch para poder tornar mais fácil escrever essa function, ficará assim:

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

Para created vamos fazer algumas mudanças, no map vamos alterar o nome da váriavel de retorno, pois ele disse que o valor do parametro é mesmo do escopo acima, então mudamos para 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(`Erro na listagem da nossa aplicação ${err}`));
	},

E Info.vue, é bem mais de boa, só vamos tirar o return da função, ela em si já devolve os valores já alterados através da função:

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, é isso, algo bem simples a respeito de uso linter, airbnb cresceu muito e vem ajudando absurdamente o cenário voltado a desenvolvimento de aplicações web, principalmente no que se refere a react, js e ruby, então tem muito ai para poder estudar e trabalhar,

Novamente, obrigado e até mais!