AI コーディングアシスタント「Cline」を使っていると、コード差分が正しく適用されず、意図しない変更が加わってしまう経験はありませんか？特に、改行コードの不一致や Prettier などのフォーマッターが自動実行される環境では、せっかく Cline が生成した差分が台無しになってしまうことがあります。

この記事では、Cline が差分を誤適用してしまう根本原因を明らかにし、改行コード・Prettier・自動フォーマット問題への実践的な解決策をご紹介します。問題の仕組みを理解すれば、Cline をより快適に使えるようになるでしょう。

背景

Cline の差分適用の仕組み

Cline は、AI が生成したコード変更を既存ファイルに反映する際、文字列の完全一致による差分適用を行います。具体的には、以下のような流れで動作しています。

mermaidCopy codeflowchart TD
  A["Cline がコード変更を生成"] --> B["既存ファイルを読み込み"]
  B --> C["old_string を検索"]
  C --> D{完全一致?}
  D -->|一致| E["new_string で置換"]
  D -->|不一致| F["エラー: 差分適用失敗"]
  E --> G["ファイルに書き込み"]

上記の図からわかるように、Cline は old_string（変更前の文字列）と new_string（変更後の文字列）を使って、既存コードとの完全一致を確認します。

完全一致が必要な理由

Cline の差分適用エンジンは、以下の要素まで含めて完全一致を要求します。

#	一致が必要な要素	説明
1	テキスト内容	コードそのものの文字列
2	インデント	スペースやタブの数と種類
3	改行コード	LF（\n）か CRLF（\r\n）か
4	末尾空白	行末のスペースやタブ

この厳密な一致要件により、わずかな差異でも差分適用が失敗してしまいます。特に、見た目には同じに見えるコードでも、内部的には異なる文字コードが使われている場合があるのです。

エディタと Cline の差分

多くのモダンなエディタ（VSCode、WebStorm など）には、保存時に自動的にフォーマットを整える機能があります。しかし、Cline が読み取るファイル内容は、保存前のメモリ上の状態かディスク上の最新状態かによって異なることがあります。

mermaidCopy codesequenceDiagram
  participant Dev as 開発者
  participant Editor as エディタ
  participant Cline as Cline
  participant Disk as ディスク

  Dev->>Editor: コード編集
  Editor->>Disk: 保存（自動フォーマット実行）
  Note over Disk: CRLF → LF 変換<br/>Prettier 整形
  Cline->>Disk: ファイル読み込み
  Cline->>Cline: 差分適用を試行
  Note over Cline: old_string が一致せず失敗

上記のシーケンス図が示すように、エディタの自動フォーマットによってファイル内容が変更されると、Cline が想定していた old_string と実際のファイル内容が一致しなくなります。

課題

改行コードの不一致による差分適用失敗

改行コードの違いは、最も頻繁に発生する差分適用失敗の原因です。

Windows と Unix の改行コードの違い

オペレーティングシステムによって、改行コードの標準が異なります。

#	OS	改行コード	表記	バイト表現
1	Windows	CRLF	\r\n	0D 0A
2	macOS / Linux	LF	\n	0A

改行コードによる差分適用失敗の具体例

エラーメッセージ例：

textCopy codeError: Failed to apply diff. The old_string was not found in the file.
Expected: "function hello() {\r\n  return 'world';\r\n}"
Found: "function hello() {\n  return 'world';\n}"

見た目は同じコードでも、改行コードが異なるため完全一致せず、差分適用が失敗します。

Prettier による自動整形の問題

Prettier は、コードスタイルを統一する優れたツールですが、Cline との併用では問題が発生することがあります。

保存時の自動整形による不一致

VSCode などのエディタで「保存時に自動整形」を有効にしていると、以下のような変更が自動的に適用されます。

保存前（Cline が認識しているコード）：

typescriptCopy codeconst result = { name: 'Alice', age: 30 };

保存後（Prettier 整形後）：

typescriptCopy codeconst result = { name: 'Alice', age: 30 };

Cline が差分を適用しようとした時点で、すでにファイル内容が変更されているため、old_string が見つからずエラーになります。

Prettier の設定による差異

プロジェクトごとに Prettier の設定が異なる場合も、問題が発生します。

#	設定項目	値 A	値 B	影響
1	printWidth	80	120	改行位置の変化
2	semi	true	false	セミコロンの有無
3	singleQuote	true	false	クォート記号の種類
4	trailingComma	"es5"	"all"	末尾カンマの有無

これらの設定が、Cline の期待と実際のファイル内容の差異を生み出します。

EditorConfig や Git の自動変換による問題

EditorConfig の影響

.editorconfig ファイルがプロジェクトに存在すると、エディタが自動的にファイル保存時に改行コードや文字コードを変換します。

.editorconfig の例：

iniCopy code# すべてのファイルに適用
[*]
end_of_line = lf
charset = utf-8
insert_final_newline = true
trim_trailing_whitespace = true

上記の設定により、保存時に以下の変更が自動適用されます。

• 改行コードが LF に統一される
• ファイル末尾に改行が追加される
• 行末の空白が削除される

Git の autocrlf 設定による問題

Git には、チェックアウト時やコミット時に自動的に改行コードを変換する機能があります。

bashCopy code# 設定確認コマンド
git config core.autocrlf

設定値と動作：

#	設定値	チェックアウト時	コミット時	影響
1	true	LF → CRLF	CRLF → LF	Windows で推奨
2	input	変換なし	CRLF → LF	Mac/Linux で推奨
3	false	変換なし	変換なし	変換を無効化

autocrlf が有効な環境では、ディスク上のファイルと Git リポジトリ内のファイルで改行コードが異なる状態になります。

Cline がファイルを読み込むタイミングによって、以下のような不一致が発生する可能性があります。

mermaidCopy codeflowchart LR
  repo["Git リポジトリ<br/>(LF)"] -->|checkout| disk["ディスク<br/>(CRLF)"]
  disk -->|Cline 読込| cline["Cline<br/>(CRLF 認識)"]
  repo -->|別プロセス読込| other["別ツール<br/>(LF 認識)"]

  style cline fill:#f9f,stroke:#333
  style other fill:#ff9,stroke:#333

上図のように、Cline と他のツールが異なる改行コードでファイルを認識してしまうことがあります。

解決策

改行コードの統一

プロジェクト全体での統一方針

まず、プロジェクトで使用する改行コードを決定します。一般的には LF（\n） を推奨します。

理由：

• Unix 系 OS（Linux、macOS）の標準
• Git の内部表現も LF
• Docker コンテナ内でも LF が標準

EditorConfig による自動統一

プロジェクトルートに .editorconfig を配置します。

iniCopy code# プロジェクトルート設定
root = true

iniCopy code# すべてのファイルに共通設定
[*]
end_of_line = lf
charset = utf-8
insert_final_newline = true
trim_trailing_whitespace = true

iniCopy code# 言語別の詳細設定
[*.{js,ts,jsx,tsx}]
indent_style = space
indent_size = 2

[*.{json,yml,yaml}]
indent_style = space
indent_size = 2

[*.md]
trim_trailing_whitespace = false

上記の設定により、エディタが保存時に自動的に改行コードを LF に統一してくれます。

VSCode の設定

VSCode の設定ファイル（.vscode​/​settings.json）に以下を追加します。

jsonCopy code{
  "files.eol": "\n"
}

この設定により、新規ファイル作成時のデフォルト改行コードが LF になります。

既存ファイルの改行コードを変更する場合：

1. VSCode の右下ステータスバーの改行コード表示（CRLF または LF）をクリック
2. LF を選択
3. ファイルを保存

Git の autocrlf 設定の最適化

プロジェクトごとに .gitattributes ファイルを作成し、改行コードの扱いを明示的に指定します。

gitattributesCopy code# すべてのテキストファイルを LF に統一
* text=auto eol=lf

gitattributesCopy code# 言語別の詳細設定
*.js text eol=lf
*.ts text eol=lf
*.jsx text eol=lf
*.tsx text eol=lf
*.json text eol=lf
*.md text eol=lf
*.yml text eol=lf
*.yaml text eol=lf

gitattributesCopy code# バイナリファイルの指定
*.png binary
*.jpg binary
*.gif binary
*.ico binary
*.woff binary
*.woff2 binary

.gitattributes による管理のメリット：

#	メリット	説明
1	個人設定に依存しない	各開発者の core.autocrlf 設定に関係なく統一
2	リポジトリで管理	プロジェクトの一部として設定を共有
3	ファイル種別で制御	拡張子ごとに柔軟な設定が可能

Prettier との共存

Prettier の設定ファイル作成

プロジェクトルートに .prettierrc または .prettierrc.json を作成します。

jsonCopy code{
  "semi": true,
  "singleQuote": true,
  "printWidth": 100,
  "tabWidth": 2,
  "trailingComma": "es5",
  "endOfLine": "lf"
}

重要: "endOfLine": "lf" を必ず設定し、Prettier による改行コード変換を制御します。

保存時の自動整形を一時的に無効化

Cline での作業中は、VSCode の「保存時の自動整形」を一時的に無効にすることをお勧めします。

.vscode​/​settings.json に以下を追加：

jsonCopy code{
  "editor.formatOnSave": false
}

または、ファイルタイプごとに制御：

jsonCopy code{
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.formatOnSave": false
  },
  "[typescript]": {
    "editor.formatOnSave": false
  }
}

Cline の作業後に手動フォーマット

Cline がコード変更を完了した後、手動で Prettier を実行します。

VSCode でのフォーマット実行方法：

1. Shift + Alt + F（Windows/Linux）
2. Shift + Option + F（macOS）

または、コマンドパレット（Ctrl​/​Cmd + Shift + P）から「Format Document」を実行。

コマンドラインから一括フォーマット：

bashCopy code# すべての対象ファイルをフォーマット
yarn prettier --write "src/**/*.{js,ts,jsx,tsx}"

bashCopy code# 特定のファイルのみフォーマット
yarn prettier --write src/components/Button.tsx

Prettier の除外設定

Cline が頻繁に編集する特定のファイルを、Prettier の対象から除外することも検討できます。

.prettierignore ファイルを作成：

textCopy code# ビルド出力
dist/
build/
.next/

# 依存関係
node_modules/

# Cline が管理する一時ファイル
temp/
.cline/

フォーマッターの優先度調整

ESLint と Prettier の共存

ESLint と Prettier を併用している場合、競合を避けるための設定が必要です。

必要なパッケージをインストール：

bashCopy codeyarn add -D eslint-config-prettier eslint-plugin-prettier

.eslintrc.json の設定：

jsonCopy code{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ]
}

jsonCopy code{
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

この設定により、ESLint が Prettier のルールを尊重し、競合が発生しなくなります。

EditorConfig、Prettier、ESLint の優先順位

複数のフォーマッターが存在する場合の優先順位を理解しておきましょう。

mermaidCopy codeflowchart TD
  A["ファイル保存"] --> B["EditorConfig 適用"]
  B --> C["基本設定<br/>(改行コード、文字コード)"]
  C --> D["ESLint 適用"]
  D --> E["構文チェック<br/>コーディング規約"]
  E --> F["Prettier 適用"]
  F --> G["コードスタイル整形"]
  G --> H["最終ファイル"]

上記の図が示すように、各ツールは異なる役割を持ち、順番に適用されます。

優先順位と役割の整理：

#	ツール	役割	適用タイミング	優先度
1	EditorConfig	基本設定（改行、文字コード）	保存時	高
2	ESLint	構文チェック、コーディング規約	保存時/実行時	中
3	Prettier	コードスタイル整形	保存時/手動	低

設定の統一確認

プロジェクトメンバー全員が同じ設定を使用していることを確認します。

チェックリスト：

• .editorconfig がリポジトリに含まれているか
• .prettierrc がリポジトリに含まれているか
• .gitattributes が設定されているか
• .vscode​/​settings.json が共有されているか（推奨設定として）

設定の確認コマンド：

bashCopy code# Prettier の設定を確認
yarn prettier --config .prettierrc --write --check "src/**/*.{js,ts,jsx,tsx}"

bashCopy code# ESLint の設定を確認
yarn eslint --print-config src/index.ts

Cline の差分適用を確実にする方法

ファイル保存の確認

Cline が差分を適用する前に、以下を確認しましょう。

1. すべての編集中ファイルが保存されているか
2. 自動フォーマットが実行されていないか
3. Git の変更状態が安定しているか

VSCode でのショートカット：

• すべてのファイルを保存：Ctrl​/​Cmd + K → S
• 変更されたファイルの確認：Ctrl​/​Cmd + Shift + G（Git パネルを開く）

Cline の実行前チェック

Cline に指示を出す前に、以下の状態を確認します。

bashCopy code# Git の状態確認
git status

bashCopy code# 未保存の変更がないか確認
git diff

変更がある場合は、先にコミットまたは stash してから Cline を使用することをお勧めします。

bashCopy code# 一時的に変更を退避
git stash

# Cline での作業を実施

# 変更を復元
git stash pop

Cline のエラーが発生した場合の対処

差分適用エラーが発生した場合の対処手順：

1. エラーメッセージを確認

エラーメッセージ例：

textCopy codeError: Failed to apply diff in file: src/components/Button.tsx
Expected string not found:
"const Button = () => {"

2. 該当ファイルの内容を確認

実際のファイル内容を確認します。

bashCopy code# ファイル内容の表示
cat src/components/Button.tsx

3. 改行コードを確認

bashCopy code# 改行コードの確認（Mac/Linux）
file src/components/Button.tsx

# 16進数ダンプで詳細確認
od -c src/components/Button.tsx | head

4. 手動で修正

Cline の差分適用が失敗した場合は、エラーメッセージに表示された変更内容を手動で適用します。

5. 再試行

ファイルを保存後、Cline に再度指示を出します。

具体例

ケーススタディ 1：改行コード不一致の解決

問題の発生

Cline を使って React コンポーネントを編集しようとしたところ、以下のエラーが発生しました。

textCopy codeError: Failed to apply diff in Button.tsx
Expected:
"export const Button = ({ label }) => {\r\n  return <button>{label}</button>;\r\n};"

Found:
"export const Button = ({ label }) => {\n  return <button>{label}</button>;\n};"

原因の特定

改行コードを確認します。

bashCopy code# ファイルの改行コードを確認
file src/components/Button.tsx

結果：

textCopy codesrc/components/Button.tsx: ASCII text, with LF line terminators

ファイルは LF を使用していますが、Cline は CRLF を期待していました。

解決手順

手順 1：.editorconfig を作成します。

iniCopy coderoot = true

[*]
end_of_line = lf
charset = utf-8

手順 2：.gitattributes を作成します。

gitattributesCopy code* text=auto eol=lf
*.ts text eol=lf
*.tsx text eol=lf

手順 3：既存ファイルの改行コードを統一します。

bashCopy code# すべての TypeScript ファイルの改行コードを LF に変換
find src -name "*.ts" -o -name "*.tsx" | xargs dos2unix

手順 4：VSCode の設定を追加します（.vscode​/​settings.json）。

jsonCopy code{
  "files.eol": "\n",
  "files.insertFinalNewline": true,
  "files.trimTrailingWhitespace": true
}

手順 5：Git のキャッシュをクリアして再チェックアウトします。

bashCopy code# Git のインデックスをクリア
git rm --cached -r .

# すべてのファイルを再追加
git reset --hard

結果

改行コードが LF に統一され、Cline の差分適用が正常に動作するようになりました。

統一後の確認：

bashCopy code# 改行コードの確認
file src/components/Button.tsx
# 出力: src/components/Button.tsx: ASCII text, with LF line terminators

Cline での差分適用も成功するようになりました。

ケーススタディ 2：Prettier 自動整形との競合解決

問題の発生

Cline がコードを編集した直後、ファイルを保存すると Prettier が自動実行され、Cline が次の差分を適用しようとすると失敗する問題が発生しました。

textCopy codeError: Failed to apply diff in utils.ts
Expected:
"const data={name:'Alice',age:30};"

Found:
"const data = { name: 'Alice', age: 30 };"

原因の特定

VSCode の設定で「保存時に自動整形」が有効になっており、Prettier が即座にコードを整形していました。

.vscode​/​settings.json の確認：

jsonCopy code{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

解決手順

手順 1：Cline 作業中は自動整形を無効化します。

.vscode​/​settings.json を更新：

jsonCopy code{
  "editor.formatOnSave": false,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

手順 2：Prettier の設定を明確化します（.prettierrc）。

jsonCopy code{
  "semi": true,
  "singleQuote": true,
  "printWidth": 100,
  "tabWidth": 2,
  "trailingComma": "es5",
  "endOfLine": "lf",
  "bracketSpacing": true,
  "arrowParens": "avoid"
}

手順 3：Cline の作業が完了した後、手動でフォーマットを実行します。

bashCopy code# すべての変更ファイルをフォーマット
yarn prettier --write "src/**/*.{js,ts,jsx,tsx}"

手順 4：Git のプリコミットフックで自動フォーマットを設定します。

husky と lint-staged をインストール：

bashCopy codeyarn add -D husky lint-staged

package.json に設定を追加：

jsonCopy code{
  "lint-staged": {
    "*.{js,ts,jsx,tsx}": [
      "prettier --write",
      "eslint --fix"
    ]
  }
}

Husky のフックを初期化：

bashCopy codenpx husky install
npx husky add .husky/pre-commit "npx lint-staged"

結果

Cline の作業中は自動整形が実行されず、差分適用がスムーズになりました。コミット時には自動的にフォーマットが適用され、コードスタイルの統一も維持されています。

mermaidCopy codeflowchart LR
  A["Cline 編集開始"] --> B["自動整形 OFF"]
  B --> C["Cline 差分適用"]
  C --> D["すべての変更完了"]
  D --> E["手動フォーマット実行"]
  E --> F["Git コミット"]
  F --> G["Pre-commit フック"]
  G --> H["自動フォーマット & Lint"]
  H --> I["コミット完了"]

上記のフローにより、Cline の作業効率とコード品質の両立が実現できました。

ケーススタディ 3：EditorConfig と Git の設定による統一

問題の発生

チーム開発で、メンバーによって改行コードが異なり、Cline の差分適用が不安定になる問題が発生しました。

原因の特定

各メンバーの環境設定が異なっていました。

#	メンバー	OS	Git 設定	エディタ設定	改行コード
1	Alice	Windows	autocrlf=true	デフォルト	CRLF
2	Bob	macOS	autocrlf=input	LF 強制	LF
3	Charlie	Linux	autocrlf=false	デフォルト	LF

解決手順

手順 1：プロジェクトルートに .editorconfig を作成します。

iniCopy coderoot = true

[*]
end_of_line = lf
charset = utf-8
insert_final_newline = true
trim_trailing_whitespace = true

[*.{js,ts,jsx,tsx,json,yml,yaml,md}]
indent_style = space
indent_size = 2

手順 2：.gitattributes でリポジトリレベルの統一を強制します。

gitattributesCopy code# すべてのテキストファイルを LF に統一
* text=auto eol=lf

# 言語別設定
*.js text eol=lf
*.ts text eol=lf
*.jsx text eol=lf
*.tsx text eol=lf
*.json text eol=lf
*.yml text eol=lf
*.yaml text eol=lf
*.md text eol=lf

# バイナリファイル
*.png binary
*.jpg binary
*.gif binary
*.woff binary
*.woff2 binary

手順 3：プロジェクトの推奨設定を .vscode​/​settings.json で共有します。

jsonCopy code{
  "files.eol": "\n",
  "files.insertFinalNewline": true,
  "files.trimTrailingWhitespace": true,
  "editor.formatOnSave": false,
  "prettier.endOfLine": "lf"
}

手順 4：README にセットアップ手順を記載します。

README.md に追加：

markdownCopy code# 開発環境のセットアップ

## 必須設定

1. EditorConfig プラグインをインストール
2. Prettier プラグインをインストール
3. Git 設定を確認

```bash
# Git の改行コード設定を確認
git config core.autocrlf

# input または false に設定
git config core.autocrlf input
```

4. 既存ファイルの改行コードを統一

```bash
# すべてのファイルを再チェックアウト
git rm --cached -r .
git reset --hard
```

手順 5：既存ファイルの改行コードを一括変換します。

bashCopy code# Git の管理下にあるすべてのファイルの改行コードを LF に統一
git ls-files -z | xargs -0 dos2unix 2>/dev/null || true

# 変更をコミット
git add -A
git commit -m "chore: 改行コードを LF に統一"

結果

チーム全員の環境で改行コードが LF に統一され、Cline の差分適用が安定して動作するようになりました。

統一後の確認方法：

bashCopy code# プロジェクト内のすべてのファイルの改行コードを確認
find src -type f \( -name "*.ts" -o -name "*.tsx" -o -name "*.js" -o -name "*.jsx" \) -exec file {} \; | grep -v "LF"

上記コマンドで何も出力されなければ、すべてのファイルが LF で統一されています。

新規メンバーの参加時も、.editorconfig と .gitattributes により自動的に設定が適用されるため、手動設定の手間が省けました。

まとめ

Cline の差分適用が失敗する問題は、改行コード・Prettier・自動フォーマットの設定不一致が主な原因です。この記事では、これらの問題を体系的に理解し、実践的な解決策を提供しました。

重要なポイントをまとめます。

改行コード統一の必須設定

プロジェクトで改行コードを LF に統一するため、以下のファイルを必ず配置しましょう。

• .editorconfig：エディタレベルでの統一
• .gitattributes：リポジトリレベルでの統一
• .vscode​/​settings.json：VSCode の推奨設定

これらの設定により、開発者の個人環境に依存せず、プロジェクト全体で一貫した改行コードが保たれます。

Prettier との共存戦略

Cline 作業中は以下の方針を取ることで、差分適用の成功率が大幅に向上します。

• 保存時の自動整形を無効化
• Cline の作業完了後に手動でフォーマット実行
• Git のプリコミットフックで最終的なフォーマット統一

この段階的アプローチにより、Cline の作業効率とコード品質の両立が実現できます。

チーム開発での統一管理

チームで Cline を使用する場合は、環境設定の統一が不可欠です。

• 設定ファイルをリポジトリに含める
• README にセットアップ手順を明記
• 既存ファイルの改行コードを一括変換
• 新規メンバー参加時のチェックリストを用意

これらの施策により、メンバー全員が同じ環境で Cline を快適に使えるようになります。

トラブルシューティングの基本

差分適用エラーが発生した場合の基本的な確認事項です。

1. 改行コードの確認（file コマンドや od コマンド）
2. Git の変更状態の確認（git status、git diff）
3. エディタの自動整形設定の確認
4. Prettier と ESLint の設定確認

これらを順番にチェックすることで、問題の原因を迅速に特定できます。

実装すべき順序

この記事で紹介した解決策を実装する際は、以下の順序で進めることをお勧めします。

1. .editorconfig の作成（基本設定）
2. .gitattributes の作成（Git レベルの統一）
3. 既存ファイルの改行コード一括変換
4. .prettierrc の作成（フォーマット設定の明確化）
5. VSCode 設定の調整（自動整形の制御）
6. Husky と lint-staged の導入（自動化）

段階的に導入することで、既存プロジェクトへの影響を最小限に抑えながら、Cline との共存環境を構築できます。

Cline は強力なコーディングアシスタントですが、環境設定が適切でないとその能力を十分に発揮できません。この記事で紹介した設定を適用することで、Cline の差分適用がスムーズになり、開発効率が大きく向上するでしょう。

ぜひ、あなたのプロジェクトでもこれらの設定を試してみてください。快適な Cline ライフをお楽しみください。

関連リンク

• Cline 公式サイト
• EditorConfig 公式サイト
• Prettier 公式ドキュメント
• Git 改行コード設定ガイド
• VSCode 設定ガイド
• ESLint と Prettier の統合
• Husky 公式ドキュメント
• lint-staged 公式リポジトリ