エディタの設定で開発効率は結構上がるものだと最近感じます。 今回はes lint。
es lint 使い方
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'