423-fix: Add ESLint rules for formatting import-export long strings (#…

…424)

* feat: add rules & plugin for import

* fix: autofix eslint issues

* fix: eslint config & fix eslint issues

* fix: line length

* fix: 423 - change VS code - ESLint settings

.vscode/settings.json

@@ -2,5 +2,5 @@
   "editor.codeActionsOnSave": {
     "source.fixAll": "explicit"
   },
-  "eslint.experimental.useFlatConfig": true
+  "eslint.useFlatConfig": true
 }

eslint.config.js

@@ -5,6 +5,7 @@ import tsPlugin from '@typescript-eslint/eslint-plugin';
 import tsParser from '@typescript-eslint/parser';
 import cssImportOrder from 'eslint-plugin-css-import-order';
 import importPlugin from 'eslint-plugin-import';
+import importNewlines from 'eslint-plugin-import-newlines';
 import reactPlugin from 'eslint-plugin-react';
 import reactHooksPlugin from 'eslint-plugin-react-hooks';
 import reactRefresh from 'eslint-plugin-react-refresh';
@@ -64,6 +65,7 @@ export default [
       'vitest': vitestPlugin,
       'css-import-order': cssImportOrder,
       'sort-exports': sortExports,
+      'import-newlines': importNewlines,
       '@stylistic': stylistic,
     },
     settings: {
@@ -87,6 +89,7 @@ export default [
 
       'boundaries/element-types': 'warn',
       'no-undef': 'off',
+      'curly': 'error',
       'no-restricted-exports': [
         'warn',
         { 'restrictDefaultExports':
@@ -106,6 +109,15 @@ export default [
         { allowConstantExport: true },
       ],
 
+      'import-newlines/enforce': [
+        'error',
+        {
+          'items': 5,
+          'max-len': 100,
+          'semi': true,
+        },
+      ],
+
       'import/prefer-default-export': 'off',
       'import/no-default-export': 'error',
       'import/no-unresolved': ['error', { commonjs: true, amd: true }],
@@ -246,13 +258,13 @@ export default [
       '@stylistic/max-len': [
         'error',
         {
-          'code': 120,
+          'code': 100,
           'tabWidth': 2,
-          'comments': 120,
-          'ignoreTrailingComments': true,
+          'ignoreComments': true,
           'ignoreUrls': true,
           'ignoreStrings': true,
           'ignoreTemplateLiterals': true,
+          "ignoreRegExpLiterals": true,
         },
       ],
     },

package.json

@@ -10,6 +10,7 @@
     "stylelint": "npx stylelint \"**/*.scss\"",
     "stylelint:fix": "npx stylelint \"**/*.scss\" --fix",
     "lint": "npx eslint . --report-unused-disable-directives --max-warnings 400",
+    "lint:err": "npx eslint . --quiet",
     "lint:fix": "npx eslint . --fix --report-unused-disable-directives --max-warnings 400",
     "preview": "vite preview",
     "test": "vitest --run",
@@ -53,6 +54,7 @@
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-css-import-order": "^1.1.0",
     "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-import-newlines": "^1.4.0",
     "eslint-plugin-react": "^7.34.3",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.7",

src/app/layouts/base-layout/components/scroll-to-hash/scroll-to-hash.test.tsx

@@ -1,8 +1,6 @@
 import { render, waitFor } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
-import {
-  beforeEach, describe, expect, it, vi,
-} from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { ScrollToHashElement } from './scroll-to-hash';
 import { ROUTES } from '@/app/const';
 

src/app/services/api/index.ts

@@ -1,4 +1,11 @@
-import { angularPath, awsDevPath, courses, coursesPath, jsPath, jsPathRu } from '../data';
+import {
+  angularPath,
+  awsDevPath,
+  courses,
+  coursesPath,
+  jsPath,
+  jsPathRu,
+} from '../data';
 import { type DataMap } from '../data';
 
 const dataProviders: DataMap = {

src/shared/hooks/use-data-by-name/use-data-by-name.ts

@@ -18,7 +18,9 @@ export const useDataByName = <K extends keyof DataMap>(
 
         setData(fetchedData as DataMap[K]);
       } catch (error) {
-        if (error instanceof Error) setError(error);
+        if (error instanceof Error) {
+          setError(error);
+        }
       } finally {
         setLoading(false);
       }

src/shared/hooks/use-title/use-title.test.tsx

@@ -25,7 +25,8 @@ describe('useTitle', () => {
 
     document.title = originalTitle;
 
-    const { rerender, unmount } = renderHook((title) => useTitle(title), { initialProps: newTitle });
+    const { rerender, unmount } = renderHook((title) =>
+      useTitle(title), { initialProps: newTitle });
 
     expect(document.title).toBe(newTitle);
 

src/shared/ui/image/utils/convertToWebp.ts

@@ -6,8 +6,9 @@ const convertToWebp = (src: string) => {
     || srcLowCase.includes('base64')
     || srcLowCase.endsWith('.svg')
     || srcLowCase.endsWith('.webp')
-  )
+  ) {
     return src;
+  }
   return `${src.slice(0, src.lastIndexOf('.'))}.webp`;
 };
 

src/shared/ui/widget-title/widget-title.tsx

@@ -4,7 +4,8 @@ import classNames from 'classnames/bind';
 
 import styles from './widget-title.module.scss';
 
-type WidgetTitleProps = HTMLAttributes<HTMLHeadingElement> & VariantProps<typeof widgetTitleVariants>;
+type WidgetTitleProps = HTMLAttributes<HTMLHeadingElement>
+  & VariantProps<typeof widgetTitleVariants>;
 
 export const cx = classNames.bind(styles);
 

src/widgets/about/about.data.ts

@@ -46,10 +46,12 @@ const angularNodejsAwsFundamentals: (course: string) => AboutInfo[] = () => [
 ];
 
 const awsCloudDeveloper: AboutInfo[] = angularNodejsAwsFundamentals('aws cloud dev').map((item) => {
-  if (item.id === 3) return {
-    ...item,
-    info: 'Duration: 10 weeks.',
-  };
+  if (item.id === 3) {
+    return {
+      ...item,
+      info: 'Duration: 10 weeks.',
+    };
+  }
   return item;
 });
 

src/widgets/community/ui/community.tsx

@@ -1,5 +1,11 @@
 import image from '@/shared/assets/welcome.webp';
-import { FacebookIcon, InstagramIcon, LinkedInIcon, TelegramIcon, YouTubeIcon } from '@/shared/icons';
+import {
+  FacebookIcon,
+  InstagramIcon,
+  LinkedInIcon,
+  TelegramIcon,
+  YouTubeIcon,
+} from '@/shared/icons';
 import Image from '@/shared/ui/image';
 import { SocialMedia, SocialMediaProps } from '@/shared/ui/social-media';
 import { Subtitle } from '@/shared/ui/subtitle';

src/widgets/courses-school/courses.test.tsx

@@ -1,5 +1,12 @@
 import { screen } from '@testing-library/react';
-import { Mock, beforeEach, describe, expect, it, vi } from 'vitest';
+import {
+  Mock,
+  beforeEach,
+  describe,
+  expect,
+  it,
+  vi,
+} from 'vitest';
 import { Courses } from './ui/courses';
 import { ROUTES } from '@/app/const';
 

src/widgets/courses/ui/courses.tsx

@@ -11,9 +11,15 @@ import './courses.scss';
 export const Courses = () => {
   const { data: courses, loading, error } = useDataByName('courses');
 
-  if (loading) return <h2>Loading...</h2>;
-  if (error) return <h2>{error.message}</h2>;
-  if (!courses || courses.length === 0) return null;
+  if (loading) {
+    return <h2>Loading...</h2>;
+  }
+  if (error) {
+    return <h2>{error.message}</h2>;
+  }
+  if (!courses || courses.length === 0) {
+    return null;
+  }
 
   const sortParams = {
     dataList: courses.filter(isCourse),

src/widgets/requirements/ui/requirements.tsx

@@ -13,8 +13,8 @@ export const Requirements = () => {
             <div className="title">Requirements for mentors</div>
             <ul className="description">
               <li>
-                Desire to help students. If you&apos;ve been working with JS/TS in production for more
-                than 6 months, then that&apos;s great.
+                Desire to help students. If you&apos;ve been working with JS/TS
+                in production for more than 6 months, then that&apos;s great.
               </li>
               <li>Desire to mentor 2 to 6 students online or in person</li>
               <li>Ability to spend 3 to 5 hours per week</li>

src/widgets/study-path/ui/stages/stages.tsx

@@ -8,7 +8,9 @@ export interface StagesProps {
 }
 
 export const Stages = ({ stages, marked }: StagesProps) => {
-  if (stages === null || stages.length === 0) return null;
+  if (stages === null || stages.length === 0) {
+    return null;
+  }
 
   return (
     <div className="stages">