atomでeslintを使って開発効率を上げる

エディタの設定で開発効率は結構上がるものだと最近感じます。 今回はes lint。

es lint 使い方

atomのプラグインと連携すると開発中にわかるので便利。

eslintはyarnでインストールできる。

$ yarn add eslint eslint-plugin-react

これでeslintが入る。 場所は下記。 ./node_modules/.bin/eslint

この後にファイル名を指定して使う。 ./node_modules/.bin/eslint src/index.js

これで、指定したファイルの中身を指摘してくれる。 ただ、今のままでは設定ファイルがないので、作る必要がある。

 $ ./node_modules/.bin/eslint --init

上記のコマンドを打つと、どのように使うのかをいくつか聞かれるので、適当に答える。

とりあえずこんな感じで設定。

? How would you like to configure ESLint? Use a popular style guide
? Which style guide do you want to follow? Airbnb
? Do you use React? Yes
? What format do you want your config file to be in? JavaScript

initするとeslintrc.jsという設定ファイルが作成される。中身はこれ。

module.exports = {
    "extends": "airbnb"
};


さっきの選ぶ項目によって相当変わってくるけど、今のでこんな感じ。

これでファイルをチェックしてみる。

/Users/hoge/projects/hoge/src/index.js
  1:1   warning  Unexpected alert              no-alert
  1:1   error    'alert' is not defined        no-undef
  1:7   error    Strings must use singlequote  quotes
  1:14  error    Missing semicolon             semi

✖ 4 problems (3 errors, 1 warning)
  2 errors, 0 warnings potentially fixable with the `--fix` option.

うまく作動して、ファイルの中身をチェックしてくれるようになった。

atomから使えるようにする。

コマンドを毎回打つのは面倒なので、atomから自動的にlinterが動作するようにする。 パッケージを入れるが、複数入れるのでコマンドラインから入れます。

apm install の後に使いたいパッケージ名を入力。

apm install es6-javascript intentions busy-signal linter-ui-default linter linter-eslint

これでatomで編集中に色々指摘してくれる。 指摘されるデザインが気に食わなかったら、linter-ui-defaultのsettingから項目のチェックをつけたり外したりすれば少しは自分好みになるはず。

jsxでも補完されるようにemmetも入れとく。

amp install emmet

atomのkeymapに以下をコピペで保管されるはず。

'atom-text-editor[data-grammar="source js jsx"]':
  'tab': 'emmet:expand-abbreviation-with-tab'