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
2. Installation
3. Configuration
4. CI
5. VsCode
6. Contributing
7. 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: An opinionated code formatter.
• TypeScript: A superset of JavaScript that adds static types.
• Jest: A delightful JavaScript testing framework.
• ESLint: 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 :

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 :

"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

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

• Example config for eslint.config.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

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.

  "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 for contributing.

License

© Actual Digital