JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 9
  • Score
    100M100P100Q44263F
  • License ISC

Definitive ESLint configuration for JavaScript or React or React Native, Airbnb Style Guide, Prettier, TypeScript, Unicorn and more

Package Exports

  • eslint-config-kiskadee
  • eslint-config-kiskadee/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (eslint-config-kiskadee) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Description

Utilizing ESLint, Prettier, and TypeScript together in your projects brings a powerful combination of benefits that enhance code quality, readability, and developer productivity. ESLint enforces best practices and catches potential errors early, while Prettier automatically formats your code for improved readability and consistency. TypeScript adds robust type-checking capabilities, further improving the reliability and maintainability of your codebase.

Having these tools pre-configured and easily integrated into your projects means you can focus on writing great code without worrying about the setup process. With this streamlined setup, your team will be able to work more efficiently and maintain a high standard of code quality across the entire project.

🗂️ Summary

Installation

First, let's install ESLint and Kiskadee:

  npm i -D eslint eslint-config-kiskadee

Kiskadee handles three levels of ESLint configuration for each type of project, be it JavaScript/Node, React or React Native. Each level represents a set of rules that can be applied to your project, allowing you to choose the level that best suits your needs:

  • Level 1 of Kiskadee provides a solid foundation that uses the recommended settings of each respective plugin for TypeScript, Airbnb's JavaScript Style Guide, and Prettier. This level is perfect for starting projects with the basics, allowing you to later configure rules to your liking and add other plugins.
  • Level 2 offers a more complete solution, adding the Unicorn plugin with over 100 rules, the Unused Imports plugin to remove unused imports, and the No Relative Import Paths plugin to enforce the use of absolute import paths. This level is ideal for projects that require more extensive rule coverage.
  • Level 3 focuses on adjusting existing rules to find the perfect middle ground between being overly strict or too lenient, promoting harmony and uniformity among the multiple plugins used in your project. This level is well-suited for projects that need a finely tuned and balanced set of rules.

In summary, level 1 uses only essential plugins, level 2 includes some additional plugins, and both adhere to the rules recommended by the creators. Level 3 has the same plugins as level 2 but with some modified rules.

With Kiskadee, configuring ESLint, Prettier, and TypeScript in your projects becomes a breeze, as it offers different levels of configuration to cater to your project's specific needs.

🔧 ESLint Setup for JavaScript / Node

📖 Essential JavaScript Rules - Level 1

Installation

  npm i -D eslint-config-airbnb-base eslint-plugin-import typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier eslint-plugin-prettier eslint-config-prettier eslint-plugin-vitest

Usage

Create a .eslintrc.js file (or equivalent) at the root of your project and extend kiskadee/node-level-1:

  module.exports = {
    extends: ['kiskadee/node-level-1'],
    rules: {
      // your rules
    },
  };

Note: As we use TypeScript by default at all levels, you should have a tsconfig.json file at the root of your project for the ESLint plugin for TypeScript to work properly. If you don't have a tsconfig.json file, you can create one with the tsc --init command or access the documentation for more details.

📖 Great JavaScript Rules - Level 2

Installation for JavaScript

After installing the dependencies for level 1, then install:

  npm i -D eslint-plugin-unicorn eslint-plugin-unused-imports eslint-plugin-no-relative-import-paths

Usage for JavaScript

    // .eslintrc.js
    module.exports = {
      extends: ['kiskadee/node-level-2'],
      rules: {
        // your rules
      },
    };

📖 Kiskadee JavaScript Rules - Level 3

  • 🔥 All items from level 2
  • 🚀 A selection of outstanding rules we've recommended, derived from existing plugins
    // .eslintrc.js
    module.exports = {
      extends: ['kiskadee/node-level-3'],
      rules: {
        // your rules
      },
    };

Don't hesitate to start a new issue with suggestions for new plugins or a specific configuration for any of the plugins we already have.

🔧 ESLint Setup for React

📖 Essential React Rules - Level 1

Installation for React

  npm i -D eslint-config-airbnb eslint-plugin-import typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier eslint-plugin-prettier eslint-config-prettier eslint-plugin-vitest eslint-plugin-testing-library

If you are using React Native, install this complementary dependency:

  npm i -D @react-native/eslint-plugin

Usage level 1 for React

Create a .eslintrc.js file (or equivalent) at the root of your project and extend kiskadee/react-level-1 (or kiskadee/react-native-level-1):

    // .eslintrc.js
    module.exports = {
      extends: ['kiskadee/react-level-1'], // ['kiskadee/react-native-level-1'] for React Native projects
      rules: {
        // your rules
      },
    };

Note: As we use TypeScript by default at all levels, you should have a tsconfig.json file at the root of your project for the ESLint plugin for TypeScript to work properly. If you don't have a tsconfig.json file, you can create one with the tsc --init command or access the documentation for more details.

📖 Great React Rules - Level 2

npm i -D eslint-plugin-unicorn eslint-plugin-unused-imports eslint-plugin-no-relative-import-paths

Usage level 2 for React

    // .eslintrc.js
    module.exports = {
      extends: ['kiskadee/react-level-2'], // ['kiskadee/react-native-level-2'] for React Native projects
      rules: {
        // your rules
      },
    };

📖 Kiskadee React Rules - Level 3

  • 🔥 All items from level 2
  • 🚀 A selection of outstanding rules we've recommended, derived from existing plugins

Usage level 3 for React

    // .eslintrc.js
    module.exports = {
      extends: ['kiskadee/react-level-3'], // ['kiskadee/react-native-level-3'] for React Native projects
      rules: {
        // your rules
      },
    };

Don't hesitate to start a new issue with suggestions for new plugins or a specific configuration for any of the plugins we already have.

.editorconfig

Though ESLint and Prettier are independent tools, each serving its own purpose, they share some common features with the editorconfig. While Prettier excels at standardizing code formatting aspects, primarily for JavaScript files, the significance of the .editorconfig file extends beyond specific programming languages. It helps maintain consistency in coding style and formatting across different development environments, including various IDEs, text editors, and operating systems.

Some examples of the capabilities offered by both Prettier and EditorConfig include:

  • Setting indentation style (spaces or tabs) and size.
  • Controlling end-of-line (EOL) characters (LF, CR, or CRLF).
  • Ensuring a newline is inserted at the end of a file.
  • Specifying whether to remove trailing whitespace.

By utilizing the .editorconfig file, developers can establish a consistent code style and formatting standard that remains uniform across different IDEs, text editors, and operating systems. This promotes collaboration and enhances code readability throughout the project.

Create a .editorconfig file in the project root with the following content:

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

For Windows Users: you may encounter problems when trying to change the line ending in Git. If this happens, try following these steps.

WebStorm

Go to Settings > Languages & Frameworks > JavaScript > Code Quality Tools > ESLint, check "Run eslint --fix on save", and if you use JavaScript files with the extensions .cjs or .mjs, add them to "Run for files".

webstormeslint.png