JSX không được phép trong các tập tin với phần mở rộng '.js' với eslint-config-Airbnb

Question

Tôi đã cài đặt eslint-config-airbnb đó là nghĩa vụ để sẵn cấu hình ESLINT cho Phản ứng:

xuất khẩu mặc định của chúng tôi bao gồm tất cả các quy tắc của chúng tôi ESLint , bao gồm ECMAScript 6+ và React. Nó yêu cầu eslint, eslint-plugin-import, eslint-plugin-react và eslint-plugin-jsx-a11y.

My .eslintrc mở rộng cấu hình của nó:

{ "extends": "eslint-config-airbnb", 
    "env": { 
    "browser": true, 
    "node": true, 
    "mocha": true 
    }, 
    "rules": { 
    "new-cap": [2, { "capIsNewExceptions": ["List", "Map", "Set"] }], 
    "react/no-multi-comp": 0, 
    "import/default": 0, 
    "import/no-duplicates": 0, 
    "import/named": 0, 
    "import/namespace": 0, 
    "import/no-unresolved": 0, 
    "import/no-named-as-default": 2, 
    "comma-dangle": 0, // not sure why airbnb turned this on. gross! 
    "indent": [2, 2, {"SwitchCase": 1}], 
    "no-console": 0, 
    "no-alert": 0, 
    "linebreak-style": 0 
    }, 
    "plugins": [ 
    "react", "import" 
    ], 
    "settings": { 
    "import/parser": "babel-eslint", 
    "import/resolve": { 
     "moduleDirectory": ["node_modules", "src"] 
    } 
    }, 
    "globals": { 
    "__DEVELOPMENT__": true, 
    "__CLIENT__": true, 
    "__SERVER__": true, 
    "__DISABLE_SSR__": true, 
    "__DEVTOOLS__": true, 
    "socket": true, 
    "webpackIsomorphicTools": true 
    } 
} 

Unfortunatelly Tôi nhận được lỗi sau khi linting một file .js với Phản ứng đang JSX bên trong nó:

error JSX not allowed in files with extension '.js'    react/jsx-filename-extension 

Chẳng phải eslint-config-airbnb được cấu hình phản ứng để hỗ trợ JSX, như đã nói?

Điều gì nên được thực hiện để xóa lỗi đó?

Answer 1

Hoặc thay đổi tiện ích mở rộng tệp thành .jsx như đã đề cập hoặc vô hiệu hóa quy tắc jsx-filename-extension. Bạn có thể thêm thông tin sau vào cấu hình của mình để cho phép .js tiện ích mở rộng cho JSX.

"rules": { 
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }], 
} 

Answer 2

Để nói thêm về Martin's câu trả lời, có vẻ như nó không phải là có thể, hiện nay, sử dụng JSX trong Phản ứng Native. A PR được tạo nhưng được hoàn nguyên do những lo ngại về phân mảnh và hậu quả không xác định của việc có những thứ như index.ios.jsx. Tôi không chắc làm thế nào AirBnb làm việc xung quanh này hoặc nếu họ làm, nhưng tôi đã sử dụng cơ bản cùng một khối rules như Martin.