FG
🛠️ Developer Tools

Investigate supporting ES6/JSX

Freshabout 21 hours ago
Mar 14, 20260 views
Confidence Score55%
55%

Problem

After many requests and some soul-searching, I've come around to believing that ESLint should optionally support JSX. My rationale is based on: 1. The growing popularity of React/JSX 2. The existence of Esprima-FB and estraverse-FB There is still the issue of escope not supporting es6 scoping rules and relying on estraverse directly, but that may be solvable. The way I'm envisioning this working is by allowing you to specify one of four JavaScript modes: 1. ECMAScript 3 2. ECMAScript 5 3. ECMAScript 6 4. JSX That means ECMAScript 6 support is separate from JSX support. You opt-in to JSX, you get whatever is in Esprima-FB vs. opting in to ES6, which should not support JSX syntax. This issue is to gather investigation data to determine how this can be achieved and what blockers might exist.

Unverified for your environment

Select your OS to check compatibility.

1 Fix

Canonical Fix
Unverified Fix
New Fix – Awaiting Verification

Implement Optional JSX Support in ESLint

Medium Risk

The current ESLint architecture does not support JSX syntax due to its reliance on escope, which lacks ES6 scoping rules. Additionally, the integration of Esprima-FB and estraverse-FB is necessary to handle JSX parsing effectively. This limitation hinders developers using React and JSX, which are increasingly popular in modern JavaScript development.

Awaiting Verification

Be the first to verify this fix

  1. 1

    Research JSX Parsing with Esprima-FB

    Investigate how Esprima-FB can be utilized to parse JSX syntax correctly. This involves reviewing the documentation and existing implementations to understand how JSX is currently handled and what modifications are necessary to integrate it into ESLint.

    javascript
    const esprima = require('esprima-fb');
const code = '<div>Hello World</div>';
const ast = esprima.parse(code, { jsx: true });
  2. 2

    Modify ESLint to Accept JSX Mode

    Update the ESLint configuration to allow users to specify a JSX mode. This will involve modifying the ESLint core to recognize a new option for JSX and ensuring it does not conflict with existing ES6 support.

    javascript
    module.exports = {
  parserOptions: {
    ecmaVersion: 6,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true
    }
  }
};
  3. 3

    Integrate estraverse-FB for Scope Management

    Investigate and integrate estraverse-FB to manage scopes correctly when JSX is enabled. This may involve modifying the way ESLint traverses the AST to account for JSX-specific nodes and their scopes.

    javascript
    const estraverse = require('estraverse-fb');
estraverse.replace(ast, {
  enter: function(node) {
    // Handle JSX nodes
  }
});
  4. 4

    Test Compatibility with Existing ESLint Rules

    Run a series of tests to ensure that existing ESLint rules work correctly with the new JSX mode. This includes creating test cases that cover various JSX scenarios and ensuring that linting behaves as expected.

    bash
    npm run lint -- --ext .jsx,.js
  5. 5

    Document New Configuration Options

    Update the ESLint documentation to reflect the new configuration options for enabling JSX support. This should include examples and guidelines on how to transition from standard JavaScript to JSX mode.

Validation

To confirm the fix worked, create a sample React component using JSX and run ESLint with the new configuration. Ensure that ESLint correctly identifies any linting issues and does not throw errors for valid JSX syntax.

Sign in to verify this fix

Environment

Submitted by

AC

Alex Chen

2450 rep

Tags

eslintlintingjavascriptenhancementcoreacceptedneeds-bikeshedding