Simplify - Articles tagged with ReactPersonal website of Saša Jovanićhttps://www.simplify.ba/articles/tags/react/2021-12-17T19:12:00+01:00Saša JovanićEditing React jsx files using GNU Emacshttps://www.simplify.ba/articles/2016/03/15/editing-react-rjx-files-using-gnu-emacs/2016-03-15T19:56:00+01:002016-03-15T20:07:40+01:00Saša Jovanić<p>I finally started using <a href="https://facebook.github.io/react/">React</a> and this article explains my <abbr title="GNU is Not Unix">GNU</abbr> Emacs setup for editing rjx files.</p>
<h2 id="web-mode">web-mode</h2>
<p><a href="http://web-mode.org/">web-mode</a> is currently the best choice for editing rjx files and every new version brings better support. You can install it using <a href="http://melpa.org">Melpa</a> and enable it in your Emacs init files:</p>
<pre class="highlight common_lisp"><code><span class="p">(</span><span class="nv">add-to-list</span> <span class="ss">'auto-mode-alist</span> <span class="o">'</span><span class="p">(</span><span class="s">"\\.jsx\\'"</span> <span class="o">.</span> <span class="nv">web-mode</span><span class="p">))</span>
</code></pre>
<h2 id="snippets">Snippets</h2>
<p>Just install <a href="https://github.com/johnmastro/react-snippets.el">react-snippets</a> from Melpa.</p>
<h2 id="code-checking">Code checking</h2>
<p>As usual, I use <a href="http://eslint.org/">ESLint</a>. With React we'll need <a href="https://www.npmjs.com/package/eslint-plugin-react">eslint-plugin-react</a> plugin. Install those with <abbr title="Node package manager">NPM</abbr>:</p>
<pre class="highlight plaintext"><code>npm install --save-dev eslint eslint-plugin-react
</code></pre>
<p>You can install those globally, but I prefer per project installation. If you do it like me (per project), don't forget to create <code>.dir-locals.el</code> as I <a href="/articles/2016/02/14/node-modules-bin-in-path/">described in one of my previous posts</a>.</p>
<p>Create <code>.eslintrc</code> file with following:</p>
<pre class="highlight json"><code><span class="p">{</span><span class="w">
</span><span class="nt">"plugins"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="w">
</span><span class="s2">"react"</span><span class="w">
</span><span class="p">],</span><span class="w">
</span><span class="nt">"parserOptions"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w">
</span><span class="nt">"ecmaFeatures"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w">
</span><span class="nt">"jsx"</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span><span class="p">}</span><span class="w">
</span><span class="p">}</span><span class="w">
</span><span class="p">}</span><span class="w">
</span></code></pre>
<p>Please check <a href="http://eslint.org/docs/user-guide/configuring">ESLint documentation</a> for other configuration options.</p>
<p>Install <a href="https://github.com/flycheck/flycheck">flycheck</a> from Melpa and configure it to run ESLint:</p>
<pre class="highlight common_lisp"><code><span class="p">(</span><span class="nv">global-flycheck-mode</span><span class="p">)</span>
<span class="p">(</span><span class="nv">flycheck-add-mode</span> <span class="ss">'javascript-eslint</span> <span class="ss">'web-mode</span><span class="p">)</span>
</code></pre>
<p>You may find other articles on the Internet describing how to setup <code>JSXHint</code> with Emacs and flycheck. JSXHint is <a href="https://medium.com/@STRML/ending-jsxhint-1c09ed36cca9">deprecated</a>.</p>
<p>You may also like my other article about <a href="/articles/2016/02/14/linting-javascript-in-gnu-emacs/">linting JavaScript with <abbr title="GNU is Not Unix">GNU</abbr> Emacs</a>.</p>