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:

🗂️ Summary

• Requirements
• Kiskadee Setups:
  • JavaScript Level 1 - Essential rules
  • JavaScript Level 2 - Great rules
  • JavaScript Level 3 - Kiskadee rules
  • React Level 1 - Essential rules
  • React Level 2 - Great rules
  • React Level 3 - Kiskadee rules
  • JSON
• Bonus Setup:
  • EditorConfig
• IDE/Editor Setup:
  • WebStorm
  • VS Code
• Patch Notes

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.

It is also necessary to have version 8 of eslint, as version 9 will adopt a different file pattern. Many plugins have not yet migrated to this new pattern, so this is not a concern for now. It is also essential to have version 6 of @typescript-eslint/eslint-plugin, as there have been breaking changes compared to version 5.

JavaScript - Level 1

Level 1 provides a solid foundation with the recommended settings of each respective plugin for TypeScrip,

• 🧰 Airbnb: JavaScript Style Guide
  • JavaScript Plugin (eslint-config-airbnb-base)
  • Import Plugin (eslint-plugin-import)
• 🧰 TypeScript Support
  • TypeScript Plugin (typescript, @typescript-eslint)
  • Fixed conflicts among different rules (eslint-config-kiskadee, eslint-import-resolver-typescript)
• 🧰 Prettier Support
  • Prettier Plugin (prettier, eslint-plugin-prettier)
  • Fixed conflicts among different rules (eslint-config-prettier)
• 🧰 Testing Support
  • Vitest Plugin (vitest eslint-plugin-vitest)

Installation

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 eslint-import-resolver-typescript prettier eslint-plugin-prettier eslint-config-prettier vitest 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']
  };

JavaScript - Level 2

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.

• 🔥 All items from level 1
• 🧰 Unicorn Plugin (eslint-plugin-unicorn)
  • More than 100 powerful ESLint rules
• 🧰 Unused Imports Plugin (eslint-plugin-unused-imports)
  • Finds and removes unused ES6 module imports
• 🧰 TypeScript Paths Plugin (eslint-plugin-typescript-paths)
  • Enforces the use of absolute import and export paths
• 🧰 JSDoc Plugin (eslint-plugin-jsdoc)
  • JSDoc linting rules for ESLint

Installation

In your terminal, to install all dependencies, execute:

  npm i -D eslint eslint-config-kiskadee eslint-config-airbnb-base eslint-plugin-import typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-import-resolver-typescript prettier eslint-plugin-prettier eslint-config-prettier vitest eslint-plugin-vitest eslint-plugin-unicorn eslint-plugin-unused-imports eslint-plugin-typescript-paths eslint-plugin-jsdoc

Or if you have already installed the level 1 dependencies, execute:

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

✧ Usage

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']
    };

📖 Kiskadee JavaScript Rules - Level 3

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.

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

Installation

Install the dependencies for level 2.

Usage

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']
    };

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

• 🧰 Airbnb: React Style Guide
  • React and JavaScript Plugin (eslint-config-airbnb)
  • React Plugin (eslint-plugin-react)
  • React Hooks Plugin (eslint-plugin-react-hooks)
  • Import Plugin (eslint-plugin-import)
  • JSX Accessibility Plugin (eslint-plugin-jsx-a11y)
• 🧰 TypeScript Support
  • TypeScript Plugin (typescript, @typescript-eslint)
  • Fixed conflicts among different rules (eslint-config-kiskadee, eslint-import-resolver-typescript)
• 🧰 Prettier Support
  • Prettier Plugin (prettier, eslint-plugin-prettier)
  • Fixed conflicts among different rules (eslint-config-prettier)
• 🧰 Testing Support
  • Vitest Plugin (vitest, eslint-plugin-vitest)
  • Testing Library (eslint-plugin-testing-library)

✧ Installation

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

  npm i -D eslint eslint-config-kiskadee eslint-config-airbnb eslint-plugin-import typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-import-resolver-typescript 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

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

📖 Great React Rules - Level 2

• 🔥 All items from level 1
• 🧰 Unicorn Plugin (eslint-plugin-unicorn)
  • More than 100 powerful ESLint rules
• 🧰 Unused Imports Plugin (eslint-plugin-unused-imports)
  • Finds and removes unused ES6 module imports
• 🧰 TypeScript Paths Plugin (eslint-plugin-typescript-paths)
  • Enforces the use of absolute import and export paths
• 🧰 JSDoc Plugin (eslint-plugin-jsdoc)
  • JSDoc linting rules for ESLint
• 🧰 React Refresh Plugin (eslint-plugin-react-refresh)
  • Validate that your components can safely be updated with fast refresh

✧ Installation

In your terminal, to install all dependencies, execute:

  npm i -D eslint eslint-config-kiskadee eslint-config-airbnb eslint-plugin-import typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-import-resolver-typescript prettier eslint-plugin-prettier eslint-config-prettier vitest eslint-plugin-vitest eslint-plugin-testing-library eslint-plugin-unicorn eslint-plugin-unused-imports eslint-plugin-typescript-paths eslint-plugin-jsdoc eslint-plugin-react-refresh

Or if you have already installed the level 1 dependencies, execute:

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

✧ Usage

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

📖 Kiskadee React Rules - Level 3

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

Installation

Install the dependencies for level 2.

✧ Usage

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

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

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.

TSConfig

...

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

npm i -D eslint-plugin-jsonc

✧ Usage

Add kiskadee/json to the extends property in your .eslintrc.js file (or equivalent):

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

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

✧ 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 3.0.0

• Updated dependencies to latest versions
• Added new plugin eslint-plugin-jsdoc to level 2 config
• Reviewed and updated documentation
• Rules changed for config level 3:
  • no-void: error to ['error', { allowAsStatement: true }]
  • @typescript-eslint/explicit-function-return-type: error to off

Breaking changes (2.0.0 => 3.0.0)

• Install eslint-plugin-jsdoc if you are using any level 2 setup.

Version 2.0.0

• Updated dependencies to latest versions
• Added new plugin eslint-plugin-react-refresh to level 2 config
• Reviewed and updated documentation

Breaking changes (1.0.0 => 2.0.0)

• Update @typescript-eslint/eslint-plugin and @typescript-eslint/parser to ^6.0.0 versions
• For level 2 config, install eslint-plugin-react-refresh.

Version 1.0.0

• Added config 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.