javascriptの開発では、ESLintと呼ばれる静的検証ツールを利用することが多くあります。コードを実行する前に明らかなバグを見つけたり、括弧、スペース、セミコロンなどの記載方法、未使用な変数を教えてくれます。今回は、GitLabCI/CDとESLintを利用した自動実行の仕組みについてまとめます。

環境について

  • GitLab
  • Nuxt.js + Typescript

さっそく作ってみる

NuxtプロジェクトにESLintを導入するには、Nuxt TypeScriptのLint設定を参照にします。

ESlintを実行できるように設定する

・yarnコマンドを利用してパッケージをインストールします。

ESlintの設定ファイルを作成します。ESLintの実行対象(.eslintignore)、package.jsonへの設定方法の例を下記に示します。

・今回は、下記のようなESLintを作成しました。

※eslintでは、自動で修正してくれる「–fix」もあります。

gitlabでCICDを利用できるように設定する

.gitlab-ci.ymlに下記の内容を記載します。

この内容をコミットしてpushすると自動でCI/CDが実行されます。

おわりに

設定自体は30分程度で出来ると思います。大規模なリファクタリングを行う際などに導入すると良いかと思います。今回は、push時に常に実行されるような設定にしましたが、GitLab schedule機能を利用して、一日に一回とかの実行設定も可能です。他のCIツールでも同様のことができるので、開発の序盤で導入することでストレスフリーな継続開発を行いたいものですね。