はじめに

今どきのエンジニアの皆さんは、GitHub CopilotやChat GPTの支援を受けながら日々コードを書かれておられるかと思います。私も滅茶苦茶使っています。最高ですよね。

最高なんですが、必ずしも最高に品質が高いコードを書いてくれるわけではない…。
そう感じたなら、是非SonarLintを試してみてほしいです。

SonarLintとは

SonarLintは、SonarSource社が開発した静的コード解析ツールで、主にコード品質の向上を目的としています。SonarLintは、Eclipse、IntelliJ IDEA、Visual Studioなどの主要なIDE向けにプラグイン形式で提供されており、SonarQubeのルールに基づいてリアルタイムでコードの問題を検出します。
https://www.sonarsource.com/products/sonarlint/

ESLintと何が違うの？

それぞれ以下のように得意分野が違います。

ESLint
- JavaScriptに特化した静的解析ツールで、コーディング標準の強制や潜在的な問題の特定を行います。
SonarLint
- 複数のプログラミング言語に対応しており、セキュリティ脆弱性やコードの重複、アーキテクチャの問題などを検出します。

ですので、私は両方入れています。
ちなみにSonarLintはエディタのプラグイン形式で提供されますので、ESLintのようにプロジェクトのpackage.jsonでは入ってきません。個人で導入する必要があります。
それでは、SoanrLintの何がいいのかを見ていきましょう。

SonarLintが指摘してくれる内容の具体例（VSCodeの場合）

コードの認知的複雑性が高い箇所を指摘

こんな感じで、異常なネストが発生していたとします。

export function Test () {
 let flg1, flg2, flg3, flg4, flg5, flg6 = true;
 if(flg1) {
     if(flg2) {
         if(flg3) {
             if(flg4) {
                 if(flg5) {
                     if(flg6) {
                         return "test";
                     }
                 }
             }
         }
     }
 }
}

すると、お前のソースは読みづらいんじゃい！と指摘してくれます

修正例

export function Test(){
 let flg1, flg2, flg3, flg4, flg5, flg6 = true;
 if(flg1 && flg2 && flg3 && flg4 && flg5 && flg6) {
     return "test";
 }
}

異常なネストが解消され、読みやすくなりました

イミュータブルであるべき値はreadonlyにしろと叱ってくれる

こんな風にPropsを定義すると…

inteface Props {
    userName: string;
}

export function TestComponent (props:Props) {
    // 以下略
}

componentのpropsはreadonlyであるべきやろがい！と叱ってくれます😂

修正例

inteface Props {
    readonly userName: string;
}

export function TestComponent (props:Props) {
    // 以下略
}

そもそもpropsはイミュータブルなのでは…¹とか、propsを上書きするコード書くなよとは思いますが…
私はこの指摘で、interface型にreadonlyが付与できることに気づきました。

その演算子で大丈夫か？と指摘してくれる

こんな感じで、値が無い場合は空文字を入れる処理を書いたとします。

const userId = session?.userId || "";

すると、falsyな値で引っかけるのは危ないで！と駆けつけてきます。

修正例

const userId = session?.userId ?? "";

TODOコメントを残すな😡

そのまんまです。コード内にTODOコメントが残っていると、こんな風に指摘してくれます、

いかがでしょうか？

これはほんの一例ですが、ESLintとは役割が違うということはお判りいただけたと思います。
正直、全部の指摘に従って書くのは厳しいときもありますが、「固い」コードを書きたいときは非常に参考になりますし、「なんとなく」で書いていたコードからワンランク上を目指したいときは、非常に心強いパートナーになってくれると思います。

完全なイミュータブルではない ↩