npm package: @groupeactual/code-quality-front
Description: Code quality front package for Groupe Actual projects
Author: Groupe Actual
Latest version: 1.3.0

<p align="center">
  <img src="https://i.imgur.com/oIWkk65.png" alt="Groupe Actual" height="100" />
</p>

# Code Quality Front

> This project contains a collection of essential quality tools for front applications, including Prettier, TypeScript configuration, Jest, and ESLint.

## Table of Contents

1. [Introduction](#introduction)
2. [Installation](#installation)
3. [Configuration](#configuration)
4. [CI](#ci)
5. [VsCode](#vscode)
6. [Contributing](#contributing)
7. [License](#license)

## Introduction

> Code Quality Front Tools aims to help you maintain a high-quality codebase by providing a set of tools and configurations for code formatting, type checking, testing, and linting. The included tools are:

- [Prettier](https://prettier.io): An opinionated code formatter.
- [TypeScript](https://www.typescriptlang.org): A superset of JavaScript that adds static types.
- [Jest](https://jestjs.io): A delightful JavaScript testing framework.
- [ESLint](https://eslint.org): A pluggable JavaScript linter.

> Code Quality include all quality packages you need for your font project. Make sure you have installed all these dependencies before using the tools.

> Check package.json for more details.

> `"eslint": "^9.14.0"`, `"prettier": "^3.3.3"`, `"jest": "^29.7.0",`

## Installation

- Make sure you have installed all these dependencies before using the tools.
- To install the Code Quality Front Tools in your project, run the following command :

```bash
pnpm install @groupeactual/code-quality-front
```

- You can customize these configurations (Prettier/TypeScript/Jest/ESLint) to fit your project's needs,
  all these configurations can be overridden in your project. And you can use react-native or react config depending of your project.

## Configuration

Each tool comes with its own configuration file:

- Prettier: `.prettierrc.js`
- TypeScript: `tsconfig.json`
- Jest: `jest.config.js`
- ESLint: `eslint.config.js`

- If your package.json does not have the `type="module"` rename in .mjs the configurations files.
- In your package.json in scripts add this command for eslint :

```json
"scripts": {
    "eslint": "eslint --config \"eslint.config.js\" --color \".\"",
    ...
}
```

- Check files `.prettierrc.js` and `eslint.config.js` and implement these files on your project :
- For tsconfig

```json
{
  "extends": "./node_modules/@groupeactual/code-quality-front/src/tsconfig/react/tsconfig.json",
  ...
}
```

- Example config for `eslint.config.js`

```js
import config from '@groupeactual/code-quality-front/react-eslint';

export default [
  {
    ...config,
    languageOptions: {
      ...config.languageOptions,
      parserOptions: {
        ...config.languageOptions.parserOptions,
        project: './tsconfig.json',
      },
    },
    rules: {
      ...config.rules,
      // Mettre les custom rules du projet si besoin
    },
  },
];
```

- For `.prettierrc.js`

```js
import reactPrettierConfig from '@groupeactual/code-quality-front/react-prettier';

export default {
  ...reactPrettierConfig,
  // Add your custom rules here in your project
};
```

## CI

> For each new tag created, a new release will be created on github and a new version will be published on npm.

## VsCode

- Add extensions Eslint From Microsoft and Prettier - Code Formatter from prettier.io in VsCode
- Add this configuration in your VsCode Settings (User or Workspace)
- Restart your VsCode and check Eslint and Prettier Output Console to check if everything is ok.

```json
  "eslint.validate": [
    "html",
    "javascript",
    "typescript",
    "javascriptreact",
    "typescriptreact"
  ],
  "eslint.nodePath": "./node_modules/eslint",
  "eslint.codeActionsOnSave.rules": null,
  "eslint.format.enable": true,
  "eslint.workingDirectories": ["./eslint.config.js"],
  "prettier.prettierPath": "./node_modules/prettier",
  "prettier.insertPragma": true,
  "prettier.resolveGlobalModules": true,
  "prettier.requireConfig": true,
  "prettier.configPath": ".prettierrc.js",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
```

## Contributing

You are invited to follow [our guide](https://github.com/actualtysoft/dto/blob/master/CONTRIBUTING.md) for contributing.

## License

&copy; Actual Digital