Browse Source

New post

master
Nicolas Petton 3 years ago
parent
commit
54de96a1c5
Signed by: nico GPG Key ID: 233587A47C207910
14 changed files with 616 additions and 16 deletions
  1. +29
    -0
      _layouts/home.html
  2. +1
    -0
      _posts/2017-04-21-hello-world.markdown
  3. +125
    -0
      _posts/2017-04-23-emacs-setup-javascript.markdown
  4. +17
    -0
      _site/css/cafe.css
  5. +281
    -0
      _site/emacs/javascript/setup/2017/04/23/emacs-setup-javascript.html
  6. +117
    -2
      _site/feed.xml
  7. BIN
     
  8. BIN
     
  9. BIN
     
  10. +29
    -14
      _site/index.html
  11. +17
    -0
      css/cafe.css
  12. BIN
     
  13. BIN
     
  14. BIN
     

+ 29
- 0
_layouts/home.html View File

@@ -0,0 +1,29 @@
---
layout: default
---

<div class="home">

<h1 class="page-heading">Posts</h1>
{{ content }}

<ul class="post-list">
{% for post in site.posts %}
<li>
{% assign date_format = site.minima.date_format | default: "%b %-d, %Y" %}
<span class="post-meta">{{ post.date | date: date_format }}</span>

<h2>
<a class="post-link" href="{{ post.url | relative_url }}">{{ post.title | escape }}</a>
</h2>
{% if post.description %}
<div class="post-desc post-meta">{{ post.description }}</div>
{% endif %}
</li>
{% endfor %}
</ul>

<p class="rss-subscribe">subscribe <a href="{{ "/feed.xml" | relative_url }}">via RSS</a></p>

</div>

+ 1
- 0
_posts/2017-04-21-hello-world.markdown View File

@@ -4,6 +4,7 @@ title: "M-x hello-world"
date: 2017-04-21 23:14:09 +0200
author: Nicolas Petton
categories: jekyll update
description: "Introducing this weblog."
---
All blogs should begin with an introductory post, so here we go.



+ 125
- 0
_posts/2017-04-23-emacs-setup-javascript.markdown View File

@@ -0,0 +1,125 @@
---
layout: post
title: "Setting up Emacs for JavaScript (part #1)"
date: 2017-04-23 14:50:00 +0200
author: Nicolas Petton
categories: emacs javascript setup
description: "A basic setup with js2-mode, refactorings & jumping to references/definitions."
---

There's a lot that can be done to make Emacs a great tool for JavaScript
development. So much that I had to split it up into several posts.

In this first article we'll see how to
setup [js2-mode](https://github.com/mooz/js2-mode) and two other packages that
rely upon it: [js2-refactor](https://github.com/magnars/js2-refactor)
and [xref-js2](https://github.com/nicolaspetton/xref-js2).

Emacs comes with a major mode for JavaScript named `js-mode`. While it is a
good major mode, we'll be using `js2-mode` instead, an external package that
extends `js-mode` and provides a very interesting feature: instead of using
regular expressions, it parses buffers and builds an AST for things like syntax
highlighting. While diverging a bit from the traditional "Emacs way of doing
things", this is really interesting, and used as the foundation for other
features like refactorings.

## Setting up js2-mode

If you haven't done it already, you should first setup `package.el` to
use [MELPA](https://melpa.org), then install and setup `js2-mode` like the
following:

M-x package-install RET js2-mode RET

{% highlight elisp %}
(require 'js2-mode)
(add-to-list 'auto-mode-alist '("\\.js\\'" . js2-mode))

;; Better imenu
(add-hook 'js2-mode-hook #'js2-imenu-extras-mode)
{% endhighlight %}

## js2-refactor and xref-js2

Now that we're using `js2-mode` for JavaScript buffers, let's take advantage its
capabilities of and install two other
packages: [js2-refactor](https://github.com/magnars/js2-refactor)
and [xref-js2](https://github.com/nicolaspetton/xref-js2).

`js2-refactor` adds powerful refactorings based on the AST generated by
`js2-mode`, and `xref-js2` makes it easy to jump to function references or
definitions.

`xref-js2` uses `ag` to perform searches, so you'll need to install it as well.

M-x package-install RET js2-refactor RET
M-x package-install RET xref-js2 RET

{% highlight elisp %}
(require 'js2-refactor)
(require 'xref-js2)

(add-hook 'js2-mode-hook #'js2-refactor-mode)
(js2r-add-keybindings-with-prefix "C-c C-r")
(define-key js2-mode-map (kbd "C-k") #'js2r-kill)

;; js-mode (which js2 is based on) binds "M-." which conflicts with xref, so
;; unbind it.
(define-key js-mode-map (kbd "M-.") nil)

(add-hook 'js2-mode-hook (lambda ()
(add-hook 'xref-backend-functions #'xref-js2-xref-backend nil t)))
{% endhighlight %}

Now that everything's setup, let's see how to use `js2-refactor` and `xref-js2`.

## Using js2-refactor

`js2-refactor` is a JavaScript refactoring library for emacs.

It provides a collection of refactoring functions leveraging the AST provided by
`js2-mode`.

Refactorings go from inlining/extracting variables to converting ternary
operators to if statements.
The [README](https://github.com/magnars/js2-refactor) provides the full list of
keybindings.

One minor tweak that I really couldn't live without is binding `js2r-kill` to
`C-k` in JS buffers:

{% highlight elisp %}
(define-key js2-mode-map (kbd "C-k") #'js2r-kill)
{% endhighlight%}

This command is very similar to killing in `paredit`: It kills up to the end of
the line, but always keeping the AST valid.

Here's a usage example of `js2-refactor`: renaming a function parameter and
inlining a variable.

![Refactorings](/img/js2-refactorings.gif)

## Using xref-js2

`xref-js2` adds support for quickly jumping to function definitions or
references to JavaScript projects in Emacs (>= 25.1).

Instead of using a tag system, it relies on `ag` to query the codebase of a
project.

- `M-.` Jump to definition
- `M-?` Jump to references
- `M-,` Pop back to where `M-.` was last invoked.

Here's a usage example of `xref-js2`:

![Jumping to references](/img/xref-jump-to-references.gif)

## Until next time

You should now have a decent setup for `js2-mode` and associated tools.

We still have a lot to explore like linting, getting good auto-completion, using
snippets, setting up a REPL and debugger, etc. but I promised I would keep posts
short, so stay tuned for part #2!

+ 17
- 0
_site/css/cafe.css View File

@@ -9,3 +9,20 @@
.site-title img {
vertical-align: bottom;
}

.post-list h2 {
margin-bottom: 0;
}

.post-desc {
font-size: 16px;
}

.post-content {
font-size: 20px;
line-height: 1.6em;
}

.post-content h2 {
margin-top: 30px;
}

+ 281
- 0
_site/emacs/javascript/setup/2017/04/23/emacs-setup-javascript.html View File

@@ -0,0 +1,281 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Setting up Emacs for JavaScript (part #1)</title>
<meta name="description" content="There’s a lot that can be done to make Emacs a great tool for JavaScript development. So much that I had to split it up into several posts.">

<link rel="shortcut icon" type="image/png" href="/favicon.png"/>

<link rel="stylesheet" href="/assets/main.css">
<link rel="stylesheet" href="/css/cafe.css">
<link rel="canonical" href="https://emacs.cafe/emacs/javascript/setup/2017/04/23/emacs-setup-javascript.html">
<link rel="alternate" type="application/rss+xml" title="Emacs café" href="/feed.xml">
</head>


<body>

<header class="site-header" role="banner">

<div class="wrapper">
<a class="site-title" href="/"><img src="/img/emacscafe.png"/>Emacs café</a>
<nav class="site-nav">
<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger">
<span class="menu-icon">
<svg viewBox="0 0 18 15" width="18px" height="15px">
<path fill="#424242" d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.031C17.335,0,18,0.665,18,1.484L18,1.484z"/>
<path fill="#424242" d="M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0c0-0.82,0.665-1.484,1.484-1.484 h15.031C17.335,6.031,18,6.696,18,7.516L18,7.516z"/>
<path fill="#424242" d="M18,13.516C18,14.335,17.335,15,16.516,15H1.484C0.665,15,0,14.335,0,13.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.031C17.335,12.031,18,12.696,18,13.516L18,13.516z"/>
</svg>
</span>
</label>

<div class="trigger">
<a class="page-link" href="/about/">About Emacs café</a>
</div>
</nav>
</div>
</header>


<main class="page-content" aria-label="Content">
<div class="wrapper">
<article class="post" itemscope itemtype="http://schema.org/BlogPosting">

<header class="post-header">
<h1 class="post-title" itemprop="name headline">Setting up Emacs for JavaScript (part #1)</h1>
<p class="post-meta">
<time datetime="2017-04-23T14:50:00+02:00" itemprop="datePublished">
Apr 23, 2017
</time>
• <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">Nicolas Petton</span></span>
</p>
</header>

<div class="post-content" itemprop="articleBody">
<p>There’s a lot that can be done to make Emacs a great tool for JavaScript
development. So much that I had to split it up into several posts.</p>

<p>In this first article we’ll see how to
setup <a href="https://github.com/mooz/js2-mode">js2-mode</a> and two other packages that
rely upon it: <a href="https://github.com/magnars/js2-refactor">js2-refactor</a>
and <a href="https://github.com/nicolaspetton/xref-js2">xref-js2</a>.</p>

<p>Emacs comes with a major mode for JavaScript named <code class="highlighter-rouge">js-mode</code>. While it is a
good major mode, we’ll be using <code class="highlighter-rouge">js2-mode</code> instead, an external package that
extends <code class="highlighter-rouge">js-mode</code> and provides a very interesting feature: instead of using
regular expressions, it parses buffers and builds an AST for things like syntax
highlighting. While diverging a bit from the traditional “Emacs way of doing
things”, this is really interesting, and used as the foundation for other
features like refactorings.</p>

<h2 id="setting-up-js2-mode">Setting up js2-mode</h2>

<p>If you haven’t done it already, you should first setup <code class="highlighter-rouge">package.el</code> to
use <a href="https://melpa.org">MELPA</a>, then install and setup <code class="highlighter-rouge">js2-mode</code> like the
following:</p>

<div class="highlighter-rouge"><pre class="highlight"><code>M-x package-install RET js2-mode RET
</code></pre>
</div>

<figure class="highlight"><pre><code class="language-elisp" data-lang="elisp"><span class="p">(</span><span class="nb">require</span> <span class="ss">'js2-mode</span><span class="p">)</span>
<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">"\\.js\\'"</span> <span class="o">.</span> <span class="nv">js2-mode</span><span class="p">))</span>

<span class="c1">;; Better imenu</span>
<span class="p">(</span><span class="nv">add-hook</span> <span class="ss">'js2-mode-hook</span> <span class="nf">#'</span><span class="nv">js2-imenu-extras-mode</span><span class="p">)</span></code></pre></figure>

<h2 id="js2-refactor-and-xref-js2">js2-refactor and xref-js2</h2>

<p>Now that we’re using <code class="highlighter-rouge">js2-mode</code> for JavaScript buffers, let’s take advantage its
capabilities of and install two other
packages: <a href="https://github.com/magnars/js2-refactor">js2-refactor</a>
and <a href="https://github.com/nicolaspetton/xref-js2">xref-js2</a>.</p>

<p><code class="highlighter-rouge">js2-refactor</code> adds powerful refactorings based on the AST generated by
<code class="highlighter-rouge">js2-mode</code>, and <code class="highlighter-rouge">xref-js2</code> makes it easy to jump to function references or
definitions.</p>

<p><code class="highlighter-rouge">xref-js2</code> uses <code class="highlighter-rouge">ag</code> to perform searches, so you’ll need to install it as well.</p>

<div class="highlighter-rouge"><pre class="highlight"><code>M-x package-install RET js2-refactor RET
M-x package-install RET xref-js2 RET
</code></pre>
</div>

<figure class="highlight"><pre><code class="language-elisp" data-lang="elisp"><span class="p">(</span><span class="nb">require</span> <span class="ss">'js2-refactor</span><span class="p">)</span>
<span class="p">(</span><span class="nb">require</span> <span class="ss">'xref-js2</span><span class="p">)</span>

<span class="p">(</span><span class="nv">add-hook</span> <span class="ss">'js2-mode-hook</span> <span class="nf">#'</span><span class="nv">js2-refactor-mode</span><span class="p">)</span>
<span class="p">(</span><span class="nv">js2r-add-keybindings-with-prefix</span> <span class="s">"C-c C-r"</span><span class="p">)</span>
<span class="p">(</span><span class="nv">define-key</span> <span class="nv">js2-mode-map</span> <span class="p">(</span><span class="nv">kbd</span> <span class="s">"C-k"</span><span class="p">)</span> <span class="nf">#'</span><span class="nv">js2r-kill</span><span class="p">)</span>

<span class="c1">;; js-mode (which js2 is based on) binds "M-." which conflicts with xref, so</span>
<span class="c1">;; unbind it.</span>
<span class="p">(</span><span class="nv">define-key</span> <span class="nv">js-mode-map</span> <span class="p">(</span><span class="nv">kbd</span> <span class="s">"M-."</span><span class="p">)</span> <span class="no">nil</span><span class="p">)</span>

<span class="p">(</span><span class="nv">add-hook</span> <span class="ss">'js2-mode-hook</span> <span class="p">(</span><span class="k">lambda</span> <span class="p">()</span>
<span class="p">(</span><span class="nv">add-hook</span> <span class="ss">'xref-backend-functions</span> <span class="nf">#'</span><span class="nv">xref-js2-xref-backend</span> <span class="no">nil</span> <span class="no">t</span><span class="p">)))</span></code></pre></figure>

<p>Now that everything’s setup, let’s see how to use <code class="highlighter-rouge">js2-refactor</code> and <code class="highlighter-rouge">xref-js2</code>.</p>

<h2 id="using-js2-refactor">Using js2-refactor</h2>

<p><code class="highlighter-rouge">js2-refactor</code> is a JavaScript refactoring library for emacs.</p>

<p>It provides a collection of refactoring functions leveraging the AST provided by
<code class="highlighter-rouge">js2-mode</code>.</p>

<p>Refactorings go from inlining/extracting variables to converting ternary
operators to if statements.
The <a href="https://github.com/magnars/js2-refactor">README</a> provides the full list of
keybindings.</p>

<p>One minor tweak that I really couldn’t live without is binding <code class="highlighter-rouge">js2r-kill</code> to
<code class="highlighter-rouge">C-k</code> in JS buffers:</p>

<figure class="highlight"><pre><code class="language-elisp" data-lang="elisp"><span class="p">(</span><span class="nv">define-key</span> <span class="nv">js2-mode-map</span> <span class="p">(</span><span class="nv">kbd</span> <span class="s">"C-k"</span><span class="p">)</span> <span class="nf">#'</span><span class="nv">js2r-kill</span><span class="p">)</span></code></pre></figure>

<p>This command is very similar to killing in <code class="highlighter-rouge">paredit</code>: It kills up to the end of
the line, but always keeping the AST valid.</p>

<p>Here’s a usage example of <code class="highlighter-rouge">js2-refactor</code>: renaming a function parameter and
inlining a variable.</p>

<p><img src="/img/js2-refactorings.gif" alt="Refactorings" /></p>

<h2 id="using-xref-js2">Using xref-js2</h2>

<p><code class="highlighter-rouge">xref-js2</code> adds support for quickly jumping to function definitions or
references to JavaScript projects in Emacs (&gt;= 25.1).</p>

<p>Instead of using a tag system, it relies on <code class="highlighter-rouge">ag</code> to query the codebase of a
project.</p>

<ul>
<li><code class="highlighter-rouge">M-.</code> Jump to definition</li>
<li><code class="highlighter-rouge">M-?</code> Jump to references</li>
<li><code class="highlighter-rouge">M-,</code> Pop back to where <code class="highlighter-rouge">M-.</code> was last invoked.</li>
</ul>

<p>Here’s a usage example of <code class="highlighter-rouge">xref-js2</code>:</p>

<p><img src="/img/xref-jump-to-references.gif" alt="Jumping to references" /></p>

<h2 id="until-next-time">Until next time</h2>

<p>You should now have a decent setup for <code class="highlighter-rouge">js2-mode</code> and associated tools.</p>

<p>We still have a lot to explore like linting, getting good auto-completion, using
snippets, setting up a REPL and debugger, etc. but I promised I would keep posts
short, so stay tuned for part #2!</p>

</div>


<div id="disqus_thread"></div>
<script>
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'emacs-cafe';

/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>


</article>

</div>
</main>

<footer class="site-footer">

<div class="wrapper">

<h2 class="footer-heading">Emacs café</h2>

<div class="footer-col-wrapper">
<div class="footer-col footer-col-1">
<ul class="contact-list">
<li>
Emacs café
</li>
<li><a href="mailto:nicolas@petton.fr">nicolas@petton.fr</a></li>
</ul>
</div>

<div class="footer-col footer-col-2">
<ul class="social-media-list">
<li>
<a href="https://github.com/NicolasPetton"><span class="icon icon--github"><svg viewBox="0 0 16 16" width="16px" height="16px"><path fill="#828282" d="M7.999,0.431c-4.285,0-7.76,3.474-7.76,7.761 c0,3.428,2.223,6.337,5.307,7.363c0.388,0.071,0.53-0.168,0.53-0.374c0-0.184-0.007-0.672-0.01-1.32 c-2.159,0.469-2.614-1.04-2.614-1.04c-0.353-0.896-0.862-1.135-0.862-1.135c-0.705-0.481,0.053-0.472,0.053-0.472 c0.779,0.055,1.189,0.8,1.189,0.8c0.692,1.186,1.816,0.843,2.258,0.645c0.071-0.502,0.271-0.843,0.493-1.037 C4.86,11.425,3.049,10.76,3.049,7.786c0-0.847,0.302-1.54,0.799-2.082C3.768,5.507,3.501,4.718,3.924,3.65 c0,0,0.652-0.209,2.134,0.796C6.677,4.273,7.34,4.187,8,4.184c0.659,0.003,1.323,0.089,1.943,0.261 c1.482-1.004,2.132-0.796,2.132-0.796c0.423,1.068,0.157,1.857,0.077,2.054c0.497,0.542,0.798,1.235,0.798,2.082 c0,2.981-1.814,3.637-3.543,3.829c0.279,0.24,0.527,0.713,0.527,1.437c0,1.037-0.01,1.874-0.01,2.129 c0,0.208,0.14,0.449,0.534,0.373c3.081-1.028,5.302-3.935,5.302-7.362C15.76,3.906,12.285,0.431,7.999,0.431z"/></svg>
</span><span class="username">NicolasPetton</span></a>

</li>

<li>
<a href="https://twitter.com/NicolasPetton"><span class="icon icon--twitter"><svg viewBox="0 0 16 16" width="16px" height="16px"><path fill="#828282" d="M15.969,3.058c-0.586,0.26-1.217,0.436-1.878,0.515c0.675-0.405,1.194-1.045,1.438-1.809c-0.632,0.375-1.332,0.647-2.076,0.793c-0.596-0.636-1.446-1.033-2.387-1.033c-1.806,0-3.27,1.464-3.27,3.27 c0,0.256,0.029,0.506,0.085,0.745C5.163,5.404,2.753,4.102,1.14,2.124C0.859,2.607,0.698,3.168,0.698,3.767 c0,1.134,0.577,2.135,1.455,2.722C1.616,6.472,1.112,6.325,0.671,6.08c0,0.014,0,0.027,0,0.041c0,1.584,1.127,2.906,2.623,3.206 C3.02,9.402,2.731,9.442,2.433,9.442c-0.211,0-0.416-0.021-0.615-0.059c0.416,1.299,1.624,2.245,3.055,2.271 c-1.119,0.877-2.529,1.4-4.061,1.4c-0.264,0-0.524-0.015-0.78-0.046c1.447,0.928,3.166,1.469,5.013,1.469 c6.015,0,9.304-4.983,9.304-9.304c0-0.142-0.003-0.283-0.009-0.423C14.976,4.29,15.531,3.714,15.969,3.058z"/></svg>
</span><span class="username">NicolasPetton</span></a>

</li>
</ul>
</div>

<div class="footer-col footer-col-3">
<p>A blog about Emacs, mostly focused on JavaScript development, by Nicolas Petton.
</p>
</div>
</div>

</div>

</footer>


</body>

</html>

+ 117
- 2
_site/feed.xml View File

@@ -1,5 +1,120 @@
<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="3.4.3">Jekyll</generator><link href="https://emacs.cafe/feed.xml" rel="self" type="application/atom+xml" /><link href="https://emacs.cafe/" rel="alternate" type="text/html" /><updated>2017-04-22T21:24:31+02:00</updated><id>https://emacs.cafe/</id><title type="html">Emacs café</title><subtitle>A blog about Emacs, mostly focused on JavaScript development, by Nicolas Petton.
</subtitle><entry><title type="html">M-x hello-world</title><link href="https://emacs.cafe/jekyll/update/2017/04/21/hello-world.html" rel="alternate" type="text/html" title="M-x hello-world" /><published>2017-04-21T23:14:09+02:00</published><updated>2017-04-21T23:14:09+02:00</updated><id>https://emacs.cafe/jekyll/update/2017/04/21/hello-world</id><content type="html" xml:base="https://emacs.cafe/jekyll/update/2017/04/21/hello-world.html">&lt;p&gt;All blogs should begin with an introductory post, so here we go.&lt;/p&gt;
<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="3.4.3">Jekyll</generator><link href="https://emacs.cafe/feed.xml" rel="self" type="application/atom+xml" /><link href="https://emacs.cafe/" rel="alternate" type="text/html" /><updated>2017-04-23T14:51:30+02:00</updated><id>https://emacs.cafe/</id><title type="html">Emacs café</title><subtitle>A blog about Emacs, mostly focused on JavaScript development, by Nicolas Petton.
</subtitle><entry><title type="html">Setting up Emacs for JavaScript (part #1)</title><link href="https://emacs.cafe/emacs/javascript/setup/2017/04/23/emacs-setup-javascript.html" rel="alternate" type="text/html" title="Setting up Emacs for JavaScript (part #1)" /><published>2017-04-23T14:50:00+02:00</published><updated>2017-04-23T14:50:00+02:00</updated><id>https://emacs.cafe/emacs/javascript/setup/2017/04/23/emacs-setup-javascript</id><content type="html" xml:base="https://emacs.cafe/emacs/javascript/setup/2017/04/23/emacs-setup-javascript.html">&lt;p&gt;There’s a lot that can be done to make Emacs a great tool for JavaScript
development. So much that I had to split it up into several posts.&lt;/p&gt;

&lt;p&gt;In this first article we’ll see how to
setup &lt;a href=&quot;https://github.com/mooz/js2-mode&quot;&gt;js2-mode&lt;/a&gt; and two other packages that
rely upon it: &lt;a href=&quot;https://github.com/magnars/js2-refactor&quot;&gt;js2-refactor&lt;/a&gt;
and &lt;a href=&quot;https://github.com/nicolaspetton/xref-js2&quot;&gt;xref-js2&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Emacs comes with a major mode for JavaScript named &lt;code class=&quot;highlighter-rouge&quot;&gt;js-mode&lt;/code&gt;. While it is a
good major mode, we’ll be using &lt;code class=&quot;highlighter-rouge&quot;&gt;js2-mode&lt;/code&gt; instead, an external package that
extends &lt;code class=&quot;highlighter-rouge&quot;&gt;js-mode&lt;/code&gt; and provides a very interesting feature: instead of using
regular expressions, it parses buffers and builds an AST for things like syntax
highlighting. While diverging a bit from the traditional “Emacs way of doing
things”, this is really interesting, and used as the foundation for other
features like refactorings.&lt;/p&gt;

&lt;h2 id=&quot;setting-up-js2-mode&quot;&gt;Setting up js2-mode&lt;/h2&gt;

&lt;p&gt;If you haven’t done it already, you should first setup &lt;code class=&quot;highlighter-rouge&quot;&gt;package.el&lt;/code&gt; to
use &lt;a href=&quot;https://melpa.org&quot;&gt;MELPA&lt;/a&gt;, then install and setup &lt;code class=&quot;highlighter-rouge&quot;&gt;js2-mode&lt;/code&gt; like the
following:&lt;/p&gt;

&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;M-x package-install RET js2-mode RET
&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-elisp&quot; data-lang=&quot;elisp&quot;&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nb&quot;&gt;require&lt;/span&gt; &lt;span class=&quot;ss&quot;&gt;'js2-mode&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nv&quot;&gt;add-to-list&lt;/span&gt; &lt;span class=&quot;ss&quot;&gt;'auto-mode-alist&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;\\.js\\'&quot;&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;.&lt;/span&gt; &lt;span class=&quot;nv&quot;&gt;js2-mode&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;))&lt;/span&gt;

&lt;span class=&quot;c1&quot;&gt;;; Better imenu&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nv&quot;&gt;add-hook&lt;/span&gt; &lt;span class=&quot;ss&quot;&gt;'js2-mode-hook&lt;/span&gt; &lt;span class=&quot;nf&quot;&gt;#'&lt;/span&gt;&lt;span class=&quot;nv&quot;&gt;js2-imenu-extras-mode&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;h2 id=&quot;js2-refactor-and-xref-js2&quot;&gt;js2-refactor and xref-js2&lt;/h2&gt;

&lt;p&gt;Now that we’re using &lt;code class=&quot;highlighter-rouge&quot;&gt;js2-mode&lt;/code&gt; for JavaScript buffers, let’s take advantage its
capabilities of and install two other
packages: &lt;a href=&quot;https://github.com/magnars/js2-refactor&quot;&gt;js2-refactor&lt;/a&gt;
and &lt;a href=&quot;https://github.com/nicolaspetton/xref-js2&quot;&gt;xref-js2&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;&lt;code class=&quot;highlighter-rouge&quot;&gt;js2-refactor&lt;/code&gt; adds powerful refactorings based on the AST generated by
&lt;code class=&quot;highlighter-rouge&quot;&gt;js2-mode&lt;/code&gt;, and &lt;code class=&quot;highlighter-rouge&quot;&gt;xref-js2&lt;/code&gt; makes it easy to jump to function references or
definitions.&lt;/p&gt;

&lt;p&gt;&lt;code class=&quot;highlighter-rouge&quot;&gt;xref-js2&lt;/code&gt; uses &lt;code class=&quot;highlighter-rouge&quot;&gt;ag&lt;/code&gt; to perform searches, so you’ll need to install it as well.&lt;/p&gt;

&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;M-x package-install RET js2-refactor RET
M-x package-install RET xref-js2 RET
&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-elisp&quot; data-lang=&quot;elisp&quot;&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nb&quot;&gt;require&lt;/span&gt; &lt;span class=&quot;ss&quot;&gt;'js2-refactor&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nb&quot;&gt;require&lt;/span&gt; &lt;span class=&quot;ss&quot;&gt;'xref-js2&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;

&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nv&quot;&gt;add-hook&lt;/span&gt; &lt;span class=&quot;ss&quot;&gt;'js2-mode-hook&lt;/span&gt; &lt;span class=&quot;nf&quot;&gt;#'&lt;/span&gt;&lt;span class=&quot;nv&quot;&gt;js2-refactor-mode&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nv&quot;&gt;js2r-add-keybindings-with-prefix&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;&quot;C-c C-r&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nv&quot;&gt;define-key&lt;/span&gt; &lt;span class=&quot;nv&quot;&gt;js2-mode-map&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nv&quot;&gt;kbd&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;&quot;C-k&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;nf&quot;&gt;#'&lt;/span&gt;&lt;span class=&quot;nv&quot;&gt;js2r-kill&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;

&lt;span class=&quot;c1&quot;&gt;;; js-mode (which js2 is based on) binds &quot;M-.&quot; which conflicts with xref, so&lt;/span&gt;
&lt;span class=&quot;c1&quot;&gt;;; unbind it.&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nv&quot;&gt;define-key&lt;/span&gt; &lt;span class=&quot;nv&quot;&gt;js-mode-map&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nv&quot;&gt;kbd&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;&quot;M-.&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;no&quot;&gt;nil&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;

&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nv&quot;&gt;add-hook&lt;/span&gt; &lt;span class=&quot;ss&quot;&gt;'js2-mode-hook&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;k&quot;&gt;lambda&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;()&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nv&quot;&gt;add-hook&lt;/span&gt; &lt;span class=&quot;ss&quot;&gt;'xref-backend-functions&lt;/span&gt; &lt;span class=&quot;nf&quot;&gt;#'&lt;/span&gt;&lt;span class=&quot;nv&quot;&gt;xref-js2-xref-backend&lt;/span&gt; &lt;span class=&quot;no&quot;&gt;nil&lt;/span&gt; &lt;span class=&quot;no&quot;&gt;t&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)))&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;Now that everything’s setup, let’s see how to use &lt;code class=&quot;highlighter-rouge&quot;&gt;js2-refactor&lt;/code&gt; and &lt;code class=&quot;highlighter-rouge&quot;&gt;xref-js2&lt;/code&gt;.&lt;/p&gt;

&lt;h2 id=&quot;using-js2-refactor&quot;&gt;Using js2-refactor&lt;/h2&gt;

&lt;p&gt;&lt;code class=&quot;highlighter-rouge&quot;&gt;js2-refactor&lt;/code&gt; is a JavaScript refactoring library for emacs.&lt;/p&gt;

&lt;p&gt;It provides a collection of refactoring functions leveraging the AST provided by
&lt;code class=&quot;highlighter-rouge&quot;&gt;js2-mode&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Refactorings go from inlining/extracting variables to converting ternary
operators to if statements.
The &lt;a href=&quot;https://github.com/magnars/js2-refactor&quot;&gt;README&lt;/a&gt; provides the full list of
keybindings.&lt;/p&gt;

&lt;p&gt;One minor tweak that I really couldn’t live without is binding &lt;code class=&quot;highlighter-rouge&quot;&gt;js2r-kill&lt;/code&gt; to
&lt;code class=&quot;highlighter-rouge&quot;&gt;C-k&lt;/code&gt; in JS buffers:&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-elisp&quot; data-lang=&quot;elisp&quot;&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nv&quot;&gt;define-key&lt;/span&gt; &lt;span class=&quot;nv&quot;&gt;js2-mode-map&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nv&quot;&gt;kbd&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;&quot;C-k&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;nf&quot;&gt;#'&lt;/span&gt;&lt;span class=&quot;nv&quot;&gt;js2r-kill&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;This command is very similar to killing in &lt;code class=&quot;highlighter-rouge&quot;&gt;paredit&lt;/code&gt;: It kills up to the end of
the line, but always keeping the AST valid.&lt;/p&gt;

&lt;p&gt;Here’s a usage example of &lt;code class=&quot;highlighter-rouge&quot;&gt;js2-refactor&lt;/code&gt;: renaming a function parameter and
inlining a variable.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/img/js2-refactorings.gif&quot; alt=&quot;Refactorings&quot; /&gt;&lt;/p&gt;

&lt;h2 id=&quot;using-xref-js2&quot;&gt;Using xref-js2&lt;/h2&gt;

&lt;p&gt;&lt;code class=&quot;highlighter-rouge&quot;&gt;xref-js2&lt;/code&gt; adds support for quickly jumping to function definitions or
references to JavaScript projects in Emacs (&amp;gt;= 25.1).&lt;/p&gt;

&lt;p&gt;Instead of using a tag system, it relies on &lt;code class=&quot;highlighter-rouge&quot;&gt;ag&lt;/code&gt; to query the codebase of a
project.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;code class=&quot;highlighter-rouge&quot;&gt;M-.&lt;/code&gt; Jump to definition&lt;/li&gt;
&lt;li&gt;&lt;code class=&quot;highlighter-rouge&quot;&gt;M-?&lt;/code&gt; Jump to references&lt;/li&gt;
&lt;li&gt;&lt;code class=&quot;highlighter-rouge&quot;&gt;M-,&lt;/code&gt; Pop back to where &lt;code class=&quot;highlighter-rouge&quot;&gt;M-.&lt;/code&gt; was last invoked.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Here’s a usage example of &lt;code class=&quot;highlighter-rouge&quot;&gt;xref-js2&lt;/code&gt;:&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/img/xref-jump-to-references.gif&quot; alt=&quot;Jumping to references&quot; /&gt;&lt;/p&gt;

&lt;h2 id=&quot;until-next-time&quot;&gt;Until next time&lt;/h2&gt;

&lt;p&gt;You should now have a decent setup for &lt;code class=&quot;highlighter-rouge&quot;&gt;js2-mode&lt;/code&gt; and associated tools.&lt;/p&gt;

&lt;p&gt;We still have a lot to explore like linting, getting good auto-completion, using
snippets, setting up a REPL and debugger, etc. but I promised I would keep posts
short, so stay tuned for part #2!&lt;/p&gt;</content><author><name>Nicolas Petton</name></author><summary type="html">There’s a lot that can be done to make Emacs a great tool for JavaScript development. So much that I had to split it up into several posts.</summary></entry><entry><title type="html">M-x hello-world</title><link href="https://emacs.cafe/jekyll/update/2017/04/21/hello-world.html" rel="alternate" type="text/html" title="M-x hello-world" /><published>2017-04-21T23:14:09+02:00</published><updated>2017-04-21T23:14:09+02:00</updated><id>https://emacs.cafe/jekyll/update/2017/04/21/hello-world</id><content type="html" xml:base="https://emacs.cafe/jekyll/update/2017/04/21/hello-world.html">&lt;p&gt;All blogs should begin with an introductory post, so here we go.&lt;/p&gt;

&lt;p&gt;I’ve been willing to make a blog dedicated
to &lt;a href=&quot;http://gnu.org/software/emacs&quot;&gt;Emacs&lt;/a&gt; for a long time, but until now I


BIN
View File


BIN
View File


BIN
View File


+ 29
- 14
_site/index.html View File

@@ -69,25 +69,40 @@
<div class="wrapper">
<div class="home">

<h1 class="page-heading">Posts</h1>
<h1 class="page-heading">Posts</h1>


<ul class="post-list">
<li>
<ul class="post-list">
<span class="post-meta">Apr 21, 2017</span>
<li>
<span class="post-meta">Apr 23, 2017</span>

<h2>
<a class="post-link" href="/jekyll/update/2017/04/21/hello-world.html">M-x hello-world</a>
</h2>
</li>
</ul>
<h2>
<a class="post-link" href="/emacs/javascript/setup/2017/04/23/emacs-setup-javascript.html">Setting up Emacs for JavaScript (part #1)</a>
</h2>
<div class="post-desc post-meta">A basic setup with js2-mode, refactorings & jumping to references/definitions.</div>
</li>
<li>
<span class="post-meta">Apr 21, 2017</span>

<h2>
<a class="post-link" href="/jekyll/update/2017/04/21/hello-world.html">M-x hello-world</a>
</h2>
<div class="post-desc post-meta">Introducing this weblog.</div>
</li>
</ul>

<p class="rss-subscribe">subscribe <a href="/feed.xml">via RSS</a></p>
<p class="rss-subscribe">subscribe <a href="/feed.xml">via RSS</a></p>

</div>



+ 17
- 0
css/cafe.css View File

@@ -9,3 +9,20 @@
.site-title img {
vertical-align: bottom;
}

.post-list h2 {
margin-bottom: 0;
}

.post-desc {
font-size: 16px;
}

.post-content {
font-size: 20px;
line-height: 1.6em;
}

.post-content h2 {
margin-top: 30px;
}

BIN
View File


BIN
View File


BIN
View File


Loading…
Cancel
Save