@pro-vision/eslint-config-pv

This package provides pro!vision's ESLint configuration as an extensible shared config.

Originally inspired by Airbnb

Rules mostly follow:

• eslint's js.configs.recommended
• typescript-eslint's strict-type-checked

Important

Since version 5.0.0, only the eslint's flat config file is supported, for older .eslintrc config files please use this package @v4.0.0.

Installation

npm install --save-dev @pro-vision/eslint-config-pv
# in addition, for Typescript linting
npm install --save-dev typescript-eslint typescript
# in addition, to use with Prettier
npm install --save-dev eslint-plugin-prettier eslint-config-prettier prettier

Usage

Create an eslint.config.mjs (or eslint.config.cjs) file with necessary presets and customized rules. For example:

// eslint.config.mjs

import pvESLintTS from "@pro-vision/eslint-config-pv/typescript";
import pvESLintPrettier from "@pro-vision/eslint-config-pv/prettier";

export default [
  ...pvESLintTS,
  ...pvESLintPrettier,

  // modify rules if needed
  {
    rules: {
      "no-console": "off",
      "@typescript-eslint/unbound-method": "off",
      "import/order": [
        "error",
        {
          "newlines-between": "always",
          pathGroups: [
            {
              pattern: "{Helper,Components}/**",
              group: "internal",
            },
          ],
          pathGroupsExcludedImportTypes: [],
          groups: ["builtin", "external", "internal", ["index", "sibling", "parent"]],
        },
      ],
    }
  },
]

In detail for specific use cases:

Javascript files

// eslint.config.mjs

import pvESLintJS from "@pro-vision/eslint-config-pv/javascript";

export default [
  ...pvESLintJS,
]

Modifying rules

// eslint.config.mjs

import pvESLintJS from "@pro-vision/eslint-config-pv/javascript";

export default [
  ...pvESLintJS,

+  {
+    rules: {
+      "no-console": "off",
+      "import/order": [
+        "error",
+        {
+          "newlines-between": "always",
+          pathGroups: [
+            {
+              pattern: "{Helper,Components}/**",
+              group: "internal",
+            },
+          ],
+          pathGroupsExcludedImportTypes: [],
+          groups: ["builtin", "external", "internal", ["index", "sibling", "parent"]],
+        },
+      ],
+    }
+  }
]

With prettier

If you haven't installed prettier as your dependency already, then do

npm install --save-dev prettier

and update the eslint.config.mjs file

// eslint.config.mjs

  import pvESLintJS from "@pro-vision/eslint-config-pv/javascript";
+ import pvESLintPrettier from "@pro-vision/eslint-config-pv/prettier";

export default [
    ...pvESLintJS,
+   ...pvESLintPrettier,

    {
      rules: {
        ...
      }
    }
]

This will run eslint with your prettier config in addition to the previous eslint rules and report any formatting issues / auto fix them. Any @pro-vision/eslint-config-pv formatting rule (e.g. @stylistic/max-len) will automatically be ignored in favor of prettier configuration.

For Typescript files

Make sure you have already installed typescript as your dependency:

npm install --save-dev typescript

and update the eslint.config.mjs file using eslint-config-pv/typescript Instead of eslint-config-pv/javascript (It already contains all the rules in the /javascript config).

// eslint.config.mjs

- import pvESLintJS from "@pro-vision/eslint-config-pv/javascript";
+ import pvESLintTS from "@pro-vision/eslint-config-pv/typescript";
  import pvESLintPrettier from "@pro-vision/eslint-config-pv/prettier";

export default [
-  ...pvESLintJS,
+  ...pvESLintTS,
   ...pvESLintPrettier,

    {
      rules: {
        ...
      }
    }
]

@pro-vision/eslint-config-pv/typescript assumes your tsconfig.json file is in the same directory as where you call eslint. i.e. your projects root directory. But you can also specify this with:

// eslint.config.mjs

export default [
  ...
+  {
+    languageOptions: {
+      parserOptions: {
+        project: "./my-tsconfig.json",
+        tsconfigRootDir: "my-configs/",
+      },
+    },
+  },
]

For .js and .ts files in the same project

eslint-config-pv/typescript rules will apply only to .ts and .tsx files, and the other rules (eslint-config-pv/javascript and eslint-config-pv/prettier) will apply to both. The only thing that you have make sure of is that any rule customization for @typescript-eslint that needs type information (see the list of rules), are only applied to .ts(x) files. i.e.:

...
  {
    rules: {
      "no-console": "off",
-     "@typescript-eslint/no-misused-promises": ["error", { checksVoidReturn: false }],
    }
  },
+ {
+   files: ["**/*.ts", "**/*.tsx"],
+   rules: {
+     "@typescript-eslint/no-misused-promises": ["error", { checksVoidReturn: false }],
+   }
+ }