Linters: 自動コードスタイルチェック — 開発者向け完全ガイド

5人の開発者からなるチームで働いていると想像してみてください。1人は一重引用符を好み、もう1人は二重引用符を好みます。3人目はどこにでもセミコロンを置き、4人目はそれらを避けます。5人目はインデントに4つのスペースを使用し、あなたは2つのスペースを使用します。コードはパッチワークのように見え始め、各コードレビューはアーキテクチャの議論ではなくフォーマットに関する議論になります。よくある状況ですか？

このような問題を解決するために、特定のスタイルルールに従ってコードを自動的にチェックするためのツールであるリントが考案されました。コードレビューの時間を節約するだけでなく、プログラムを実行する前に潜在的なエラーを見つけるのに役立ちます。

リントとは何か、そしてなぜ必要なのか

リンタ（英語のlintから「毛羽立ちを取り除く」）は、実行せずに指定されたルールに従ってソースコードをチェックする静的コード解析プログラムです。この用語は、1978 年にスティーブン・ジョンソンが C 言語用の lint ユーティリティを作成したときに生まれました。

現代のリントは、いくつかの重要なタスクを解決します。プロジェクト内のコードの一貫性を確保し、どの開発者も同僚のコードを簡単に読んで理解できるようにします。リントは、未使用の変数、関数名の誤字脱字、スコープの問題など、潜在的なエラーを見つけます。コードレビュー中に、コードスタイルのチェックを自動化し、より重要な事項について話し合う時間を確保します。さらに、リントは初心者がチームの基準に素早く適応し、ベストプラクティスを学ぶのに役立ちます。

さまざまな言語で人気のあるリンス

JavaScript と TypeScript の場合、最も人気のあるソリューションは ESLint です。これは、膨大な数のルールとプラグインを備えた柔軟で拡張性のあるツールです。ESLint を使用すると、プロジェクトのニーズに合わせてルールをカスタマイズしたり、コミュニティからの既成の構成を使用したり、多くの問題を自動的に修正したり、すべての一般的なコードエディターと統合したりできます。

Pythonエコシステムでは、一度に複数のツールが使用されます。Pylint は大規模なルールセットを使用した包括的な検証を提供し、Flake8 は複数のツールの機能を 1 つに統合し、Black は最小限の設定で「妥協のないコードフォーマッター」として機能します。

PHPの場合、PHP_CodeSnifferがデファクトスタンダードになりました。これは、コードがPSR標準に準拠していることを確認し、独自の検証ルールを作成できるようにします。CSSとSCSSの世界では、最新のCSSとプリプロセッサーをサポートするStylelintが人気があります。

リフティングの内部構造

リントのプロセスは、いくつかの段階に分けることができます。まず、ソースコードを解析して抽象構文木（AST）を作成します。次に、このツリーをトラバースし、各ノードにルールを適用して、コードの構造、変数名、フォーマット、その他の側面をチェックします。その後、リンターは見つかったすべての問題を収集し、ファイル、行、問題の説明を示すレポートを生成します。最後に、一部の問題については、リンタが自動的に修正を適用できます。

ESLint を使用した簡単な例を見てみましょう。例えば、次のようなコードがあるとします。

function calculateSum(a,b) {
    var result = a + b
    console.log(unused)
    return result
}

ESLintは、関数パラメータのカンマの後にスペースがないこと、constの代わりに古いキーワードvarが使用されていること、行の最後にセミコロンがないこと、未使用の変数への参照があることなど、いくつかの問題を見つけます。

Vue.jsプロジェクトのESLintの設定

Vue.jsの実際のプロジェクトのリントの設定を詳しく見ていきましょう。まず、必要なパッケージをインストールします。

npm install --save-dev eslint eslint-plugin-vue @vue/eslint-config-prettier

次に、プロジェクトのルートに構成ファイル .eslintrc.js を作成します。

module.exports = {
  root: true,
  env: {
    node: true,
    browser: true,
    es2021: true
  },
  extends: [
    'plugin:vue/vue3-recommended',
    'eslint:recommended',
    '@vue/prettier'
  ],
  parserOptions: {
    ecmaVersion: 2021,
    sourceType: 'module'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'vue/multi-word-component-names': 'off',
    'vue/require-default-prop': 'error',
    'vue/no-unused-vars': 'warn'
  }
}

ファイル package.json に、チェックを開始するためのスクリプトを追加します。

{
  "scripts": {
    "lint": "eslint --ext .js,.vue src",
    "lint:fix": "eslint --ext .js,.vue src --fix"
  }
}

これで、npm run lintコマンドでチェックを開始するか、npm run lint:fixコマンドで問題を自動的に修正できます。

コードエディターとの統合

コードを書いているときにリントエラーを表示するには、エディターとの統合を設定する必要があります。VS Codeの場合、マーケットプレイスからESLint拡張機能をインストールし、設定に.vscode/settings.jsonを追加します。

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue"
  ]
}

これで、ファイルを保存すると、修正可能な問題がすべて自動的に修正されます。

ルールの設定：厳格さと利便性のバランス

よくある質問の1つは、リンタールールはどれくらい厳しくすべきかということです。ルールが緩すぎると、望ましい効果が得られず、厳しすぎると、開発者をイライラさせ、作業を遅くします。

良い戦略は、推奨されるルールの基本的なセットから始めて、チームに合わせて徐々に適応させることです。すべての可能なルールを一度に有効にするのではなく、間違いを避けるのに本当に役立つルールを選択してください。重大度レベルを使用します。エラーはビルドを停止し、必須の修正を必要とします。警告は警告を表示しますが、作業をブロックせず、オフはルールを完全に無効にします。

論争の的になっているルールについてチームと合意します。たとえば、一重引用符または二重引用符は、正確性の問題ではなく、合意の問題です。新しいチームメンバーが意思決定のロジックを理解できるように、特定のルールを選択する理由を文書化します。

CI/CDパイプラインのリンター

リントは、継続的インテグレーションプロセスに統合されたときに真の価値をもたらします。これにより、メインブランチに入るすべてのコードが標準に準拠していることが保証されます。

.github/workflows/lint.ymlファイルのGitHubアクションの構成例：

name: Lint

on: [push, pull_request]

jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '18'
      - run: npm ci
      - run: npm run lint

これで、プッシュまたはプルリクエストを作成するたびに、コードチェックが自動的に開始されます。リンターがエラーを検出すると、GitHubはチェックを失敗としてマークし、すぐに修正する必要があるものが表示されます。

自動修正とフォーマッター

多くのリントは、問題を見つけるだけでなく、それらを自動的に修正することもできます。フラグ --fix を持つ ESLint は、書式設定の問題を修正したり、セミコロンを追加したり、引用符を修正したり、その他多くのことを行うことができます。

ただし、コードの書式設定には、専用のツールを使用することをお勧めします。Prettier は、最小限の構成で厳格なルールに従ってコードをフォーマットする、意見のあるコードフォーマッターです。コード品質チェックのための ESLint とフォーマットのための Prettier の組み合わせは、JavaScript コミュニティで標準となっています。

それらが競合しないようにするには、書式設定に関連するすべての ESLint ルールを無効にする eslint-config-prettier を使用します。

npm install --save-dev prettier eslint-config-prettier

そして、.eslintrc.jsに次を追加します。

extends: [
  'plugin:vue/vue3-recommended',
  'eslint:recommended',
  'prettier' // 最後であるべきです
]

リントスターを使用する際の典型的な間違い

最初の一般的な間違いは、リントの警告を無視することです。開発者は、問題を修正する代わりに、チェックを無効にするためにコメント eslint-disable を追加します。無効化コメントは例外的な場合にのみ使用し、ルールが無効化されている理由を常に説明してください。

2 つ目のミスは、チーム内の一貫性の欠如です。各開発者が独自のローカル構成を使用している場合、これはリンターの利点を無効にします。構成をリポジトリに保存し、全員が同じ設定を使用していることを確認してください。

3番目の間違いは、導入が遅すぎることです。既存のコードベースを持つ大規模なプロジェクトにリンターを追加するのは難しいです。プロジェクトの最初から開始するか、段階的に実装することをお勧めします。最初に新しいファイルに実装し、次に古いコードを段階的にリファクタリングします。

高度な機能

最新のリントは、多くの高度な機能を提供します。プロジェクトの特定の要件に合わせて、独自の検証ルールを作成できます。プラグインは機能を拡張します。たとえば、eslint-plugin-securityは潜在的なセキュリティの脆弱性を検出し、eslint-plugin-a11yは可用性をチェックし、eslint-plugin-importはインポートの正確性をチェックします。

@typescript-eslintを介したTypeScriptとの統合により、型付けされたコードを型のシステムに基づいて検証できます。また、プロジェクトのさまざまな部分（たとえば、フロントエンドとバックエンドの異なるルール）のカスタム構成は、チェックを柔軟に構成するのに役立ちます。

結論

リンターは、単にうるさい完璧主義者のためのツールではありません。これは、コードの品質を向上させ、コードレビューを高速化し、エラーを防ぎ、チーム内で一貫したスタイルを作成するための実績のある方法です。リンターの使用を開始するのは簡単です。プログラミング言語に適したツールを選択し、基本構成をインストールし、エディターとCI/CDとの統合を設定し、チームのニーズに合わせてルールを調整します。最初は、リンターは作業を遅くし、絶え間ないコメントでイライラさせるだけのように見えるかもしれません。しかし、1週間後には、コードがよりクリーンになり、コードレビューがより速く、より建設的になったことに気づくでしょう。リンターは、コードの品質を24時間監視し、ベストプラクティスを思い出させ続ける静かなアシスタントになります。

アプリケーション コディック あらゆるレベルの開発者向けに、Python、JavaScript、その他のテクノロジーに関するインタラクティブなコースを提供しています。

私たちの Telegramチャンネル、ここでは定期的に役立つ記事を共有し、複雑な概念を簡単な言葉で分析し、発生する問題を解決するのに役立ちます。

アクティブな人と一緒に学ぶ 開発者コミュニティ!