Version 2: Add stylistic Eslint

eslint.config.js

@@ -1,30 +1,59 @@
 import eslint from "@eslint/js";
 import tseslint from "typescript-eslint";
 import eslintConfigPrettier from "eslint-config-prettier";
+import stylisticJs from "@stylistic/eslint-plugin-js";
+import importPlugin from "eslint-plugin-import-x";
 
 export default tseslint.config(
   eslint.configs.recommended,
   ...tseslint.configs.recommended,
-  eslintConfigPrettier,
   {
     files: ["src/**/*.ts", "src/**/*.tsx"],
     ignores: ["src/**/*.d.ts"],
+    plugins: {
+      "@stylistic/js": stylisticJs,
+      import: importPlugin,
+    },
     rules: {
-      "@typescript-eslint/semi": 1,
       "no-param-reassign": ["error", { props: false }],
-      "brace-style": ["error", "1tbs", { allowSingleLine: true }],
       "operator-assignment": ["error", "always"],
       "no-empty": 2,
       "no-multi-assign": 2,
-      "spaced-comment": ["warn", "always", { exceptions: ["*"] }],
       "no-var": 2,
-      "@typescript-eslint/keyword-spacing": 2,
+      "spaced-comment": ["warn", "always", { exceptions: ["*"] }],
       "no-fallthrough": 2,
-      "@typescript-eslint/no-unused-vars": 1,
-      quotes: ["error", "double"],
       "arrow-body-style": ["error", "as-needed"],
-      "eol-last": ["warn", "always"],
-      "no-multiple-empty-lines": ["error", { max: 1, maxBOF: 0, maxEOF: 0 }],
+
+      "@stylistic/js/eol-last": ["warn", "always"],
+      "@stylistic/js/no-multiple-empty-lines": [
+        "error",
+        { max: 1, maxBOF: 0, maxEOF: 0 },
+      ],
+      "@stylistic/js/keyword-spacing": 2,
+      "@stylistic/js/quotes": ["error", "double"],
+      "@stylistic/js/quote-props": ["error", "as-needed"],
+      "@stylistic/js/semi": 1,
+      "@stylistic/js/semi-style": ["error", "last"],
+      "@stylistic/js/brace-style": ["error", "1tbs", { allowSingleLine: true }],
+      "@stylistic/js/arrow-parens": ["error", "always"],
+      "@stylistic/js/object-curly-spacing": ["error", "always"],
+      "@stylistic/js/comma-style": ["error", "last"],
+
+      "@stylistic/js/jsx-quotes": ["error", "prefer-double"],
+
+      "@typescript-eslint/no-unused-vars": ["warn", { caughtErrors: "none" }],
+      "@typescript-eslint/no-unused-expressions": [
+        "error",
+        { allowShortCircuit: true, allowTernary: true },
+      ],
+
+      "import/order": [
+        "error",
+        {
+          groups: ["builtin", "external", "internal"],
+        },
+      ],
     },
-  }
+  },
+  eslintConfigPrettier
 );

package.json

@@ -18,6 +18,7 @@
     "@storybook/react": "^8.2.9",
     "@storybook/react-vite": "^8.2.9",
     "@storybook/test": "^8.2.9",
+    "@stylistic/eslint-plugin-js": "^2.6.2",
     "@testing-library/react": "^16.0.0",
     "@types/react": "^18.3.4",
     "@types/react-dom": "^18.3.0",
@@ -26,14 +27,15 @@
     "autoprefixer": "^10.4.20",
     "eslint": "^9.9.1",
     "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import-x": "^3.1.0",
     "gh-pages": "^6.1.1",
     "jsdom": "^25.0.0",
     "postcss": "^8.4.41",
     "prettier": "^3.3.3",
     "sass": "^1.77.8",
     "storybook": "^8.2.9",
     "typescript": "^5.5.4",
-    "typescript-eslint": "^7.18.0",
+    "typescript-eslint": "^8.0.1",
     "vite": "^5.4.2",
     "vite-plugin-svgr": "^4.2.0",
     "vite-tsconfig-paths": "^5.0.1",

src/components/app-fallback/AppFallback.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { AppFallback } from "./AppFallback";
 import { fn } from "@storybook/test";
+import { AppFallback } from "./AppFallback";
 
 const meta: Meta<typeof AppFallback> = {
   title: "Components/AppFallback",

src/components/certificate-algorithm-info/CertificateAlgorithmInfo.stories.tsx

@@ -1,9 +1,9 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { CertificateAlgorithmInfo } from "./CertificateAlgorithmInfo";
 import {
   EHashAlgorithm,
   ESignatureAlgorithm,
 } from "@peculiar/fortify-client-core";
+import { CertificateAlgorithmInfo } from "./CertificateAlgorithmInfo";
 
 const meta: Meta<typeof CertificateAlgorithmInfo> = {
   title: "Components/CertificateAlgorithmInfo",

src/components/certificate-create-by-cname/CertificateCreateByCname.tsx

@@ -1,13 +1,13 @@
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Button, TextField } from "@peculiar/react-components";
-import { CertificateAlgorithmInfo } from "../certificate-algorithm-info";
-import { Card } from "../card";
 import {
   EHashAlgorithm,
   ESignatureAlgorithm,
 } from "@peculiar/fortify-client-core";
 import { CertificateAlgorithmProps, CertificateType } from "../../types";
+import { CertificateAlgorithmInfo } from "../certificate-algorithm-info";
+import { Card } from "../card";
 
 import styles from "./styles/index.module.scss";
 

src/components/certificate-create-by-custom/CertificateCreateByCustom.tsx

@@ -1,20 +1,20 @@
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { ExtendedKeyUsageType } from "@peculiar/x509";
-import {
-  CertificateAlgorithmProps,
-  CertificateSubjectProps,
-  CertificateType,
-} from "../../types";
 import {
   Autocomplete,
   Button,
   TextField,
   Typography,
 } from "@peculiar/react-components";
+import { ExtendedKeyUsageType } from "@peculiar/x509";
 import { CertificateKeyPropertiesSelect } from "../certificate-key-properties-select";
 import { Card } from "../card";
 import { KeyUsagesCheckboxGroup } from "../key-usages-checkbox-group";
+import {
+  CertificateAlgorithmProps,
+  CertificateSubjectProps,
+  CertificateType,
+} from "../../types";
 
 import { countries } from "../../config/data";
 

src/components/certificate-create-by-email/CertificateCreateByEmail.tsx

@@ -1,12 +1,12 @@
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Button, TextField } from "@peculiar/react-components";
-import { CertificateAlgorithmInfo } from "../certificate-algorithm-info";
-import { Card } from "../card";
 import {
   EHashAlgorithm,
   ESignatureAlgorithm,
 } from "@peculiar/fortify-client-core";
+import { CertificateAlgorithmInfo } from "../certificate-algorithm-info";
+import { Card } from "../card";
 import { CertificateAlgorithmProps, CertificateType } from "../../types";
 
 import styles from "./styles/index.module.scss";

src/components/certificate-create-dialog/CertificateCreateDialog.tsx

@@ -2,10 +2,6 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import { IProviderInfo } from "@peculiar/fortify-client-core";
 import clsx from "clsx";
-import {
-  CertificateTypeSelect,
-  ICertificateTypeSelectValue,
-} from "../certificate-type-select";
 import {
   Dialog,
   ArrowRightIcon,
@@ -27,6 +23,10 @@ import {
   ICertificateCreateByCustomData,
 } from "../certificate-create-by-custom";
 import { CertificatesProvidersSelectList } from "../certificates-providers-select-list";
+import {
+  CertificateTypeSelect,
+  ICertificateTypeSelectValue,
+} from "../certificate-type-select";
 import { CertificateType } from "../../types";
 
 import styles from "./styles/index.module.scss";

src/components/certificates-list/CertificatesList.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { CertificatesList } from "./CertificatesList";
 import { faker } from "@faker-js/faker";
+import { CertificatesList } from "./CertificatesList";
 
 const meta: Meta<typeof CertificatesList> = {
   title: "Components/CertificatesList",

src/components/certificates-providers-list/CertificatesProvidersList.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import { IProviderInfo } from "@peculiar/fortify-client-core";
 import { useTranslation } from "react-i18next";
+import { Skeleton, Typography } from "@peculiar/react-components";
 import { CertificatesProvidersListItem } from "../certificates-providers-list-item";
 import AttentionCircleIcon from "../../icons/attention-circle.svg?react";
-import { Skeleton, Typography } from "@peculiar/react-components";
 import styles from "./styles/index.module.scss";
 
 interface CertificatesProvidersListProps {

src/components/date/Date.tsx

@@ -1,8 +1,8 @@
 import { Typography } from "@peculiar/react-components";
 import React, { ComponentProps } from "react";
 import { useTranslation } from "react-i18next";
-import styles from "./styles/index.module.scss";
 import clsx from "clsx";
+import styles from "./styles/index.module.scss";
 
 interface DateProps {
   date?: Date;