Vlastní Neutrino Lining

Minulý týden můj přítel Eli Perelman sdílel Modern JavaScript Apps s Neutrinem, úžasným novým nástrojem Node.js pro vytváření úžasných aplikací s minimálním zmatkem. Není třeba se učit webpack, prohledávat pluginy babel nebo hledat co přesně je potřeba ke spuštění aplikace React.js – stačí nainstalovat Neutrino a jít! Byl jsem ohromen Eliho prací a snadností vývoje pro přizpůsobení.

Jednou z důležitých úprav pro mě byla možnost upravit výchozí pravidla lintování a spouštět rutinu lint z příkazového řádku, když jsem chtěl. Neutrino poskytuje výchozí sadu pravidel ESLint a nepouští vlákna, když upravujete kód, ale důležité je také testování, zda linting projde v rámci CI. Podívejme se, jak můžeme vytvořit vlastní pravidla lintingu s naší vlastní předvolbou!

Krok 1: Vytvoření předvolby

Předvolby vám umožňují přizpůsobit prvky vaší aplikace Neutrino, jako jsou pravidla ESLint, zásuvné moduly Babel, cesty a další globální konfigurace pro celou aplikaci. Nejprve vám ukážu kód pro vlastní pravidla lintingu a poté vysvětlím, o co jde:

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']
        }
      }
    }))
};

Odesílání neutrino do lint připravuje aplikaci Neutrino na tvorbu vláken. Dále použijeme merge k hlubokému sloučení vlastní konfigurace lintingu s našimi vlastními pravidly:

  1. Rozšířit airbnb-base Pravidla pro linting s jsou velmi oblíbenou sadou pokynů ES6
  2. Rozšiřte doporučené pokyny pro linkování React.js
  3. Uveďte, které globální prvky povolíme při lincování
  4. Nastavte hodnoty pro velmi specifická pravidla ESLint, která děláme nebo nechceme vynucovat

Samozřejmě pravidla, která jsem si výše upravil, jsou zcela moje preference; nemusíte rozšiřovat žádné existující knihovny ESLint (jako jsem to udělal s airbnb a React) a můžete vynutit jakákoli pravidla, která chcete.

Krok 2: .eslintrc.js

Pokud chcete-li kdykoli spustit linting z příkazového řádku (například v případě CI nebo post-commit hook), budete muset vytvořit .eslintrc.js soubor pro spuštění lintingu:

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

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

.eslintrc.js vytvoří instanci Neutrino s předvolbami definovanými v package.json (k tomu se dostaneme v další části) a vystaví eslintrc() funkce, která spustí rutinu lint.

Krok 3: Upravte package.json

Vzhledem k předvolbě vytvořené s ohledem na vaše vlastní pravidla prolínání je třeba provést několik změn package.json musí být provedeno. První je přidání tohoto vlastního souboru přednastavení do config.presets pole:

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

Dále budeme muset přidat předvolbu Airbnb společnosti Neutrino do našeho seznamu závislostí:

yarn add neutrino-preset-airbnb-base -dev

Nakonec přidáme lint klíč na scripts abychom mohli spustit linting z příkazového řádku:

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

Nyní můžeme z příkazového řádku spustit následující:

yarn lint

Všimněte si také, že vlastní pravidlo liningu se použije na ruční lint příkaz i během živého načítání a lintingu webového balíčku!

Neutrino mám rád, protože ke spuštění vyžaduje minimální konfiguraci, ale když potřebujete, vlastní konfigurace je snadná. Sledujte, jak se Neutrino posouvá kupředu, protože vývoj jde rychle dopředu a komunita se za tímto úžasným projektem soustředí!