@helloalfred/eslint-config

An ESLint shareable config for TypeScript app in HelloAlfred world split into backend, frontend and mobile presets

Usage

Install the shared configs and its peer dependencies (This is due to a known limitation in ESLint.)

# Install the shared config
yarn add --dev @helloalfred/eslint-config

# Install common peer dependencies
# If you use zsh, then wrap all of them in ""
yarn add --dev @typescript-eslint/eslint-plugin@^4.15.0 @typescript-eslint/parser@^4.14.2 eslint@^7.19.0 eslint-config-prettier@^7.2.0 eslint-plugin-import@^2.22.1 eslint-plugin-prettier@^3.3.1 prettier@^2.2.1

# Install the peer dependencies (frontend/mobile only)
yarn add --dev eslint-plugin-jest@^24.1.3 eslint-plugin-jsx-a11y@^6.4.1 eslint-plugin-react@^7.22.0 eslint-plugin-react-hooks@^4.2.0

# Install peer dependencies (mobile only)
yarn add --dev [email protected]

# Install the peer dependencies (backend only)
yarn add --dev @typescript-eslint/eslint-plugin@^4.15.0 @typescript-eslint/eslint-plugin-tslint@^4.15.0 tslint@^6.1.3

The shared config includes linting rules for:

• Mobile
• Frontend
• Backend

Now its time to create your .eslintrc.js file, for that you will need to create the file and extend @helloalfred/eslint-config/<backend|frontend|mobile>, below is an example for a frontend app. Since we are dealing with typescript projects, me need to specify parserOptions and point it to the projects tsconfig.json

// .eslintrc.js
module.exports = {
  extends: ['@helloalfred/eslint-config/frontend'],
  parserOptions: {
    project: ['./tsconfig.json'],
    sourceType: 'module',
    tsconfigRootDir: __dirname,
  },
};

Note: Please read some important instructions regarding the project option here.

There are some more parserOptions you may care about.