feat: add support for Flat Config #993

michaelfaith · 2024-06-18T10:19:09Z

This change adds support for ESLint's new Flat config system. It maintains backwards compatibility with eslintrc
style configs as well.

To achieve this, we're now dynamically creating four configs: two are the original recommended and strict, and the other two are the new flat/recommended and flat/strict. The two flat ones are setup with the new config format, while the original two have the same options as before.

Usage

Legacy

{
  "extends": ["plugin:jsx-a11y/recommended"]
}

Flat

import globals from 'globals';
import js from '@eslint/js';
import jsxA11y from 'eslint-plugin-jsx-a11y';

export default [
  js.configs.recommended,
  jsxA11y.flatConfigs.recommended,
  {
    files: ['**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'],
    languageOptions: {
      ecmaVersion: 'latest',
      sourceType: 'module',
      globals: globals.browser,
    },
    ignores: ['dist', 'eslint.config.js'],
    rules: {
      'no-unused-vars': 'warn',
      'jsx-a11y/anchor-ambiguous-text': 'warn',
      'jsx-a11y/anchor-is-valid': 'warn',
    },
  },
];

And just to be clear, this does not close the v9 support Issue, as there may be additional work needed on the rules themselves to enable compatibility with v9. This change is solely focused on providing support for the new Flat Config.

This change adds support for ESLint's new Flat config system. It maintains backwards compatibility with eslintrc style configs as well. To achieve this, we're now dynamically creating four configs: two are the original `recommended` and `strict`, and the other two are the new `flat/recommended` and `flat/strict`. The two `flat` ones are setup with the new config format, while the original two have the same options as before. Usage Legacy ```json { "extends": ["plugin:jsx-a11y/recommended"] } ``` Flat ```js import globals from 'globals'; import js from '@eslint/js'; import jsxA11y from 'eslint-plugin-jsx-a11y'; export default [ js.configs.recommended, jsxA11y.flatConfigs.recommended, { files: ['**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'], languageOptions: { ecmaVersion: 'latest', sourceType: 'module', globals: globals.browser, }, ignores: ['dist', 'eslint.config.js'], rules: { 'no-unused-vars': 'warn', 'jsx-a11y/anchor-ambiguous-text': 'warn', 'jsx-a11y/anchor-is-valid': 'warn', }, }, ]; ```

socket-security · 2024-06-18T10:19:52Z

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher
npm/@eslint/js@9.5.0	None	`0`	14.2 kB	eslintbot
npm/cross-env@7.0.3	environment Transitive: filesystem, shell	`+6`	81.2 kB	kentcdodds
npm/globals@15.6.0	None	`0`	170 kB	sindresorhus
npm/react-dom@18.3.1	environment	`+3`	4.63 MB	react-bot
npm/react@18.3.1	environment	`+2`	339 kB	react-bot

View full report↗︎

codecov · 2024-06-18T10:35:31Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 98.48%. Comparing base (0d5321a) to head (bb7d65b).
Report is 6 commits behind head on main.

❗ Current head bb7d65b differs from pull request most recent head 6b5f096

Please upload reports for the commit 6b5f096 to get more accurate results.

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #993      +/-   ##
==========================================
- Coverage   99.02%   98.48%   -0.54%     
==========================================
  Files         105      107       +2     
  Lines        1636     1650      +14     
  Branches      579      581       +2     
==========================================
+ Hits         1620     1625       +5     
- Misses         16       25       +9

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

michaelfaith · 2024-06-18T10:47:14Z

Looks like the rule doc generator may need new icons for the two new flat configs. Not sure if you want to use the same check and lock as the legacy configs. Since the rulesets are the same, it does seem a bit redundant to have both in the table, but I'm not sure how you'd want to represent that.

michaelfaith · 2024-06-18T11:04:41Z

I went ahead and set the two flat/ configs to ignore on the doc generator, since they're mirrors of recommended and strict. ~~Though it still looks like it's having issues with some formatting (maybe because I'm on Windows and line endings generated on my machine differ?)~~. I reran the generate from my Mac and it resolved the formatting issue.

.eslintignore

README.md

ljharb · 2024-06-18T19:30:47Z

README.md

+const jsxA11y = require('eslint-plugin-jsx-a11y');
+
+export default [
+  jsxA11y.configs['flat/recommended'],


this might be nicer to use as a flat object, with a recommended property?

I like that. I was going back and forth with that, and landed on this approach because I saw a few others doing it. But there's no real strong need to have them added to the legacy configs object. I'll make that update.

What do you think about flatConfigs rather than flat so that it parallels the configs prop?

// Create configs to plugin object const configs = { recommended: createConfig(recommendedRules), strict: createConfig(strictRules), }; const flatConfigs = { recommended: createConfig(recommendedRules, 'recommended'), strict: createConfig(strictRules, 'strict'), }; module.exports = { ...jsxA11y, configs, flatConfigs };

I went ahead and updated with the above. Let me know what you think about that.

examples/flat-cjs/.gitignore

ljharb · 2024-06-18T19:32:56Z

examples/flat-cjs/package.json

+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.5.0",
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
+    "@vitejs/plugin-react": "^4.2.1",
+    "cross-env": "^7.0.3",
+    "eslint": "^8.57.0",
+    "eslint-plugin-jsx-a11y": "file:../..",
+    "globals": "^15.6.0",
+    "vite": "^5.2.0"


do we really need all these deps in the repo to showcase eslint config code?

I guess I was aiming to have it be as "real world" of an example as possible. I just generated a new React app using vite and left everything as is, except for the lint config.

we don't need a working app to demonstrate linting, though.

I've removed vite, its config, and associated build/test commands (along with the boilerplate README and .gitignore). I did leave react, react-dom and their associated types.

Went ahead and removed the @types/* too.

package.json

ljharb

LGTM - i'll make some tweaks so we can run the examples tests in CI, but otherwise this seems like it'll work.

ljharb · 2024-06-20T06:29:23Z

v6.9.0 has been released.

michaelfaith mentioned this pull request Jun 18, 2024

feat: support new config system #891

Closed

michaelfaith force-pushed the feat/flag-config-support branch from f69dfa3 to 25b13a2 Compare June 18, 2024 10:23

michaelfaith force-pushed the feat/flag-config-support branch from 25b13a2 to 12fff83 Compare June 18, 2024 11:03

michaelfaith force-pushed the feat/flag-config-support branch from 12fff83 to 72c98fe Compare June 18, 2024 13:17

ljharb reviewed Jun 18, 2024

View reviewed changes

michaelfaith force-pushed the feat/flag-config-support branch 2 times, most recently from b08c258 to bb7d65b Compare June 18, 2024 21:31

ljharb approved these changes Jun 18, 2024

View reviewed changes

michaelfaith mentioned this pull request Jun 19, 2024

📈 Tracking: Flat Config support eslint/eslint#18093

Open

39 tasks

ljharb force-pushed the feat/flag-config-support branch from bb7d65b to 6b5f096 Compare June 19, 2024 20:37

ljharb merged commit 6b5f096 into jsx-eslint:main Jun 19, 2024
99 of 100 checks passed

ljharb mentioned this pull request Jun 19, 2024

Add support for ESLint 9 #978

Closed

michaelfaith deleted the feat/flag-config-support branch June 20, 2024 10:12

curdin mentioned this pull request Jul 2, 2024

eslint v9 support airbnb/javascript#2961

Open

14 tasks

wakamsha mentioned this pull request Jul 25, 2024

Tracking: ESLint v9 support moneyforward/eslint-config-moneyforward#269

Open

ljharb mentioned this pull request Aug 7, 2024

Migrate to using languageOptions.parserOptions for Eslint 9+ #1001

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add support for Flat Config #993

feat: add support for Flat Config #993

michaelfaith commented Jun 18, 2024 •

edited

Loading

socket-security bot commented Jun 18, 2024 •

edited

Loading

codecov bot commented Jun 18, 2024 •

edited

Loading

michaelfaith commented Jun 18, 2024

michaelfaith commented Jun 18, 2024 •

edited

Loading

ljharb Jun 18, 2024

michaelfaith Jun 18, 2024

michaelfaith Jun 18, 2024

michaelfaith Jun 18, 2024

michaelfaith Jun 18, 2024

ljharb Jun 18, 2024

michaelfaith Jun 18, 2024

ljharb Jun 18, 2024

michaelfaith Jun 18, 2024

michaelfaith Jun 18, 2024

ljharb left a comment

ljharb commented Jun 20, 2024

feat: add support for Flat Config #993

feat: add support for Flat Config #993

Conversation

michaelfaith commented Jun 18, 2024 • edited Loading

Usage

Legacy

Flat

socket-security bot commented Jun 18, 2024 • edited Loading

codecov bot commented Jun 18, 2024 • edited Loading

Codecov Report

michaelfaith commented Jun 18, 2024

michaelfaith commented Jun 18, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ljharb left a comment

Choose a reason for hiding this comment

ljharb commented Jun 20, 2024

michaelfaith commented Jun 18, 2024 •

edited

Loading

socket-security bot commented Jun 18, 2024 •

edited

Loading

codecov bot commented Jun 18, 2024 •

edited

Loading

michaelfaith commented Jun 18, 2024 •

edited

Loading