Table of Contents

Introduction Implementation inside a project

Recommendations for React Adjustments for React

Introduction

This is the eslint-plugin-harro for the corresponding harro clean code guidelines defined here.

Implementation inside a project

1. Run :pushpin: :keyboard: npm init @eslint/config@latest and follow the steps. You can also check Getting Started.
2. This should create a eslint.config.mjs.
3. Currently it is necessary to change the eslint version inside your package.json to "eslint": "^8.57.0". After that you need to run :pushpin: :keyboard: npm install
4. Then you can install the eslint-plugin-harro via the npm install command :pushpin: :keyboard: npm i eslint-plugin-harro. You can also check the npm package here.
5. Inside the created eslint.config.mjs add the following code. :computer:

import plugin from "eslint-plugin-harro";

const eslintConfig = [
  plugin.configs.harroBestPractices,
  {
    languageOptions: {
      sourceType: "module",
      ecmaVersion: "latest",
    },
  },
  plugin.configs.harroGuidelines,
  {
    languageOptions: {
      sourceType: "module",
      ecmaVersion: "latest",
    },
  },
];

export default eslintConfig;

6. To execute the eslint.config.mjs you can either navigate via the terminal into the directory or folder with the files you want to test or specify a single file.
7. To test all files inside a folder or directory, navigate into the folder or directory of your project and run :pushpin: :keyboard: npx eslint .
8. To just test a single file navigate into the folder or directory of your project, where the file is located and run :pushpin: :keyboard: npx eslint ./yourFileName.js
9. For more information visit ESLint or check our own documentation here

Recommendations for React

Optional For React projects it is recommended, to import the eslint-plugin-react

import pluginReactConfig from "eslint-plugin-react/configs/recommended.js";
...

const eslintConfig = [
  {
    ...
  }
  ...
  pluginReactConfig,
  {
    settings: {
      react: {
        version: "detect",
      },
    },
    languageOptions: {
      parserOptions: {
        ecmaFeatures: {
          jsx: true,
        },
      },
      sourceType: "module",
      ecmaVersion: "latest",
    },
    // To ignore unnecessary rules add
    rules: {
      "react/no-unescaped-entities": "off",
      "react/prop-types": "off",
    },
  },
];

...

Adjustments for React

If you use the eslint-plugin-harro for an React project, it is necessary to change the eslint version inside your package.json to "eslint": "^8.57.0". After that you need to run :pushpin: :keyboard: npm install