Criando seu próprio pacote de configuração ESLint

mkdir eslint-config-test
cd eslint-config-test
npm init

Você terá um arquivo package.json que se parecerá com o seguinte trecho:

{
  "name": "eslint-config-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Em seguida, hora de adicionar suas dependências ESLint:

npm install -D eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-jsx eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks prettier

Os pacotes serão alterados de acordo com suas necessidades. Nesse caso, trabalho com bases de código React e uso Mais bonito para formatar meu código. o documentação menciona que, se sua configuração compartilhável depende de um plug-in, você também deve especificá-lo como um peerDependency.

Em seguida, vou criar um .eslintrc.js com a minha configuração – é semelhante ao que você já faz em seus aplicativos:

module.exports = {
  extends: [
    'airbnb',
    'eslint:recommended',
    'plugin:import/errors',
    'plugin:react/recommended',
    'plugin:jsx-a11y/recommended',
    'plugin:prettier/recommended',
    'prettier/react',
  ],
  plugins: [
    'react-hooks',
  ],
  rules: {
  },
};

o rules O objeto armazena qualquer regra que você deseja substituir. No trecho acima rules está vazio, mas fique à vontade para verificar minhas substituições. No repositório airbnb / javascript, você pode encontre uma lista de regras substituídas pela comunidade.

Hora de criar um .prettierrc com suas regras personalizadas – essa é uma parte complicada, pois Prettier e ESLint podem entrar em conflito com algumas regras:

{
  "tabWidth": 2
}

É importante mencionar que o .prettierrc O arquivo deve estar na raiz do projeto que está usando seu pacote. No momento, estou copiando manualmente. O próximo passo é exportar sua configuração no diretório index.js Arquivo:

const eslintrc = require('./.eslintrc.js');

module.exports = eslintrc;

É tecnicamente possível criar toda a configuração no index.js no entanto, você não obteria o objeto de configuração (insira seu Começo piada aqui).

Voilà! É tudo o que você precisa para iniciar seu próprio pacote de configurações. Você pode testar localmente seu pacote de configuração executando, em um projeto JavaScript:

npm install /Users/leonardo/path/to/eslint-config-test

Lembre-se de que as dependências do seu pacote de configuração também podem ser instaladas.

Se tudo estiver bem, você pode publicar no registro npm:

npm publish

Exemplo completo

Eu tenho um projeto funcional do GitHub mostrando a configuração deste post: eslint-config-leozera. Você também pode vê-lo abaixo:

Mais sobre isso

Também publicado em meu blog. Se você gosta deste conteúdo, siga-me no Twitter e GitHub. Foto da capa por Susan Holt Simpson / Unsplash