Merge pull request #354 from belgattitude/improved-eslint

Improved eslint config

.changeset/plenty-socks-act.md

@@ -0,0 +1,9 @@
+---
+'blog-app': patch
+'web-app': patch
+'@your-org/core-lib': patch
+'@your-org/db-main-prisma': patch
+'@your-org/ui-lib': patch
+---
+
+Improve eslint config and add eslint-plugin-import

.eslintrc.base.js

@@ -0,0 +1,90 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+    es6: true,
+  },
+  ignorePatterns: ['node_modules/*'],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 12,
+    sourceType: 'module',
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+    'import/resolver': {
+      typescript: {},
+    },
+  },
+  extends: [
+    'plugin:import/errors',
+    'plugin:import/warnings',
+    'plugin:import/typescript',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:prettier/recommended',
+    'plugin:jest/recommended',
+    'plugin:sonarjs/recommended',
+  ],
+  globals: {
+    context: 'readonly',
+    cy: 'readonly',
+    assert: 'readonly',
+    Cypress: 'readonly',
+  },
+  rules: {
+    'linebreak-style': ['error', 'unix'],
+    'import/default': 'off',
+    'import/no-named-as-default-member': 'off',
+    'import/no-named-as-default': 'off',
+    'import/order': [
+      'error',
+      {
+        groups: [
+          'builtin',
+          'external',
+          'internal',
+          'parent',
+          'sibling',
+          'index',
+          'object',
+        ],
+        alphabetize: { order: 'asc', caseInsensitive: true },
+      },
+    ],
+    'no-empty-function': 'off',
+    '@typescript-eslint/no-empty-function': [
+      'error',
+      { allow: ['private-constructors'] },
+    ],
+    '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
+  },
+  overrides: [
+    {
+      files: ['*.config.js', '**/jest/**/*.js'],
+      parser: 'espree',
+      parserOptions: {
+        ecmaVersion: 2020,
+      },
+      rules: {
+        '@typescript-eslint/no-explicit-any': 'off',
+        '@typescript-eslint/no-var-requires': 'off',
+        '@typescript-eslint/explicit-module-boundary-types': 'off',
+        'sonarjs/no-duplicate-string': 'off',
+        'sonarjs/no-all-duplicated-branches': 'off',
+      },
+    },
+    {
+      files: ['*.test.ts', '*.test.tsx'],
+      rules: {
+        '@typescript-eslint/no-non-null-assertion': 'off',
+        '@typescript-eslint/no-object-literal-type-assertion': 'off',
+        '@typescript-eslint/no-empty-function': 'off',
+      },
+    },
+  ],
+};

apps/blog-app/.eslintrc.js

@@ -0,0 +1,63 @@
+module.exports = {
+  root: true,
+  ignorePatterns: ['node_modules/*', '.next'],
+  extends: [
+    '../../.eslintrc.base.js',
+    // Add specific rules for react and nextjs
+    'plugin:react/recommended',
+    'plugin:react-hooks/recommended',
+    'plugin:jsx-a11y/recommended',
+    'plugin:@next/next/recommended',
+    'plugin:testing-library/react',
+  ],
+  env: {
+    browser: true,
+    es6: true,
+    node: true,
+  },
+  rules: {
+    'react/prop-types': 'off',
+    'react/react-in-jsx-scope': 'off',
+    'jsx-a11y/anchor-is-valid': 'off',
+    'react/no-unescaped-entities': 'off',
+
+    // next/image might not be yet a good move as of NextJs v11.
+    // https://github.com/vercel/next.js/discussions/16832
+    '@next/next/no-img-element': 'off',
+  },
+  overrides: [
+    {
+      files: ['next.config.js'],
+      parser: 'espree',
+      parserOptions: {
+        ecmaVersion: 2020,
+      },
+      rules: {
+        'import/order': 'off',
+        '@typescript-eslint/ban-ts-comment': 'off',
+        '@typescript-eslint/no-explicit-any': 'off',
+        '@typescript-eslint/no-var-requires': 'off',
+        '@typescript-eslint/explicit-module-boundary-types': 'off',
+      },
+    },
+    {
+      files: ['src/pages/**/*.ts', 'src/pages/**/*.tsx'],
+      rules: {
+        '@typescript-eslint/explicit-module-boundary-types': 'off',
+      },
+    },
+    {
+      files: ['src/backend/api/**/*.ts'],
+      rules: {
+        '@typescript-eslint/explicit-module-boundary-types': 'off',
+      },
+    },
+    {
+      files: ['config/jest/test-utils.tsx'],
+      rules: {
+        '@typescript-eslint/explicit-module-boundary-types': 'off',
+        'import/export': 'off',
+      },
+    },
+  ],
+};

apps/blog-app/config/jest/test-utils.tsx

@@ -2,8 +2,8 @@
  * Automatically add app-providers
  * @see https://testing-library.com/docs/react-testing-library/setup#configuring-jest-with-test-utils
  */
-import React from 'react';
 import { render } from '@testing-library/react';
+import React from 'react';
 import { AppTestProviders } from './app-test-providers';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any

apps/blog-app/jest.config.js

@@ -1,8 +1,8 @@
 // @ts-check
 'use strict';
 
-const { pathsToModuleNameMapper } = require('ts-jest/utils');
 const { defaults: tsPreset } = require('ts-jest/presets');
+const { pathsToModuleNameMapper } = require('ts-jest/utils');
 
 const { compilerOptions: baseTsConfig } = require('./tsconfig.json');
 

apps/blog-app/src/components/layout/__tests__/main-layout.test.tsx

@@ -1,5 +1,5 @@
-import { render, screen } from '@/test-utils';
 import { MainLayout } from '@/components/layout/main-layout';
+import { render, screen } from '@/test-utils';
 
 describe('Layout tests', () => {
   it('should render children', async () => {

apps/blog-app/src/components/layout/main-layout.tsx

@@ -1,6 +1,6 @@
 import { FC } from 'react';
-import { MainHeader } from '@/components/layout/main-header';
 import { MainFooter } from '@/components/layout/main-footer';
+import { MainHeader } from '@/components/layout/main-header';
 
 export const MainLayout: FC = (props) => {
   const { children } = props;

apps/blog-app/src/pages/index.tsx

@@ -1,8 +1,8 @@
 import { sayHello } from '@your-org/core-lib';
+import { NextSeo } from 'next-seo';
+import Image from 'next/image';
 import { getPosts, Post } from '../data/blog';
 import { MainLayout } from '@/components/layout/main-layout';
-import Image from 'next/image';
-import { NextSeo } from 'next-seo';
 
 type Props = {
   posts: Post[];

apps/blog-app/tailwind.config.js

@@ -1,5 +1,5 @@
-const defaultTheme = require('tailwindcss/defaultTheme');
 const colors = require('tailwindcss/colors');
+const defaultTheme = require('tailwindcss/defaultTheme');
 
 module.exports = {
   mode: 'jit',