Repository files navigation

yarn add -D eslint-config-galex eslintnpm install --save-dev eslint-config-galex eslint

npm i --save-dev eslint-plugin-jest@27.2.0yarn add -D eslint-plugin-jest@27.2.0

npm i --save-dev eslint-plugin-react@7.32.2npm i --save-dev eslint-plugin-jsx-a11y@6.7.1npm i --save-dev eslint-plugin-import@2.27.5yarn add -D eslint-plugin-react@7.32.2yarn add -D eslint-plugin-jsx-a11y@6.7.1yarn add -D eslint-plugin-import@2.27.5

You profit automatically of automatic dependency and feature detection. Due to the nature of ESLint configs however this approach is significantly harder to customize.

// .eslintrc.jsmodule.exports={extends:'galex',};

This showcases the required setup to begin with customizing your config on an advanced level. Please check out theExamples section below for more details.

// .eslintrc.jsconst{ createConfig}=require('eslint-config-galex/dist/createConfig');module.exports=createConfig();

// .eslintrc.jsconst{ createConfig}=require('eslint-config-galex/dist/createConfig');module.exports=createConfig({incrementalAdoption:true,});

nodenode_modules/eslint-config-galex/dist/generateStandalone

// eslint-galex-settings.json (remove this comment as its invalid json){"incrementalAdoption":true}

// package.json"scripts":{// other scripts"postinstall":"node node_modules/eslint-config-galex/dist/generateStandalone"}

const{ createConfig}=require('eslint-config-galex/dist/createConfig');module.exports=createConfig({enableJavaScriptSpecificRulesInTypeScriptProject:true,});

const{ createConfig}=require('eslint-config-galex/dist/createConfig');const{ getDependencies}=require('eslint-config-galex/dist/getDependencies');const{  createTypeScriptOverride,}=require('eslint-config-galex/dist/overrides/typescript');constdependencies=getDependencies();constcustomTypescriptOverride=createTypeScriptOverride({  ...dependencies,rules:{// here goes anything that applies **exclusively** to typescript files based on the `files` glob pattern also exported from ../overrides/typescript'@typescript-eslint/explicit-module-boundary-types':'warn',// downgrading the default from "error" to "warn"},});module.exports=createConfig({overrides:[customTypescriptOverride],});

const{ createConfig}=require('eslint-config-galex/dist/createConfig');const{ getDependencies}=require('eslint-config-galex/dist/getDependencies');const{  createReactOverride,}=require('eslint-config-galex/dist/overrides/react');constdependencies=getDependencies();constcustomReactOverride=createReactOverride({  ...dependencies,rules:{'unicorn/no-abusive-eslint-disable':'off',},});module.exports=createConfig({overrides:[customReactOverride],});

const{ createConfig}=require('eslint-config-galex/dist/createConfig');const{ getDependencies}=require('eslint-config-galex/dist/getDependencies');const{  createReactOverride,}=require('eslint-config-galex/dist/overrides/react');constdependencies=getDependencies();constcustomReactOverride=createReactOverride({  ...dependencies,plugins:['my-fancy-plugin'],rules:{'plugin/foo':'warn','plugin/bar':'error','plugin/baz':'off',},});module.exports=createConfig({overrides:[customReactOverride],});

const{ getDependencies}=require('eslint-config-galex/dist/getDependencies');const{  files,  parser,  defaultSettings,}=require('eslint-config-galex/dist/overrides/react');constdependencies=getDependencies();constmyReactOverride={// using the internal react glob pattern  files,// using the internal default react parser  parser,// defining your custom rulesrules:{'react/react-in-jsx-scope':'warn',},// using the default settingssettings:defaultSettings,};module.exports={overrides:[myReactOverride],rules:{'no-await-in-loop':'warn',},};

Setting up ESLint can be easy.

Plug in someone's config or one of the many "industry standards" and be donewith it. Eventually you learn that some of those practices maybe aren't the bestidea. Too restrictive, treading into Prettier territory, conflicting with otherrules, too opinionated or even outdated, you name it. What to do?

You begin adding// eslint-disable-next-line rulename-here. It works, butlitters the code.

You begin disabling rules altogether. Maybe because you don't know better, orbecause the rule is actually bad for your situation. You begin to wonder.

You check npm and see there are2.8k+ (August 2020)4.1k+ (December 2021)eslint-plugin-* packagesout there. And even worse - 10k+eslint-config-* packages. Which to choose?You sort by popularity and see some familiar faces. Time to install!

A few hours into stitching all those popular linting rules together you noticesome rules collide, some rules are outdated, some expect others to be disabled,but only circumstantially. Enough!

"Now is the time to finally read through all rulesets and decide which I want!"you scream out loud,"it can't be that many!" - but find yourself finishing thefirst repo after 6 hours.

Setting up ESLintproperly wasn't that easy after all.

Couldn't this be easier?

• It's incrementally adoptable! Usually you pick a config at one point in time:when starting a fresh project, or at least early on. Migrating later on,especially when working in teams with lots of code movement, you'd run intomerging conflicts real quick.

  Good news: you can usecreateConfig({ incrementalAdoption: true }) todowngrade all errors to warnings, and disable all warnings!

  This allows you to introduce the config at an arbitrary point in time, whilestill profiting of it from minute one and still allows you to continue. Mosturgent issues won't break the build - the best of both worlds!

  Once you feel comfortable raising the reporting level, simply setincrementalAdoption to false or remove it from the arguments passed tocreateConfig.

• Integration tests for all cases.

• All internals, literally everything, is re-exported. Don't like somedecision? Rules too weak? Want to add custom rules? Everything is covered!

  This hopefully prevents the need of having to migrate between configs everyonce in a while which builds up frustration due to misconfiguration and theentire overhead related to that. Dependency injection, just for an eslintconfig!

• This config has aheavy focus on code quality, best practices andtries to omit opinions.

Everything is dynamically included based on yourpackage.json and when using TypeScript, yourtsconfig.json.Rules are selectively applied based on file name patterns.

All rules are commented and link to their docs.

• React
• Next.js
• Remix Run
• TypeScript
• Node.js
• jest
• jest-dom
• @testing-library
• prettier
• storybook & storybook/testing-library
• NestJS (with TypeScript)

All rulesets and overrides are created through functions accepting an objectmatching this schema:

interfaceProject{/**   * whether `jest` is present   */hasJest:boolean;/**   * whether `@testing-library/jest-dom` is present   */hasJestDom:boolean;/**   * whether `@types/node` is present   */hasNodeTypes:boolean;/**   * whether any `@testing-library/<environment>` is present   */hasTestingLibrary:boolean;/**   * whether `@nestjs/core` is present   */hasNest:boolean;storybook:{/**     * whether any `@storybook/` is present that is not `@storybook/testing-library`     */hasStorybook:boolean;/**     * whether `@storybook/testing-library` is present     */hasStorybookTestingLibrary:boolean;};typescript:{/**     * whether `typescript` is present     */hasTypeScript:boolean;/**     * the installed version     */version:string;/**     * your tsConfig; used to detect feature availability     */config?:object;};react:{/**     * whether any flavour of react is present     */hasReact:boolean;/**     * whether `next` is present     */isNext:boolean;/**     *  whether `@remix-run/react` is present     */isRemix:boolean;/**     * whether `preact` is present     * currently without effect     */isPreact:boolean;/**     * the installed version     */version:string;/**     * whether the project was bootstrapped with create-react-app     */isCreateReactApp:boolean;};/**   * your custom rules on top   */rules?:object;}

This list only mentions the exports most people will need. For an exhaustivelist, check out the source.

• const { createTypeScriptOverride } = require('eslint-config-galex/dist/overrides/typescript')
• const { createReactOverride } = require('eslint-config-galex/dist/overrides/react')
• const { createJestOverride } = require('eslint-config-galex/dist/overrides/jest')
• const { createStorybookOverride } = require('eslint-config-galex/dist/overrides/storybook')

Please note that the test override should always come last.

• const { createEslintCoreRules } = require('eslint-config-galex/dist/plugins/eslint-core')
• const { createImportRules } = require('eslint-config-galex/dist/plugins/import')
• const { createNextJsRules } = require('eslint-config-galex/dist/plugins/next')
• const { createPromiseRules } = require('eslint-config-galex/dist/plugins/promise')
• const { createSonarjsRules } = require('eslint-config-galex/dist/plugins/sonarjs')
• const { createUnicornRules } = require('eslint-config-galex/dist/plugins/unicorn')

const{ createConfig}=require('eslint-config-galex/dist/createConfig');const{  createTypeScriptOverride,}=require('eslint-config-galex/dist/overrides/typescript');constpackageJson=require('./package.json');// since `createTypeScriptOverride` is entirely configurable, we need to inform it about its environmentconsttsOverrideConfig={react:{hasReact:true,},rules:{'@typescript-eslint/ban-ts-comment':'off',},typescript:{hasTypeScript:true,// sync with package.json should you upgrade TSversion:packageJson.dependencies.typescript,},};// solely an override for TSconsttsOverride=createTypeScriptOverride(tsOverrideConfig);// pass it into createConfig as array as it will be merged with the other overridesmodule.exports=createConfig({overrides:[tsOverride]});

const{ createConfig}=require('eslint-config-galex/dist/createConfig');const{ getDependencies}=require('eslint-config-galex/dist/getDependencies');const{  createJestOverride,}=require('eslint-config-galex/dist/overrides/jest');/** * override to enable jest globals for `/testUtils` folder */constcustomJestLikeOverride=createJestOverride({  ...getDependencies(),files:['testUtils/*.ts?(x)'],});module.exports=createConfig({overrides:[customJestLikeOverride],});

This project follows semver.