どうもシローです。
今回は、javascriptファイルを保存するときにコードのシンタックスを自動整形する方法をまとめました。
ALE
ALE(Asynchronous Lint Engine) はvimでコードを編集しているときに非同期でコードをチェックしてLinterに通す役割を果たすものです。
これ単体では、コードのシンタックスを注意したり、コードを整形できるわけではありません。
その役割はLinterが行います。
インストール方法
詳しくはここ
今回はvimのプラグイン管理にVundleを使っています。
1 |
Plugin 'w0rp/ale' |
eslint
javascriptのlinterの中で最もポピュラーなものです。
プロジェクト単位でLinterの設定ができるのが特徴です。
対話方式で設定ファイルを作成できます。
インストール方法
詳しくはここ
今回はnpmでグローバルにインストールします。
1 |
npm install -g eslint |
設定手順
それぞれのインストールが終わったら、実際にALE + eslintの設定をして見ましょう。
ALEの設定
デフォルトではすべてのLinterを通してしまうので、必要なLinterを通すような設定を行います。
また、ソースファイルの保存時に自動でコードを整形することを許可します。(ALEが整形するわけではない。eslintが行う)
1 2 3 4 5 6 |
" ale let g:ale_fixers = { \ '*': ['remove_trailing_lines', 'trim_whitespace'], \ 'javascript': ['eslint'], \} let g:ale_fix_on_save = 1 |
eslintの設定
プロジェクトファイルに移動したら、eslintの設定ファイルを作成します。
対話方式で選択肢に答えるながら作成するため、回答内容によってはLinterが期待した振る舞いをしない場合があるので注意です。
1 2 3 4 5 6 7 |
eslint --init ? How would you like to use ESLint? To check syntax, find problems, and enforce code style // コードを自動整形 ? What type of modules does your project use? CommonJS (require/exports) ? Which framework does your project use? None of these ? Where does your code run? Node ? How would you like to define a style for your project? Use a popular style guide ? What format do you want your config file to be in? JavaScript |
実際にvimでjavascriptファイルを編集してみて、保存されるときにコードが整形されたら完成です。