{"id":13678114,"url":"https://github.com/felipeochoa/rjsx-mode","last_synced_at":"2025-04-04T22:07:33.028Z","repository":{"id":43619177,"uuid":"71516361","full_name":"felipeochoa/rjsx-mode","owner":"felipeochoa","description":"A JSX major mode for Emacs","archived":false,"fork":false,"pushed_at":"2020-10-28T13:59:29.000Z","size":366,"stargazers_count":642,"open_issues_count":27,"forks_count":32,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-28T21:07:12.497Z","etag":null,"topics":["emacs","highlighting","jsx","major-mode","parsing","rjsx-mode"],"latest_commit_sha":null,"homepage":"https://github.com/felipeochoa/rjsx-mode","language":"Emacs Lisp","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/felipeochoa.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-10-21T00:50:56.000Z","updated_at":"2025-01-23T21:31:28.000Z","dependencies_parsed_at":"2022-08-12T10:41:57.806Z","dependency_job_id":null,"html_url":"https://github.com/felipeochoa/rjsx-mode","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/felipeochoa%2Frjsx-mode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/felipeochoa%2Frjsx-mode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/felipeochoa%2Frjsx-mode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/felipeochoa%2Frjsx-mode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/felipeochoa","download_url":"https://codeload.github.com/felipeochoa/rjsx-mode/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247256112,"owners_count":20909240,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["emacs","highlighting","jsx","major-mode","parsing","rjsx-mode"],"created_at":"2024-08-02T13:00:50.262Z","updated_at":"2025-04-04T22:07:32.999Z","avatar_url":"https://github.com/felipeochoa.png","language":"Emacs Lisp","funding_links":[],"categories":["Emacs Lisp"],"sub_categories":[],"readme":"# rjsx-mode: A major mode for editing JSX files\n[![MELPA](https://melpa.org/packages/rjsx-mode-badge.svg)](https://melpa.org/#/rjsx-mode)\n[![MELPA Stable](https://stable.melpa.org/packages/rjsx-mode-badge.svg)](https://stable.melpa.org/#/rjsx-mode)\n[![Build Status](https://travis-ci.org/felipeochoa/rjsx-mode.svg?branch=master)](https://travis-ci.org/felipeochoa/rjsx-mode)\n\nThis mode derives from `js2-mode`, extending its parser to support JSX syntax\naccording to the [official spec](https://facebook.github.io/jsx/).  This\nmeans you get all of the `js2` features plus proper syntax checking\nand highlighting of JSX code blocks.\n\nHere's a screenshot of it in action:\n\n\u003cimg src=\"demo.png\" width=\"600\" alt=\"Actual syntax highlighting and no spurious errors!\"\u003e\n\n\n## Installing\n\n`rjsx-mode` is available on [Melpa](https://melpa.org/), so if you have that\nrepository configured you can just `package-list-packages` and install it from there.\n(If not, you can follow [their guide](https://melpa.org/#/getting-started) on\ngetting started). `rjsx-mode` automatically registers itself for `*.jsx` files,\nbut you can use `(add-to-list 'auto-mode-alist '(\"components\\\\/.*\\\\.js\\\\'\" . rjsx-mode))`\n\nAlternatively, you can download `rjsx-mode.el` from this repository and use\n`load-file` or similar to add it to your current session.\n\n## Features\n\n`js2-mode` does not include a JSX parser, but rather an E4X parser, which\nmeans it gets confused with certain JSX constructs. This mode extends the\n`js2** parser to support all JSX constructs and proper syntax highlighting\nand **indentation**.\n\n`rjsx-mode` adds some electricity to `\u003c` and `C-d` to make adding new\nJSX elements less repetitive:\n\n* `\u003c` inserts `\u003c/\u003e` whenever it would start a new JSX node (and simply\n  inserts `\u003c` otherwise)\n* `\u003e` or `C-d` right before the slash in a self-closing tag\n  automatically inserts a closing tag and places point inside the\n  element\n\nThe result is you can do the following:\n\n\u003cimg src=\"key-demo.gif\" width=\"200\" alt=\"Quickly and easily add new components\"\u003e\n\n* `C-c C-r` lets you rename the enclosing tag\n\nSome features that this mode adds to `js2`:\n\n* Proper indentation of JSX regardless of how you write it. (No need to wrap\n  in parentheses!)\n* Highlighting JSX tag names and attributes (using the `rjsx-tag` and\n  `rjsx-attr` faces)\n* Parsing the spread operator `{...otherProps}`\n* `\u0026\u0026` and `||` in child expressions `\u003cdiv\u003e{cond \u0026\u0026 \u003cBigComponent/\u003e}\u003c/div\u003e`\n* Ternary expressions `\u003cdiv\u003e{toggle ? \u003cToggleOn /\u003e : \u003cToggleOff\n  /\u003e}\u003c/div\u003e`\n\nIf you don't like this behavior, you can disable it by adding the following to\nyour init file:\n\n```elisp\n(with-eval-after-load 'rjsx-mode\n  (define-key rjsx-mode-map \"\u003c\" nil)\n  (define-key rjsx-mode-map (kbd \"C-d\") nil)\n  (define-key rjsx-mode-map \"\u003e\" nil))\n```\n\nAdditionally, since `rjsx-mode` extends the `js2` AST, utilities using the\nparse tree gain access to the JSX structure.\n\n### Indentation\n\n`rjsx-mode` extends the built-in javascript indentation engine to correctly\nsupport JSX. You can configue the depth of indentation using `js-indent-level`\nand `sgml-basic-offset`, along with the various `js-indent-` variables.\n\n**Indenting with tabs**: This is not currently supported. You can either submit\na PR if interested (look at issue #85) or revert to using the built-in\nindentation mode by adding `(setq-local indent-line-function\n'js-jsx-indent-line)` to your `rjsx-mode-hook`.\n\n## Bugs, contributing\n\nPlease submit any bugs or feature requests on the GitHub tracker. Since this\nmode is based on `js2`, it is possible that bugs you encounter with it stem from\nthere. Please try reproducing bugs using `js2-mode` if relevant. If the bug\nis in `js2`, please report it using `M-x report-emacs-bug`.\n\n## License\n\nThis project is licensed under the MIT license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffelipeochoa%2Frjsx-mode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffelipeochoa%2Frjsx-mode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffelipeochoa%2Frjsx-mode/lists"}