繼 Vite 之后,ESLint 也接入了 AI!
在之前的文章中有分享過 Vite 是首個接入 AI 能力的構(gòu)建工具,而現(xiàn)在 ESLint 也緊隨其后,使用 AI 來管理代碼規(guī)范!
作為一名前端開發(fā),咱們平時寫代碼的時候,代碼規(guī)范這事兒一直挺讓人頭疼的吧。
不過現(xiàn)在好消息來了!ESLint 這工具居然也開始用 AI 了,以后咱們可以讓 AI 幫著管代碼規(guī)范了!
一、ESLint 為啥要用 AI ?
ESLint 大家都熟悉吧,就是用來檢查 JavaScript 代碼問題的工具。
現(xiàn)在它支持 Model Context Protocol(MCP)了,簡單來說,就是能讓 AI 模型跟它配合起來。
這樣 AI 就能在咱們常用的開發(fā)工具,比如 IDE 里直接用 ESLint,幫咱們更智能地檢查代碼、分析問題。
特別是用 GitHub Copilot 這類 AI 編程助手的小伙伴,這功能太實用了!
以后寫代碼的時候,AI 就能在旁邊幫著盯著代碼規(guī)范,及時提醒哪兒寫得不對,減少出錯的可能。
二、怎么在 VS Code 和 Cursor 里用上 ESLint 的 AI 功能?
1. 在 VS Code 里設(shè)置
先得安裝個 Copilot Chat 擴展。然后跟著這幾步走:
(1) 建個配置文件
在項目根目錄下新建個文件,叫 .vscode/mcp.json,內(nèi)容寫成這樣:
{
"servers": {
"ESLint": {
"type": "stdio",
"command": "npx",
"args": ["eslint", "--mcp"]
}
}
}
這配置就是告訴 VS Code 怎么啟動 ESLint 的 AI 功能。
(2) 全局啟用(可選)
如果想在所有項目里都能用這個功能,就選“用戶設(shè)置” ,把上面的配置加到 settings.json 里。
這樣不管在哪個項目里,AI 都能幫著管代碼規(guī)范。
2. 在 Cursor 里設(shè)置
步驟也簡單:
(1) 建配置文件
在項目目錄里建個 .cursor/mcp.json,內(nèi)容是:
{
"mcpServers": {
"eslint": {
"command": "npx",
"args": ["eslint", "--mcp"],
"env": {}
}
}
}
(2) 全局配置(可選)
要是想在所有 Cursor 項目里都用上,就在主目錄建個 ~/.cursor/mcp.json 文件,內(nèi)容跟上面一樣。
(3) 檢查工具是否可用
配置好了以后,去 Cursor 的 MCP 設(shè)置頁看看“可用工具”里有沒有 ESLint MCP 服務(wù)器。
要是有了,就說明設(shè)置成功了,AI 就能幫你檢查代碼規(guī)范了。
三、用 AI 管代碼規(guī)范有什么好處?
用上 ESLint 的 AI 功能,好處可不少:
- 提高開發(fā)效率:AI 能快速發(fā)現(xiàn)代碼里的問題,咱們不用花太多時間自己去找,寫代碼速度自然就上去了。
- 提升代碼質(zhì)量:AI 檢查代碼比人更細致,能確保代碼符合規(guī)范,減少潛在問題。
- 團隊協(xié)作更順暢:一個團隊里大家代碼風(fēng)格不一致很讓人頭疼。AI 幫著管代碼規(guī)范,大家寫出來的代碼風(fēng)格更統(tǒng)一,協(xié)作起來也更輕松。
ESLint 接入 AI 真的是開發(fā)流程里的一大進步。
以后寫代碼,有 AI 幫著管規(guī)范,咱們可以更專注于實現(xiàn)功能。
還沒試過的小伙伴趕緊在自己的項目里試試吧!相信用過之后,你會越來越依賴這個強大的功能,讓 AI 成為你開發(fā)過程中的得力助手!
ESLint MCP 官方文檔:https://eslint.org/docs/latest/use/mcp