{%hackmd @rlongdragon/rymRQTubJx %}

# cline 使用技巧大公開
本系列文章會記錄我所使用 cline 這個 AI 輔助程式設計工具的經驗，以及我是如何使用他的。這篇文章目標客群是程式非初學、已經有開發經驗之讀者。關於是否適合使用 AI 撰寫程式請參考 [誰適合用 AI](/y_g6I7jVRby4Fx0cTFW6aw)。

:::warning with-title
注意

AI 發展日新月異，今天適用的情況可能過一個禮拜就過時了。請注意文章資訊（撰寫日期、AI 模型版本）。

如果文章過時或錯誤請[聯繫我](mailto://[e-mail])。
:::

## 介紹
:::info with-title
Cline 是什麼

Cline 是一款 vscode 的插件，你可以使用各家大語言模型來輔助你撰寫程式，並且可以在與 AI 對話規劃專案內容後，由 AI 自行幫你自動完成任務。

在 MCP 的推廣後，強大的周邊生態拓寬了他的用途。
:::

:::info with-title
開始使用 Cline

安裝與基礎使用教學請參考這部影片

https://www.youtube.com/watch?v=McNRkd5CxFY&t=308s
:::

:::info with-title
Cline 可以和 GitHub Copilot 一起使用嗎

可以
:::

### 安裝 github MCP 遇到的問題

- 開啟失敗：`spawn npx ENOENT spawn npx ENOENT`
將 MCP 配置改成如下：

    ...
        "command": "cmd",
        "args": [
            "/c",
            "npx",
            "-y",
            "@modelcontextprotocol/server-github"
        ],
    ...

如果依然失敗參考下一方法
- 開啟失敗：`npm error code ENOENT npm error syscall lstat npm error path`
你的電腦很酷，抓不到 npx 的路徑。
沒關係我們直接把他下載下來使用 node 跑他

    npm i @modelcontextprotocol/server-github -g

然後找到安裝的地方

通常在 `%appdata%/npm/node_modules/` 底下

找到 `@modelcontextprotocol/server-github` 進入後

在 `dist/` 底下會有一個 `index.js` ，將 index.js 的路徑複製 (如果沒有的話自行 `npm i; npm build` )
將 MCP 配置改成如下：

    ...
        "command": "node",
        "args": [
            "[index.js 的絕對路徑]"
        ],
    ...

就配置完成了

## 使用
除了最基礎的讓他幫你寫程式以外，這邊介紹其他用法

### 閱讀開源專案
- ==須配合 github MCP==
如果你今天想了解一個專案的結構，但你又不想花時間閱讀程式碼，你可以
> https://github.com/khanhas/PluginWebView
> 請你閱讀這個 repo 的內容以及程式碼，幫我找到他是如何實作 webview 的

然後給他閱讀 repo 的權限，他就會自動分析這個專案的原始碼，找出你的問題。