Linting de neutrino personalizado

Na semana passada, meu amigo Eli Perelman compartilhou Aplicativos modernos em JavaScript com NeutrinoO Neutrino é uma nova e incrível ferramenta do Node.js para criar aplicativos incríveis com o mínimo de esforço. Não há necessidade de aprender webpack, vasculhar plug-ins babel ou pesquisar o que exatamente é necessário para colocar um aplicativo React.js em funcionamento – basta instalar o Neutrino e pronto! Fiquei muito impressionado com o trabalho do Eli e com a facilidade de desenvolvimento para personalização.

Uma personalização importante para mim foi a capacidade de modificar as regras padrão de linting e executar a rotina de linting a partir da linha de comando quando eu quisesse. O Neutrino fornece um conjunto de regras padrão do ESLint e executa o linting enquanto o usuário modifica o código, mas também é importante testar se o linting é aprovado na CI. Vamos ver como podemos criar regras de linting personalizadas com nossa própria predefinição personalizada!

Etapa 1: Criando uma predefinição

As predefinições permitem que o senhor personalize elementos do seu aplicativo Neutrino, como regras do ESLint, plug-ins do Babel, caminhos e outras configurações globais de todo o aplicativo. Primeiro, vou mostrar ao senhor o código das regras de linting personalizadas e, em seguida, explicarei o que está acontecendo:

const lint = require('neutrino-lint-base');
const merge = require('deepmerge');

module.exports = neutrino => {
  // Implement custom linting
  lint(neutrino);
  neutrino.config.module
    .rule('lint')
    .loader('eslint', props => merge(props, {
      options: {
        globals: ['describe', 'expect', 'jest', 'test', 'document', 'window', 'fetch'],
        rules: {
          // Don't require () for single argument arrow functions
          'arrow-parens': 'off',
          // Don't require trailing commas
          'comma-dangle': 'off',
          // Don't require file extensions on imports
          'import/extensions': 'off',
          // Don't mark as unresolved without extensions
          'import/no-unresolved': 'off',
          // Don't let ESLint tell us how to use whitespace for imports
          'padded-blocks': 'off',
          // Hold off on propTypes for now
          'react/prop-types': 'off'
        },
        baseConfig: {
          extends: ['airbnb-base', 'plugin:react/recommended']
        }
      }
    }))
};

Enviando neutrino para lint prepara o aplicativo Neutrino para o linting. Em seguida, usamos merge para mesclar profundamente a configuração de linting personalizada com nossas próprias regras:

1. Estender airbnb-base As regras de linting com são um conjunto muito popular de diretrizes do ES6
2. Estender as diretrizes recomendadas de linting do React.js
3. Especifique quais globais serão permitidos durante a criação de linting
4. Definir valores para regras muito específicas do ESLint que queremos ou não aplicar

É claro que as regras que personalizei acima são totalmente de minha preferência; o senhor não precisa estender nenhuma biblioteca ESLint existente (como fiz com airbnb e React) e pode aplicar as regras que quiser.

Passo 2: .eslintrc.js

Se quiser executar o linting a partir da linha de comando a qualquer momento (no caso de CI ou de um gancho pós-compromisso, por exemplo), você precisará criar um .eslintrc.js para iniciar o linting:

const Neutrino = require('neutrino');
const pkg = require('./package.json');
const api = new Neutrino(pkg.config.presets);

module.exports = api.custom.eslintrc();

.eslintrc.js cria uma instância do Neutrino com predefinições definidas em package.json (falaremos sobre isso na próxima seção) e expõe um eslintrc() que executa a rotina lint.

Etapa 3: Modificar package.json

Com a predefinição criada com suas regras de linting personalizadas em mente, algumas alterações no package.json devem ser feitas. A primeira é adicionar esse arquivo de predefinição personalizado ao diretório config.presets :

"config": {
  "presets": [
    "neutrino-preset-react",
    "conduit-preset.js"
  ]
},

Em seguida, precisaremos adicionar a predefinição do airbnb do Neutrino à nossa lista de dependências:

yarn add neutrino-preset-airbnb-base -dev

Por fim, adicionaremos um lint para o scripts para que possamos executar o linting a partir da linha de comando:

"scripts": {
  "lint": "./node_modules/eslint/bin/eslint.js --ext .js,.jsx src/ test/",
}

Agora podemos executar o seguinte na linha de comando:

yarn lint

Observe também que a regra de linting personalizada é aplicada ao manual lint bem como durante o recarregamento ao vivo do webpack e a rotina de linting!

Adoro o Neutrino porque ele requer configuração mínima para entrar em funcionamento, mas a configuração personalizada é fácil quando o senhor precisa. Fique de olho no avanço do Neutrino, pois o desenvolvimento está sendo feito rapidamente e a comunidade está se unindo em torno desse projeto incrível!