test: replace and activate json linting

[MikeMcC399]

Issue

• The current linting setup does not catch any json errors in the examples.

• eslint-plugin-json-format is installed, however it is not configured in .eslintrc to be active in terms of the plugin itself, nor the filename extension *.json.

Steps to reproduce

Ubuntu 22.04.4 LTS, Node.js 20.12.2 LTS

Execute

git clone https://github.com/cypress-io/cypress-example-kitchensink
cd cypress-example-kitchensink
npm ci
npm run lint

and confirm that no errors are reported.

Now temporarily delete the end-of-line commas in cypress/fixtures/example.json and save the file.

Execute again

npm run lint

and note that no errors are reported even though the JSON file above is incorrect.

JSON Plugins

• eslint-plugin-json-format was last published 5 years ago and it seems unlikely that it will be maintained in the future, or that it will offer ESLint 9.x compatibility with flat config file support.

• eslint-plugin-jsonc is a maintained plugin which provides linting for JSON, JSONC and JSON5 files. It is compatible with ESLint >= 6. It provides legacy and flat config file support.

Options

Correcting the configuration for eslint-plugin-json-format would only be a short-term solution. eslint-plugin-jsonc is used instead.

Change

1. Uninstall eslint-plugin-json-format
2. Install eslint-plugin-jsonc
3. Add plugin:jsonc/recommended-with-json configuration to extends of .eslintrc

[cypress-app-bot]

• Create a Draft Pull Request if your PR is not ready for review. Mark the PR as Ready for Review when you're ready for a Cypress team member to review the PR.

[MikeMcC399]

Verification

Ubuntu 22.04.4 LTS, Node.js 20.12.2 LTS

Execute

git clone --branch replace/json-linting https://github.com/MikeMcC399/cypress-example-kitchensink --depth 1
cd cypress-example-kitchensink
npm ci
npm run lint

and confirm that no errors are reported.

Now temporarily delete the end-of-line commas in the local copy of cypress/fixtures/example.json and save the file.

Execute again

npm run lint

and note that a JSON error is correctly detected in an error message similar to the following:

$ npm run lint

> cypress-example-kitchensink@0.0.0-development lint
> eslint --fix cypress app/assets/js/scripts.js

.../cypress-example-kitchensink/cypress/fixtures/example.json
  3:3  error  Parsing error: Unexpected token '"email"'

✖ 1 problem (1 error, 0 warnings)

[cypress-app-bot]

🎉 This PR is included in version 2.0.7 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀