|
1 | 1 | # Cypress ESLint Plugin - Flat Config
|
2 | 2 |
|
3 |
| -This document supplements the [README](README.md) document and describes how to use the Cypress ESLint Plugin (`eslint-plugin-cypress`) in an ESLint flat config environment. |
| 3 | + Please refer to the [README](./README.md) document where the previous contents of this document, describing how to use `eslint-plugin-cypress` with an ESLint `v9` (default) [flat configuration](https://eslint.org/docs/latest/use/configure/configuration-files), can now be found. |
4 | 4 |
|
5 |
| -Usage with ESLint `9.x` is described. |
6 |
| - |
7 |
| -## Introduction |
8 |
| - |
9 |
| -[ESLint v9.0.0](https://eslint.org/blog/2024/04/eslint-v9.0.0-released/) was released on April 5, 2024, establishing flat config as the default for this version. |
10 |
| - |
11 |
| -Previously, ESLint had announced in their blog post [Flat config rollout plans](https://eslint.org/blog/2023/10/flat-config-rollout-plans/) in October 2023 that flat config was planned to be the default in ESLint `v9.0.0` and that the eslintrc configuration system is planned to be removed in the future ESLint `v10.0.0`. |
12 |
| - |
13 |
| -The following information details installation and usage examples for `eslint-plugin-cypress` together with related plugins in an ESLint flat config environment. |
14 |
| - |
15 |
| -## Installation |
16 |
| - |
17 |
| -Use a minimum ESLint `9.x`. |
18 |
| - |
19 |
| -```shell |
20 |
| -npm install eslint eslint-plugin-cypress --save-dev |
21 |
| -``` |
22 |
| - |
23 |
| -or |
24 |
| - |
25 |
| -```shell |
26 |
| -yarn add eslint eslint-plugin-cypress --dev |
27 |
| -``` |
28 |
| - |
29 |
| -## Usage examples |
30 |
| - |
31 |
| -Add a flat configuration file `eslint.config.mjs` to the root directory of your Cypress project and include the following instructions to import the available flat configurations using: |
32 |
| - |
33 |
| -```shell |
34 |
| -import pluginCypress from 'eslint-plugin-cypress/flat' |
35 |
| -``` |
36 |
| - |
37 |
| -There are two specific flat configurations available: |
38 |
| - |
39 |
| -| Configuration | Content | |
40 |
| -| --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | |
41 |
| -| `configs.globals` | defines globals `cy`, `Cypress`, `expect`, `assert` and `chai` used in Cypress test specs as well as `globals.browser` and `globals.mocha` from [globals](https://www.npmjs.com/package/globals). This version no longer specifies `languageOptions` for `ecmaVersion` and `sourceType` - see ESLint [JavaScript languageOptions](https://eslint.org/docs/latest/use/configure/language-options#specifying-javascript-options). There are no default rules enabled in this configuration. | |
42 |
| -| `configs.recommended` | enables [recommended Rules](README.md#rules). It includes also `configs.global` (see above) | |
43 |
| - |
44 |
| -In the following sections, different examples of possible configuration file contents are given, together with some brief explanations. Adapt these examples according to your needs. |
45 |
| - |
46 |
| -### Cypress |
47 |
| - |
48 |
| -All rules from `eslint-plugin-cypress` are available through `eslint-plugin-cypress/flat`. |
49 |
| -- [cypress/unsafe-to-chain-command](https://github.com/cypress-io/eslint-plugin-cypress/blob/master/docs/rules/unsafe-to-chain-command.md) is active and set to `error` |
50 |
| - |
51 |
| -```js |
52 |
| -import pluginCypress from 'eslint-plugin-cypress/flat' |
53 |
| -export default [ |
54 |
| - { |
55 |
| - plugins: { |
56 |
| - cypress: pluginCypress |
57 |
| - }, |
58 |
| - rules: { |
59 |
| - 'cypress/unsafe-to-chain-command': 'error' |
60 |
| - } |
61 |
| - } |
62 |
| -] |
63 |
| -``` |
64 |
| - |
65 |
| -### Cypress recommended |
66 |
| - |
67 |
| -The `eslint-plugin-cypress` [recommended rules](README.md#rules) `configs.recommended` are activated, except for |
68 |
| -- [cypress/no-unnecessary-waiting](https://github.com/cypress-io/eslint-plugin-cypress/blob/master/docs/rules/no-unnecessary-waiting.md) set to `off` |
69 |
| - |
70 |
| -```js |
71 |
| -import pluginCypress from 'eslint-plugin-cypress/flat' |
72 |
| -export default [ |
73 |
| - pluginCypress.configs.recommended, |
74 |
| - { |
75 |
| - rules: { |
76 |
| - 'cypress/no-unnecessary-waiting': 'off' |
77 |
| - } |
78 |
| - } |
79 |
| -] |
80 |
| -``` |
81 |
| - |
82 |
| -### Cypress globals |
83 |
| - |
84 |
| -The `configs.globals` are activated. |
85 |
| - |
86 |
| -```js |
87 |
| -import pluginCypress from 'eslint-plugin-cypress/flat' |
88 |
| -export default [ |
89 |
| - pluginCypress.configs.globals |
90 |
| -] |
91 |
| -``` |
92 |
| - |
93 |
| -### Cypress and Mocha recommended |
94 |
| - |
95 |
| -[eslint-plugin-mocha](https://www.npmjs.com/package/eslint-plugin-mocha) is added to the example [Cypress recommended](#cypress-recommended). This plugin offers a flat file recommended option `configs.flat.recommended`. |
96 |
| - |
97 |
| -The settings for individual `mocha` rules from the `configs.flat.recommended` option are changed. |
98 |
| -- [mocha/no-exclusive-tests](https://github.com/lo1tuma/eslint-plugin-mocha/blob/main/docs/rules/no-exclusive-tests.md) and [mocha/no-skipped-tests](https://github.com/lo1tuma/eslint-plugin-mocha/blob/main/docs/rules/no-skipped-tests.md) are set to `error` instead of `warn` |
99 |
| -- [mocha/no-mocha-arrows](https://github.com/lo1tuma/eslint-plugin-mocha/blob/main/docs/rules/no-mocha-arrows.md) is set to `off` instead of `error` |
100 |
| - |
101 |
| -```shell |
102 |
| -npm install eslint-plugin-mocha@^10.4.3 --save-dev |
103 |
| -``` |
104 |
| - |
105 |
| -```js |
106 |
| -import pluginMocha from 'eslint-plugin-mocha' |
107 |
| -import pluginCypress from 'eslint-plugin-cypress/flat' |
108 |
| -export default [ |
109 |
| - pluginMocha.configs.flat.recommended, |
110 |
| - pluginCypress.configs.recommended, |
111 |
| - { |
112 |
| - rules: { |
113 |
| - 'mocha/no-exclusive-tests': 'error', |
114 |
| - 'mocha/no-skipped-tests': 'error', |
115 |
| - 'mocha/no-mocha-arrows': 'off', |
116 |
| - 'cypress/no-unnecessary-waiting': 'off' |
117 |
| - } |
118 |
| - } |
119 |
| -] |
120 |
| -``` |
121 |
| - |
122 |
| -### Cypress and Chai recommended |
123 |
| - |
124 |
| -[eslint-plugin-chai-friendly](https://www.npmjs.com/package/eslint-plugin-chai-friendly) is combined with the Cypress plugin `eslint-plugin-cypress`. |
125 |
| - |
126 |
| -The recommended rules for both plugins are used: `pluginCypress.configs.recommended` and `pluginChaiFriendly.configs.recommendedFlat`: |
127 |
| - |
128 |
| -```shell |
129 |
| -npm install eslint-plugin-chai-friendly@^1.0.1 --save-dev |
130 |
| -``` |
131 |
| - |
132 |
| -```js |
133 |
| -import pluginCypress from 'eslint-plugin-cypress/flat' |
134 |
| -import pluginChaiFriendly from 'eslint-plugin-chai-friendly' |
135 |
| -export default [ |
136 |
| - pluginCypress.configs.recommended, |
137 |
| - pluginChaiFriendly.configs.recommendedFlat, |
138 |
| - { |
139 |
| - rules: { |
140 |
| - 'cypress/no-unnecessary-waiting': 'off', |
141 |
| - }, |
142 |
| - } |
143 |
| -] |
144 |
| -``` |
| 5 | +For instructions on using a deprecated [eslintrc-type](https://eslint.org/docs/latest/use/configure/configuration-files-deprecated) config file from previous ESLint `v8` versions and below, please refer to the [ESLINTRC-CONFIG](./ESLINTRC-CONFIG.md) document. |
0 commit comments