ALE + eslint でjavascriptを自動整形

どうもシローです。

今回は、javascriptファイルを保存するときにコードのシンタックスを自動整形する方法をまとめました。

ALE

ALE(Asynchronous Lint Engine) はvimでコードを編集しているときに非同期でコードをチェックしてLinterに通す役割を果たすものです。

これ単体では、コードのシンタックスを注意したり、コードを整形できるわけではありません。

その役割はLinterが行います。

インストール方法

詳しくはここ

今回はvimのプラグイン管理にVundleを使っています。

eslint

javascriptのlinterの中で最もポピュラーなものです。

プロジェクト単位でLinterの設定ができるのが特徴です。

対話方式で設定ファイルを作成できます。

インストール方法

詳しくはここ

今回はnpmでグローバルにインストールします。

 

設定手順

それぞれのインストールが終わったら、実際にALE + eslintの設定をして見ましょう。

ALEの設定

デフォルトではすべてのLinterを通してしまうので、必要なLinterを通すような設定を行います。

また、ソースファイルの保存時に自動でコードを整形することを許可します。(ALEが整形するわけではない。eslintが行う

eslintの設定

プロジェクトファイルに移動したら、eslintの設定ファイルを作成します。

対話方式で選択肢に答えるながら作成するため、回答内容によってはLinterが期待した振る舞いをしない場合があるので注意です。

実際にvimでjavascriptファイルを編集してみて、保存されるときにコードが整形されたら完成です。


ALE + eslint でjavascriptを自動整形

どうもシローです。

今回は、javascriptファイルを保存するときにコードのシンタックスを自動整形する方法をまとめました。

ALE

ALE(Asynchronous Lint Engine) はvimでコードを編集しているときに非同期でコードをチェックしてLinterに通す役割を果たすものです。

これ単体では、コードのシンタックスを注意したり、コードを整形できるわけではありません。

その役割はLinterが行います。

インストール方法

詳しくはここ

今回はvimのプラグイン管理にVundleを使っています。

eslint

javascriptのlinterの中で最もポピュラーなものです。

プロジェクト単位でLinterの設定ができるのが特徴です。

対話方式で設定ファイルを作成できます。

インストール方法

詳しくはここ

今回はnpmでグローバルにインストールします。

 

設定手順

それぞれのインストールが終わったら、実際にALE + eslintの設定をして見ましょう。

ALEの設定

デフォルトではすべてのLinterを通してしまうので、必要なLinterを通すような設定を行います。

また、ソースファイルの保存時に自動でコードを整形することを許可します。(ALEが整形するわけではない。eslintが行う

eslintの設定

プロジェクトファイルに移動したら、eslintの設定ファイルを作成します。

対話方式で選択肢に答えるながら作成するため、回答内容によってはLinterが期待した振る舞いをしない場合があるので注意です。

実際にvimでjavascriptファイルを編集してみて、保存されるときにコードが整形されたら完成です。