Skip to content

Commit 59e2cd1

Browse files
grixugrixu
authored
chore(eslint-config): upgrade config to use ESLint v9 & FlatConfig (#7310)
* chore(eslint-config): upgrade config to use ESLint v9 & FlatConfig * fix: linting in this repo * refactor: unify plugin import naming * docs: update the README.md * build: changeset
1 parent c1ed26c commit 59e2cd1

File tree

21 files changed

+1571
-1551
lines changed

21 files changed

+1571
-1551
lines changed

‎.changeset/gold-chairs-jog.md‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
---
2+
"@vue-storefront/eslint-config": major
3+
---
4+
5+
**[BREAKING]**: The ``@vue-storefront/eslint-config` is migrated to support ESLint v9 and FlatConfig. Please upgrade following way:
6+
7+
**Step 1: Update Dependencies**
8+
9+
First, update your project dependencies to use the latest versions of ESLint and Prettier.
10+
11+
```bash
12+
yarn add -D eslint@^9 prettier@^3 @vue-storefront/eslint-config@^4
13+
```
14+
15+
**Step 2: Update ESLint Configuration**
16+
17+
Replace your existing ESLint configuration with the new configuration format. Below is a basic example from the `README.md`:
18+
19+
```js
20+
import { ecma, typescript, style, concat } from "@vue-storefront/eslint-config";
21+
22+
export default concat(
23+
ecma(),
24+
typescript(),
25+
style(),
26+
// Here it's a place for you custom configuration
27+
);
28+
```
29+
30+
Read more about FlatConfig in [ESLint docs](https://eslint.org/docs/latest/use/configure/).

‎engineering-toolkit/eslint-config/.prettierrc‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"singleQuote": false,
3+
"printWidth": 120
4+
}

‎engineering-toolkit/eslint-config/README.MD‎

Lines changed: 200 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,95 +1,241 @@
11
# @vue-storefront/eslint-config
22

3-
> Common eslint configuration used in alokai projects
3+
> Common ESLint configuration used in Alokai projects. These configurations are compatible with ESLint 9.
44
55
## Usage
66

7-
#### Install
7+
### Install
88

99
```bash
1010
yarn add -D eslint prettier @vue-storefront/eslint-config
1111
```
1212

13-
#### Config `.eslintrc`
13+
### Building Blocks
1414

15-
```json
16-
{
17-
"extends": "@vue-storefront/eslint-config"
15+
This ESLint configuration is composed of several building blocks, each tailored for specific use cases:
16+
17+
- `ecma`: For ECMAScript projects.
18+
- `typescript`: For TypeScript projects.
19+
- `style`: For Prettier and Perfectionist plugins.
20+
- `nextjs`: For Next.js projects.
21+
- `playwright`: For Playwright projects.
22+
- `architecture`: For enforcing architectural rules.
23+
24+
### Options
25+
26+
All options are optional. You don't have to set these options if you are okay with the default configuration.
27+
28+
#### `ecma`
29+
30+
- `files` (default: `"**/*.{mjs,cjs,js,jsx}"`): The glob pattern for files to lint.
31+
- `isStrict` (default: `true`): Enables extra rules for stricter checking.
32+
- `withImport` (default: `true`): Enables `eslint-plugin-import`.
33+
34+
35+
#### `typescript`
36+
37+
- `files` (default: `"**/*.{ts,tsx,mts,cts,mtsx,ctsx}"`): The glob pattern for files to lint.
38+
- `isStrict` (default: `true`): Enables extra rules for stricter checking.
39+
- `withImport` (default: `true`): Enables `eslint-plugin-import`.
40+
41+
### `style`
42+
43+
- `files` (default: `"**/*.{mjs,cjs,js,jsx,ts,tsx,mts,cts,mtsx,ctsx}"`): The glob pattern for files to lint.
44+
45+
### `nextjs`
46+
47+
- `files` (default: `"**/*.{mjs,cjs,js,jsx,ts,tsx,mts,cts,mtsx,ctsx}"`): The glob pattern for files to lint.
48+
Here you can pass the general file glob pattern for all directories with Next.js/React code. But for better results please pass the glob for the components folders and hooks. Those two are passed to the special rules just for them.
49+
50+
```ts
51+
files: {
52+
general: "**/*.{js,jsx,ts,tsx}",
53+
components: "src/components/**/*.{js,jsx,ts,tsx}",
54+
hooks: "src/hooks/**/*.{js,jsx,ts,tsx}"
1855
}
1956
```
2057

21-
### Without Prettier `.eslintrc`
58+
- `isStrict` (default: `true`): Enables extra rules for stricter checking.
2259

23-
If you do not want to use `prettier`, you can easily compose your own config:
60+
### `playwright`
2461

25-
```json
26-
{
27-
"extends": [
28-
"@vue-storefront/eslint-config/ecma",
29-
"@vue-storefront/eslint-config/typescript",
30-
"@vue-storefront/eslint-config/json"
31-
]
32-
}
62+
- `files` (default: `"**/*.test.ts"`): The glob pattern for files to lint.
63+
64+
### `architecture`
65+
66+
- `files` (default: `"**/*.{mjs,cjs,js,jsx,ts,tsx,mts,cts,mtsx,ctsx}"`): The glob pattern for files to lint.
67+
- `maxComplexity` (default: `6`): The maximum cyclomatic complexity allowed in a program.
68+
- `maxDepth` (default: `4`): The maximum depth that blocks can be nested.
69+
- `maxStatementsPerLine` (default: `1`): The maximum number of statements allowed per line.
70+
- `maxLines` (default: `300`): The maximum number of lines per file.
71+
- `maxLinesPerFunction` (default: `60`): The maximum number of lines of code in a function.
72+
- `maxStatements` (default: `10`): The maximum number of statements allowed in function blocks.
73+
- `maxNestedCallbacks` (default: `5`): The maximum depth that callbacks can be nested.
74+
- `maxParams` (default: `3`): The maximum number of parameters in function definitions.
75+
76+
77+
## Example configurations
78+
79+
### Config `eslint.config.js`
80+
81+
```javascript
82+
import { ecma, typescript, style } from "@vue-storefront/eslint-config";
83+
84+
export default [
85+
ecma(),
86+
typescript(),
87+
style()
88+
];
3389
```
3490

35-
### Usage with React `.eslintrc`
91+
### Usage with Next.js `eslint.config.js`
3692

37-
Vue Storefront `React` specific linting rules.
93+
Vue Storefront `Next.js` specific linting rules.
3894

39-
```json
40-
{
41-
"extends": [
42-
"@vue-storefront/eslint-config",
43-
"@vue-storefront/eslint-config/react"
44-
]
45-
}
95+
```javascript
96+
import { ecma, nextjs } from "@vue-storefront/eslint-config";
97+
98+
export default [
99+
ecma(),
100+
nextjs({
101+
files: {
102+
general: "**/*.{js,jsx,ts,tsx}",
103+
components: "src/components/**/*.{js,jsx,ts,tsx}",
104+
hooks: "src/hooks/**/*.{js,jsx,ts,tsx}"
105+
},
106+
isStrict: true
107+
})
108+
];
46109
```
47110

48-
### Usage with Vue `.eslintrc`
111+
### Usage with Nuxt 3
112+
113+
For projects using Nuxt 3, we recommend using the Nuxt ESLint module and adding styling and architecture configurations to it.
114+
115+
Here is a basic config using the ESLint Nuxt module:
116+
117+
```javascript
118+
import withNuxt from './.nuxt/eslint.config.mjs';
119+
import { ecma, typescript, style, architecture } from "@vue-storefront/eslint-config";
120+
121+
export default withNuxt(
122+
ecma(),
123+
typescript(),
124+
style(),
125+
architecture({
126+
maxComplexity: 10,
127+
maxDepth: 5,
128+
maxStatementsPerLine: 1,
129+
maxLines: 500,
130+
maxLinesPerFunction: 100,
131+
maxStatements: 15,
132+
maxNestedCallbacks: 3,
133+
maxParams: 4
134+
})
135+
);
136+
```
49137

50-
Vue Storefront `Vue` specific linting rules.
138+
### Usage with Node.js `eslint.config.js`
51139

52-
```json
53-
{
54-
"extends": [
55-
"@vue-storefront/eslint-config",
56-
"@vue-storefront/eslint-config/vue"
57-
]
58-
}
140+
Vue Storefront `Node.js` specific linting rules.
141+
142+
```javascript
143+
import { ecma } from "@vue-storefront/eslint-config";
144+
145+
export default [
146+
ecma()
147+
];
59148
```
60149

61-
### Usage with Vue3 `.eslintrc`
150+
### Usage with Playwright `eslint.config.js`
62151

63-
Vue Storefront `Vue3` specific linting rules.
152+
Vue Storefront `Playwright` specific linting rules.
64153

65-
```json
66-
{
67-
"extends": [
68-
"@vue-storefront/eslint-config",
69-
"@vue-storefront/eslint-config/vue3"
70-
]
71-
}
154+
```javascript
155+
import { ecma, playwright } from "@vue-storefront/eslint-config";
156+
157+
export default [
158+
ecma(),
159+
playwright({
160+
files: "**/*.test.ts",
161+
isStrict: true
162+
})
163+
];
72164
```
73165

74-
### Usage with NextJs `.eslintrc`
166+
### Usage with TypeScript `eslint.config.js`
75167

76-
Vue Storefront `NextJs` specific linting rules.
168+
Vue Storefront `TypeScript` specific linting rules.
77169

78-
```json
79-
{
80-
"extends": [
81-
"@vue-storefront/eslint-config/next"
82-
]
83-
}
170+
```javascript
171+
import { ecma, typescript } from "@vue-storefront/eslint-config";
172+
173+
export default [
174+
ecma(),
175+
typescript()
176+
];
177+
```
178+
179+
### Usage with Architectural Rules `eslint.config.js`
180+
181+
Vue Storefront `Architectural` specific linting rules.
182+
183+
```javascript
184+
import { ecma, architecture } from "@vue-storefront/eslint-config";
185+
186+
export default [
187+
ecma(),
188+
architecture({
189+
maxComplexity: 10,
190+
maxDepth: 5,
191+
maxStatementsPerLine: 1,
192+
maxLines: 500,
193+
maxLinesPerFunction: 100,
194+
maxStatements: 15,
195+
maxNestedCallbacks: 3,
196+
maxParams: 4
197+
})
198+
];
199+
```
200+
201+
### Using `concat` function
202+
203+
You can use the `concat` function to combine configurations from different sources.
204+
205+
```javascript
206+
import { ecma, typescript, concat } from "@vue-storefront/eslint-config";
207+
import customConfig from "./custom-eslint-config";
208+
209+
export default concat(
210+
ecma(),
211+
typescript(),
212+
customConfig
213+
);
214+
```
215+
216+
### Overriding rules in a factory
217+
218+
You can override rules in one of our factories by passing a custom rules object.
219+
220+
```javascript
221+
import { ecma, typescript } from "@vue-storefront/eslint-config";
222+
223+
export default [
224+
ecma(),
225+
typescript({}, {
226+
name: 'custom-config',
227+
files: ['**/*.ts'],
228+
rules: {
229+
"@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_" }]
230+
}
231+
})
232+
];
84233
```
85234

86235
## Used rulesets & plugins
87236

88237
- [unicorn](https://github.com/sindresorhus/eslint-plugin-unicorn)
89238
- [no-secrets](https://github.com/nickdeis/eslint-plugin-no-secrets)
90239
- [promise](https://github.com/eslint-community/eslint-plugin-promise)
91-
- [sonarjs](https://github.com/SonarSource/eslint-plugin-sonarjs)
92-
- [@microsoft/sdl](https://github.com/microsoft/eslint-plugin-sdl)
93240
- [unused-imports](https://www.npmjs.com/package/eslint-plugin-unused-imports)
94241
- [prettier](https://github.com/prettier/eslint-plugin-prettier)
95-

‎engineering-toolkit/eslint-config/eslint.config.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { concat } from "eslint-flat-config-utils";
2+
3+
import { ecma, style } from "./src/index.js";
4+
5+
export default concat(ecma(), style());

0 commit comments

Comments
 (0)