MavenプロジェクトでESLintしたい。Node.jsを自分の環境に入れずに実行したい。

はじめに

ESLintぐらい有名だとプラグインあるやろーと思ったらなくて困ったので、解決しました。
nodeを各自インストールするのはバージョンの問題もありやりたくないので、JavaのプロジェクトでMaven使っているならプラグイン入れてどうこうしようと考えたため、こんな記事の感じになりました。

環境

Adopt Open JDK Hotspot 11.0.3
Maven 3.6.0

プロジェクト作成

ここは割愛します。
Mavenプロジェクトならなんでも良いです。

package.jsonの作成

Maven内でnpm installするので、先に作っておきます。

package.json

{
  "dependencies": {},
  "devDependencies": {
    "eslint": "^6.5.1"
  }
}

とりあえず最小限だとこんな感じです。
リリースがよくあるので、バージョンは適宜読み替えてください。

まずはnodeを入れよう

frontend-maven-pluginというプラグインでインストール可能となっているため、まずはその設定をしていきます。
基本的には公式の通りに設定していけば良いです。

pom.xml

            <plugin>
                <groupId>com.github.eirslett</groupId>
                <artifactId>frontend-maven-plugin</artifactId>
                <version>1.8.0</version>
                <configuration>
                    <nodeVersion>v10.16.3</nodeVersion>
                </configuration>
                <executions>
                    <execution>
                        <id>install node and npm</id>
                        <goals>
                            <goal>install-node-and-npm</goal>
                        </goals>
                        <phase>generate-resources</phase>
                    </execution>
                    <execution>
                    <id>npm install</id>
                    <goals>
                        <goal>npm</goal>
                    </goals>
                    <phase>generate-resources</phase>
                    <configuration>
                        <arguments>install</arguments>
                    </configuration>
                </execution>
                </executions>
            </plugin>

とりあえず起動

./mvnw generate-resourcesでnode関連のファイルができてくれます。

Eslintの初期化(必要なファイルを持っている方はとばしてください)

ESlintを実行するためのファイルがない人はここで初期化する必要があります。
しかし、node実行ファイルがプロジェクトルートのnodeフォルダ内にあるため、PATHへの追加をしてあげないといけないのだけ注意してください。

export PATH=node/:$PATH

あとは実行して設定していくだけです。
WindowsのGitbash上から最初設定しようかと思ってたのですが、上手くいかなかったのでここだけはMacなりでやることをおすすめします。

node_modules/.bin/eslint --init

eslint.jsonの作成

Eclipseで開発中の案件での話で同じルールをEclipse側にも設定したいため、initした隠しファイルをシンボリックリンクで別だしにしてあげています。
EclipseでやるにはTernを使うしかなさそうですが、同じルールでいけるので少しだけ便利です。

Eclipse使ってJavascriptの開発を行うのは悲しい気分になるので、個人的にはJavascriptをいじるときだけでもVSCodeを使ったりしたい派ですが、今回はプロジェクトの都合上、全ての開発をEclipse上で出来るようにしないといけないため、このような対応を実施しています。

ESLint実行設定

事前準備ができたので、再度pom.xmlをいじってESLintをMavenから実行出来るようにします。
こちらについてはexec-maven-pluginを使って実行します。
frontend-maven-pluginで出来れば良かったのですが、上手くいかなかったので別のプラグインを使うようにしています。

ここではbashコマンドからeslint_exec.shを呼び出す設定をしています。

pom.xml

            <plugin>
                <groupId>org.codehaus.mojo</groupId>
                <artifactId>exec-maven-plugin</artifactId>
                <executions>
                    <execution>
                        <phase>verify</phase>
                        <id>exec-eslint</id>
                        <configuration>
                            <executable>bash</executable>
                            <arguments>
                                <argument>eslint_exec.sh</argument>
                            </arguments>
                        </configuration>
                        <goals>
                            <goal>exec</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>

eslint_exec.shの中身はこんな感じです。
node配下をPATHに設定するのは、色んな環境で設定してもらうのも面倒と考えてこの中で実行するようにしました。
あとはESLintを走らせているだけですね。
exit 0はJenkinsで走らせる際にチェックでひっかかってもエラーとしたくなかったので入れています。

eslint_exec.sh

export PATH=node/:$PATH
node_modules/.bin/eslint src/main/resources/static/js/*/**
exit 0

ESLintの実行

verifyで今回やりたいことはやってくれるので、ゴール設定をverifyにします。

./mvnw verify

おわりに

このご時世だとJavascript開発しないということはないと思うので、全体的にもうちょっと楽に構築できる方法を考えた方が良かったなとやった後におもいました。