Lint

[IsaacIsrael]

This issue focuses on setting up and configuring linting tools for the project to ensure consistent code style, code quality, and security practices. The tasks will include the following:

• Code Style:

  • Set up and configure Editor config for automatic when writing.
  • Set up and configure Prettier for automatic formatting after saving.
  • Edit and customize the Prettier and Editor config configuration to follow the project's style guidelines.

• Quality Style:

  • Set up and configure ESLint to enforce code quality rules.
  • Configure ESLint to check for potential issues, maintain coding standards, and enforce best practices.
  • Add the eslint-plugin-react-hooks
  • Add the eslint-plugin-react-refresh
  • Add the eslint-plugin-perfectionist
  • Add the eslint-plugin-react-native

• Commit:

  • Set up and configure Commitlint to enforce conventional commit messages.
  • Ensure commit messages follow a consistent and structured format (e.g., type(scope): description).

• Continue integrations

  • add lint for code style and quality at the pre-commit stage
  • add lint for commit at commit-msg
  • Execute the commitizen when doing the command git commit
  • create lint action to check for code style
  • add for lint action to check for code quality
  • add for lint action to check for commit

Implementing these linting tools will improve code consistency, maintainability, and security across the project.

[IsaacIsrael]

Checked editorconfig to set the rules

[IsaacIsrael]

Added .vscode settings.json to the project and also extensions.json

[IsaacIsrael]

Tested the editconfig

[IsaacIsrael]

Checked prettier options to set the rules

[IsaacIsrael]

Tested the prettier

[IsaacIsrael]

Fix json and jsonc vscode setting

[IsaacIsrael]

Remove experimentalTernaries not available for this prettier version

[IsaacIsrael]

Add native folders to the prettierignore

[IsaacIsrael]

Create prettier:check and prettier:fix scripts

[IsaacIsrael]

Fix all prettier issues with prettier:fix

[IsaacIsrael]

Run this command

npm init @eslint/config@latest

To initialize eslint (It will install some libraries and start the new flat configuration )

[IsaacIsrael]

Add to eslint.config

{
    settings: {
      react: {
        version: 'detect',
      }
    }
}

to fix this error

Warning: React version not specified in eslint-plugin-react settings. See https://github.com/jsx-eslint/eslint-plugin-react#configuration .

[IsaacIsrael]

Add to eslint.config

 {
    ignores: ['*.config.*'],
 }

To ignore files like babel.config.js , metro.config.js , jest.config.js , eslint.config.mjs

[IsaacIsrael]

You can test your prettier config in this playground

[IsaacIsrael]

You can test your eslint rules in this playground

[IsaacIsrael]

I read this article to decide what it is the best approach to integrated prettier and eslint

[IsaacIsrael]

Add and config eslint-config-prettier as here

[IsaacIsrael]

Test prettier and lint conflicts with eslint-config-prettier

[IsaacIsrael]

Follow this article to set eslint rules

[IsaacIsrael]

Add and config eslint-plugin-react-hooks

like this comment and eslint tutorial

[IsaacIsrael]

Test eslint-plugin-react-hooks

[IsaacIsrael]

After reading the previous article I added these rules

{
      'react/jsx-filename-extension': ['error', { extensions: ['.tsx'] }],
      '@typescript-eslint/no-shadow': ['error'],
      '@typescript-eslint/explicit-function-return-type': ['error', { allowExpressions: true }],
}

[IsaacIsrael]

Test this rules

[IsaacIsrael]

Found this library for project architecture

[IsaacIsrael]

Add eslint-plugin-perfectionist to the project

[IsaacIsrael]

implement sort rules

{
    rules: {
      'perfectionist/sort-imports': [
        'error',
        {
          type: 'natural',
          order: 'asc',
          internalPattern: ['^(@|/)+'],
          groups: [
            ['external', 'builtin'],
            ['parent', 'sibling', 'index'],
            'internal',
            'object',
            ['type', 'internal-type', 'parent-type', 'sibling-type', 'index-type'],
            'unknown',
          ],
        },
      ],
      'perfectionist/sort-array-includes': [
        'error',
        {
          type: 'natural',
        },
      ],
      'perfectionist/sort-classes': [
        'error',
        {
          type: 'natural',
          groups: [
            'index-signature',
            'static-block',

            ['private-static-property', 'private-static-accessor-property'],
            ['protected-static-property', 'protected-static-accessor-property'],
            ['static-property', 'static-accessor-property'],

            ['private-property', 'private-accessor-property'],
            ['protected-property', 'protected-accessor-property'],
            ['property', 'accessor-property'],

            ['private-static-get-method', 'private-static-set-method'],
            ['protected-static-get-method', 'protected-static-set-method'],
            ['static-get-method', 'static-set-method'],

            ['private-get-method', 'private-set-method'],
            ['protected-get-method', 'protected-set-method'],
            ['public-get-method', 'public-set-method'],

            'constructor',

            ['private-static-method', 'private-static-function-property'],
            ['protected-static-method', 'protected-static-function-property'],
            ['static-method', 'static-function-property'],

            ['private-method', 'private-function-property'],
            ['protected-method', 'protected-function-property'],
            ['method', 'function-property'],

            'unknown',
          ],
        },
      ],
      'perfectionist/sort-enums': [
        'error',
        {
          type: 'natural',
        },
      ],
      'perfectionist/sort-exports': [
        'error',
        {
          type: 'natural',
        },
      ],
      'perfectionist/sort-heritage-clauses': [
        'error',
        {
          type: 'natural',
        },
      ],
      'perfectionist/sort-interfaces': [
        'error',
        {
          type: 'natural',
        },
      ],
      'perfectionist/sort-intersection-types': [
        'error',
        {
          type: 'natural',
        },
      ],
      'perfectionist/sort-jsx-props': [
        'error',
        {
          type: 'natural',
          groups: ['multiline', 'unknown', 'shorthand', 'callback'],
          customGroups: {
            callback: '^on.+',
          },
        },
      ],
      'perfectionist/sort-maps': [
        'error',
        {
          type: 'natural',
        },
      ],
      'perfectionist/sort-modules': [
        'error',
        {
          type: 'natural',
          groups: [
            'declare-enum',
            'enum',
            'export-enum',
            ['declare-interface', 'declare-type'],
            ['export-interface', 'export-type'],
            ['interface', 'type'],
            'declare-function',
            'function',
            'export-function',
            'declare-class',
            'class',
            'export-class',
          ],
        },
      ],
      'perfectionist/sort-named-exports': [
        'error',
        {
          type: 'natural',
        },
      ],
      'perfectionist/sort-named-imports': [
        'error',
        {
          type: 'natural',
        },
      ],
      'perfectionist/sort-object-types': [
        'error',
        {
          type: 'natural',
        },
      ],
      'perfectionist/sort-objects': [
        'error',
        {
          type: 'natural',
          groups: ['id', 'unknown'],
          customGroups: {
            id: '^id$',
          },
        },
      ],
      'perfectionist/sort-sets': [
        'error',
        {
          type: 'natural',
        },
      ],
      'perfectionist/sort-switch-case': [
        'error',
        {
          type: 'natural',
        },
      ],
      'perfectionist/sort-union-types': [
        'error',
        {
          type: 'natural',
        },
      ],
      'perfectionist/sort-variable-declarations': [
        'error',
        {
          type: 'natural',
        },
      ],
    }

[IsaacIsrael]

Add eslint-plugin-react-native to the project

[IsaacIsrael]

Disable this rules

{
     'react-native/sort-styles': 'off',
     'react-native/no-raw-text': 'off',
}

[IsaacIsrael]

Create eslint:check and eslint:fix scripts

[IsaacIsrael]

Fix all eslint issues

[IsaacIsrael]

Refactoring the lint script to do prettier and eslint

[IsaacIsrael]

Use conventionalcommits to lint the commit message

[IsaacIsrael]

Add gitmoji-commit-workflow to lint the commit

[IsaacIsrael]

Install

• commitlint
• commitlint-config-gitmoji

[IsaacIsrael]

Test

 echo "teste" | commitlint

[IsaacIsrael]

Install

• cz-cli
• cz-emoji-conventional

[IsaacIsrael]

Remove all commit lint with emoji

• cz-emoji-conventional
• commitlint-config-gitmoji

[IsaacIsrael]

Create .czrc file

[IsaacIsrael]

create type:check script

[IsaacIsrael]

Add type:check, eslint:check and prettier:check to lint-staged

type:check run to all project due to the typescript configuration

[IsaacIsrael]

Create action to run lint typescript, eslint, prettier and commitlint