JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 7
  • Score
    100M100P100Q44316F
  • License AGPL-3.0-or-later

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 in your projects brings a powerful combination of benefits that enhance code quality, readability, and developer productivity.

To streamline this process, Kiskadee offers three levels of pre-configured ESLint settings for different types of projects, including Node, React, and 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 provides a solid foundation with 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 TypeScript 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.

🗂️ Summary

Requirements

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.

🔧 ESLint Setup for JavaScript / Node

📖 Essential JavaScript Rules - Level 1

Installation - JavaScript Level 1

In your terminal, run the command below to install the necessary dependencies:

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

Usage - JavaScript Level 1

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
    },
  };

📖 Great JavaScript Rules - Level 2

Installation - JavaScript Level 2

After installing the dependencies for level 1, then install:

  npm i -D eslint-plugin-unicorn eslint-plugin-unused-imports eslint-plugin-typescript-paths

Usage - JavaScript Level 2

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

    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

Installation for JavaScript - Level 3

Install the dependencies for level 2.

Usage - JavaScript Level 3

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

    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 - Level 1

  npm i -D eslint eslint-config-kiskadee eslint-config-airbnb eslint-plugin-import typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier eslint-plugin-prettier eslint-config-prettier vitest 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 - React Level 1

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):

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

📖 Great React Rules - Level 2

Installation - React for Level 2

npm i -D eslint-plugin-unicorn eslint-plugin-unused-imports eslint-plugin-typescript-paths

Usage - React Level 2

    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 - React Level 3

    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.

JSON

You can also use ESLint together with Prettier to keep your .json files aligned and in the correct format.

Here you can find:

  • Support for .json, .jsonc, and .json5 files
  • Prettier formatting for JSON
  • JSON Rules by JSONC plugin (eslint-plugin-jsonc)
  • Conflict resolution between JSONC and Prettier

Note: Originally, ESLint was not designed for JSON, which is why we need to configure WebStorm and VS Code to interpret .json files alongside ESLint.

Installation - JSON

npm i -D eslint-plugin-jsonc

Usage - JSON

Adicione kiskadee/json à propriedade extends do seu arquivo .eslintrc.js (or equivalent):

    module.exports = {
      extends: ['kiskadee/react-level-3', 'kiskadee/json'],
      rules: {
        // your rules
      },
    };

.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.

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
max_line_length = 80

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

WebStorm

ESLint

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, or if you have configured JSON support (.json, .json5, .jsonc), add them to "Run for files".

webstormeslint.png

EditorConfig

WebStorm has native support for .editorconfig.

VS Code

ESLint

Install the ESLint extension by Microsoft, which will allow us to run ESLint on save. Then, in your settings.json file, add the following configuration:

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

JSON

If you are using the JSON plugin, you need to specify the file extension type in your settings.json file:

{
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact", "json", "jsonc", "json5"]
}

VS Code doesn't support .json5 files, but it does support .jsonc. If your .json5 file appears in a single color, indicating that the editor doesn't recognize the format, you can simply use the Ctrl/Cmd + Shift + P shortcut and type "Change Language Mode" or click on "Plain Text" (Language Mode) at the bottom right of VS Code and search for "JSON with Comments". This way, we make VS Code treat .json5 files as if they were .jsonc files.

EditorConfig

For .editorconfig support, just install the EditorConfig for VS Code extension.

Patch Notes

Version 1.0.0

  • Added setup for JSON files
  • Replaced eslint-plugin-no-relative-import-paths with eslint-plugin-typescript-paths
  • Reviewed and updated documentation

Breaking changes (0.0.42 => 1.0.0)

  • Remove eslint-plugin-no-relative-import-paths. Please install eslint-plugin-typescript-paths if you are using any level 2 setup.