eslint-config-superop

Eslint Config Super Opinionated

Clean Eslint config with Prettier, TypeScript, and absolute imports.

🚩 Table of Contents

• 🚩 Table of Contents
• 🚀 Introduction
• 🎨 Features
• 🔧 Installation
• 📖 Usage
• 💬 Contributing
• ❤️ Acknowledgments

🚀 Introduction

This is a Eslint Shareable Config that comes pre-configured with tons of stuff.

🎨 Features

• JavaScript
• TypeScript
• Node
• React
• React Native
• Jest
• JSON files
• Directory aliases using babel-plugin-module-resolver with linting from eslint-import-resolver-babel-module

🔧 Installation

Install eslint-config-superop and necessary dependencies:

npx install-peerdeps --yarn --dev eslint-config-superop
# or
npx install-peerdeps --dev eslint-config-superop

📖 Usage

Shareable configs are designed to work with the extends feature of .eslintrc files. You can learn more about Shareable Configs on the official ESLint website.

Add the base config to your .eslintrc file:

{
  "extends": [
    "superop"
  ]
}

Usage with TypeScript

1. Install dependencies:

yarn add --dev @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-import-resolver-typescript

1. Update your .eslintrc file:

{
  "extends": [
    "superop",
    "superop/typescript",
  ]
}

Usage with React

1. Install dependencies:

yarn add --dev eslint-plugin-react eslint-plugin-react-hooks

1. Update your .eslintrc file:

{
  "extends": [
    "superop",
    // "superop/typescript", // Uncomment if using TypeScript, and install deps for it
    "superop/react",
    "superop/react-new-jsx", // If using the new JSX transform
  ]
}

Usage with React Native

1. Install dependencies:

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

1. Update your .eslintrc file:

{
  "extends": [
    "superop",
    // "superop/typescript", // Uncomment if using TypeScript, and install deps for it
    "superop/react",
    // "superop/react-new-jsx", // Uncomment if using the new JSX transform
    "superop/react-native",
  ]
}

Usage with directory alises (absolute import) for Babel

1. Install babel-plugin-module-resolver and configure babel

2. Install dependencies:

yarn add --dev eslint-import-resolver-babel-module

1. Update your .eslintrc file:

{
  "extends": [
    "superop",
    "superop/import-resolver-babel",
    // "superop/typescript", // Uncomment if using TypeScript
    // "superop/react",  // Uncomment if using React
    // "superop/react-new-jsx", // Uncomment if using the new JSX transform
    // "superop/react-native",  // Uncomment if using React Native
  ]
}

Usage with Jest

1. Install dependencies:

yarn add --dev eslint-plugin-jest

1. Update your .eslintrc file:

{
  "extends": [
    "superop",
    // "superop/import-resolver-babel", // Uncomment if using directory alises
    // "superop/typescript", // Uncomment if using TypeScript
    // "superop/react",  // Uncomment if using React
    // "superop/react-new-jsx", // Uncomment if using the new JSX transform
    // "superop/react-native",  // Uncomment if using React Native
    "superop/jest",
    "superop/react-jest" // Uncommnet if using React
  ]
}

Usage with Prettier

This is all you need on your .prettierrc file:

"eslint-config-superop/.prettierrc.js"

ESLint and Prettier both support ignore files, but they do not have an extend feature so you should copy and paste the following files inside your project folder:

• .eslintignore
• .prettierignore

Copy ignores to current folder:

cp -r node_modules/eslint-config-superop/.eslintignore .
cp -r node_modules/eslint-config-superop/.prettierignore .

Usage with EditorConfig

This package also goes well with EditorConfig, just copy and paste .editorconfig inside your project folder.

Copy EditorConfig to current folder:

cp -r node_modules/eslint-config-superop/.editorconfig .

Lint scripts

You might want to copy and paste the following scripts from our package.json:

• eslint
• prettier
• lint
• lint-fix

Working with VS Code

To fix your files make sure you have the VS Code ESLint extension installed.

Add a .vscode folder at the root of your project with this settings.json file.

The important parts are:

  "[javascript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[typescript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },

💬 Contributing

Would like to help make this package better? Please take a look at the contributing guidelines for a detailed explanation on how you can contribute.

❤️ Acknowledgments

I'd like thank my daily coffee!