Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

build: Update to auto publish with release please #48

Merged
merged 7 commits into from
Jan 16, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
125 changes: 26 additions & 99 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,115 +1,42 @@
# Monorepo for Evaneos's front configs
# @evaneos/front-config

This monorepo provides 3 packages as Evaneos's configs for front projects.
@evaneos/front-config is the main resource for shared js/ts/tsx linting and config across Evaneos apps.

- [`eslint-config`](packages/eslint-config) for TypeScript projects
- [`eslint-config-base`](packages/eslint-config-base) for JavaScript projects
- [`typescript-config`](packages/typescript-config) for TypeScript projects' tsconfig.json file
## Install

## What they do

They setup lints, and formats, and configures your TypeScript/JavaScript code based on Evaneos' practices. Feel free to override the rules that make sense for you.

## Installing

Please check either package for detailed README files:
- [How to install `eslint-config`](packages/eslint-config/README.md#installing)
- [How to install `eslint-config-base`](packages/eslint-config-base/README.md#installing)
- [How to install `typescript-config`](packages/typescript-config/README.md#installing)

## How this works

### Eslint

By default, we use `env.brower = true` but you might want to set `env.node = true` if that applies to your situation.

### Prettier

Prettier might be configured at 2 different places (see "How to install"s for details) :
- in the package.json
This is the preferred way at it does not contribute to the growing size of root folders in projects.
- in a .prettierrc.js
That would allow overriding its rules

To activate prettier on your projects, you just have to set up those configs and activate it in your IDE.
For example in PHPStorm search for "prettier" and activate the "Automatic Prettier configuration"

Also, you might want to make it autorun when you save a file.
For example in PHPStorm search for "prettier" and check "Run on save".

#### Understanding our config

For list and the default values of the available configs, you can refer to [prettier documentation](https://prettier.io/docs/en/options).

We chose to override those :
- tabWidth: 4
Makes the code easier to read
- singleQuote: true
We think doubleQuote might be (just a bit) better, but it would generate a lot of changes, so it would not be worth it.

What's important is for every project to have prettier enabled. It doesn't really matter if some projects have little changes over it (eg: printWidth being defaulted to 80);

About printWidth :
> It is not the hard upper allowed line length limit. It is a way to say to Prettier roughly how long you’d like lines to be. Prettier will make both shorter and longer lines, but generally strive to meet the specified printWidth.

### TSconfig

[tsconfig.json](packages/typescript-config/tsconfig.json) is mandatory for a TypeScript project to work.
Some of its config is project specific, but we can share most ot the `compilerOptions` configs, and so we chose to override some of the defaults :

`compilerOptions.target` is set to `es6` because TSC transpiles poorly to ES5,
so we let TSC transpile to ES6 and Babel transpile from ES6 to the desired target.
```shell
npm install @evaneos/front-config@latest
```

`compilerOptions.module` must not be `esnext`: too risky because it means it auto updates to the last version, while `es2020` match our needs.
# Usage

`compilerOptions.moduleResolution` defaults to `node` if module > `es6` (`es2020` > `es6` so => `node`)
## Eslint flat config

`compilerOptions.jsx` we prefer to specify the import of React package, because it makes the code less dependent on the tooling.
In your `eslint.config.js` file, add:

`compilerOptions.useUnknownInCatchVariables` default to `true` because `compilerOptions.strict` is `true` and in JavaScript you can catch any type of variables so the caught variable type is `unknown`.
```js
const evaneosConfig = require("@evaneos/front-config/linting/eslint.config.js")
module.export = [
...evaneosConfig
]
```

## TSConfig

## Contributing
In your `tsconfig.json` file, add:

### Eslint
```json
{
"extends": "@evaneos/front-config/config/tsconfig.json"
}
```

You have to keep prettier as the last of eslint extensions. Because it must have the last word on automatic code modification (eg: eslint --fix / prettier).
## Prettier

That is for (at least) 2 reasons :
- Some rules might overlap between eslint and prettier configs (eg: [Arrow Function Parentheses](https://prettier.io/docs/en/options#arrow-function-parentheses))
- Prettier must be the ruler of writing style while eslint is the ruler of semantics and other stuff
In your `.prettierrc` file add:

```javascript
```js
module.exports = {
...,
extends: [
'my rules',
'...',
'prettier'
],
...require("@evaneos/front-config/linting/prettier-config.js"),
};
```

### Questions / To Discuss in front chapter

#### Eslint

- `arrow-body-style` rule: do we want to force it or not?
- inline
- pour debugger soit réécrire les accolade et le return
- le return est implicite et lors d'un refacto, on ne sait pas facilement quelle était l'intention de la fonction

off la rend flexible
always autofix avec eslint --fix

```typescript
const toto = () => {
return 'tata';
}

const totso = (param): 'toto' => 'tata';
```

## Notes

We did not settup a default babel configuration because we found it too complex to harmonize between apps (b2b / b2c / next defaults). For now, just look up for existing projects to configure new ones.
File renamed without changes.
6 changes: 0 additions & 6 deletions lerna.json

This file was deleted.

33 changes: 33 additions & 0 deletions linting/eslint.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
// @ts-check

const eslintConfigPrettier = require("eslint-config-prettier");

const eslint = require("@eslint/js");
const tseslint = require("typescript-eslint");

const reactLint = require("./rules/react");
const testLint = require("./rules/test");
const evaneosOverrides = require("./rules/override");

module.exports = tseslint.config(
eslint.configs.recommended,
tseslint.configs.recommendedTypeChecked,
{
languageOptions: {
parserOptions: {
projectService: true,
tsconfigRootDir: __dirname,
},
},
},
{
files: ["**/*.js"],
extends: [tseslint.configs.disableTypeChecked],
},
eslintConfigPrettier,
testLint,
// @ts-expect-error
...reactLint,
// custom evaneos rules
...evaneosOverrides
);
5 changes: 5 additions & 0 deletions linting/prettier.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
module.exports = {
tabWidth: 4,
singleQuote: true,
printWidth: 100,
};
24 changes: 24 additions & 0 deletions linting/rules/override.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
module.exports = [
{
rules: {
"import/no-default-export": 2,
"import/newline-after-import": 1,
"import/no-duplicates": 2,
"import/order": [
"warn",
{
alphabetize: {
order: "asc",
caseInsensitive: true,
},
"newlines-between": "always",
},
],
"no-process-env": 0,
"prefer-const": 1,
"prefer-destructuring": 1,
"prefer-spread": 1,
"arrow-body-style": 0,
},
},
];
15 changes: 15 additions & 0 deletions linting/rules/react.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
const reactPlugin = require("eslint-plugin-react");

module.exports = [
reactPlugin.configs.flat.recommended,
reactPlugin.configs.flat["jsx-runtime"],
{
rules: {
"react-hooks/exhaustive-deps": 1,
"react-hooks/rules-of-hooks": 2,
"react/display-name": 0,
"react/prop-types": 0,
"react/react-in-jsx-scope": 0,
},
},
];
6 changes: 6 additions & 0 deletions linting/rules/test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
const testingLibrary = require("eslint-plugin-testing-library");

module.exports = {
files: ["**/__tests__/**/*.[jt]s?(x)", "**/?(*.)+(spec|test).[jt]s?(x)"],
...testingLibrary.configs["flat/react"],
};
Loading
Loading