Code quality front package for Groupe Actual projects
npm install @groupeactual/code-quality-front

> This project contains a collection of essential quality tools for front applications, including Prettier, TypeScript configuration, Jest, and ESLint.
1. Introduction
2. Installation
3. Configuration
4. CI
5. VsCode
6. Contributing
7. License
> 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",
- 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.
Each tool comes with its own configuration file:
- Prettier: .prettierrc.jstsconfig.json
- TypeScript: jest.config.js
- Jest: eslint.config.js
- ESLint:
- 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
};
`
> For each new tag created, a new release will be created on github and a new version will be published on npm.
- 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",
You are invited to follow our guide for contributing.
© Actual Digital