Jutting Bytes

Digressions of a research engineer

Emacs Setup for Javascript WRT Company and Flycheck

| Comments

I kew for a while, that http://ternjs.net was the way to go for editing javascript file, as it provides autocompletion on variables and properties, function argument hints, querying the type of an expression, finding the definition of something, automatic refactoring.

The completion of course, comes from emacs comany package, but I also wanted to have a checker, emacs flycheck working when editing javascript files.

Here is how to get them both working easily, even though I must admit it requires third party npm packages, everything is not as well integrated directly into one’s emacs configuration such as irony.

Let’s start with completion. It is necessary to install the tern utiliy, globally for instance as show in the following command.

$ npm install -g tern tern-lint

Let’s configure our emacs setup completion layers.

First step is to require company-tern, and to add it to the list of company-backends. Finally, we add a hook on js2-mode to trigger company-mode.

1
2
3
4
5
6
7
8
9
10
11
12
;; ...

(prolusion/require-package 'company)
(prolusion/require-package 'company-tern)

;; ...

(eval-after-load 'company '(add-to-list 'company-backends 'company-tern))

;; ...

(add-hook 'js2-mode-hook 'company-mode)

This is enough for the emac’s side, but I figured out that if you want company to provide candidates, you’ll have to create a .tern-project file at the root of your project (e.g. a Node.js one).

1
2
3
4
5
6
{
    "plugins": {
        "node": {
        }
    }
}

Now for the on-the-fly checking. Again, we’ll have to install third party tools and configure them system wide.

$ npm install -g eslint babel-eslint eslint-plugin-react

Here is the setup for the checking layer of your emacs setup.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
;; ...

(setq flycheck-eslintrc "~/.eslintrc")

(setq-default flycheck-disabled-checkers
  (append flycheck-disabled-checkers
    '(javascript-jshint)))

(setq-default flycheck-disabled-checkers
  (append flycheck-disabled-checkers
    '(json-jsonlist)))

;; ...

(add-hook 'js2-mode-hook 'flycheck-mode)

;; ...

As javascript-eslint is part of flycheck, it will fallback to it as we have disabled priority one javascript-jshint and json-json-lint checkers.

However, for eslint to behave as expected, a configuration file .eslintrc has to exist in your home folder. Here’s mine. Of course, it can be customized to meet your needs.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
  "parser": "babel-eslint",
  "plugins": [ "react" ],
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "rules": {
    "consistent-return": [0],
    "key-spacing": [0],
    "quotes": [0],
    "new-cap": [0],
    "no-multi-spaces": [0],
    "no-shadow": [0],
    "no-unused-vars": [1],
    "no-use-before-define": [2, "nofunc"],
    "react/jsx-no-undef": 1,
    "react/jsx-uses-react": 1,
    "react/jsx-uses-vars": 1
  }
}

Comments