@ckbab/eslint-config NPM

eslint-config

Installation

First install the package:

yarn add @ckbab/eslint-config -D

Then install all peer dependencies eslint-config uses:

npx install-peerdeps @ckbab/eslint-config --dev

For ReactJS projects also install:

yarn add eslint-plugin-hooks eslint-plugin-react eslint-plugin-react-hooks -D

For NextJS projects also install:

yarn add eslint-config-next eslint-plugin-hooks eslint-plugin-react eslint-plugin-react-hooks -D

For React Native projects also install:

yarn add eslint-plugin-react-native eslint-plugin-hooks eslint-plugin-react eslint-plugin-react-hooks -D

Usage

Use the config by adding .eslintrc.json to the root folder:

{
  // For ReactJS projects:
  "extends": "@ckbab/eslint-config/web"
  // For NextJS projects:
  "extends": "@ckbab/eslint-config/next"
  // For NodeJS projects:
  "extends": "@ckbab/eslint-config/node"
  // For React Native projects:
  "extends": "@ckbab/eslint-config/native"
}

Configure Babel

Configure Babel depending on your project.

First install the following:

// For ReactJS/NextJS projects:
yarn add @babel/preset-react -D
// For NodeJS projects:
yarn add @babel/preset-env -D
// For React Native projects:
yarn add babel-preset-expo -D
yarn add react-native-reanimated

Then for ReactJS/NextJS/NodeJS projects add .babelrc.json to the root folder:

{
  // For ReactJS projects:
  "presets": ["@babel/preset-react"]
  // For NextJS projects:
  "presets": ["@babel/preset-react", "next/babel"]
  // For NodeJS projects:
  "presets": ["@babel/preset-env"]
}

For React Native projects, instead of a .babelrc.json file, add babel.config.js to root folder:

module.exports = {
  presets: ["babel-preset-expo"],
  plugins: ["react-native-reanimated/plugin"],
};

Format files

Make sure your package.json contains the following scripts:

{
  "format": "npx prettier . --write && npx eslint . --fix"
}

Then run npm run format in your project's root folder.

Auto format in VS Code

First install the extensions: ESLint, Prettier and Format Code Action.

Then open settings.json and add/edit the following properties:

{
  "editor.formatOnSave": false,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": ["source.formatDocument", "source.fixAll.eslint"]
}

Now your code should be automatically formatted when saving the file.