讓 AI 為你寫代碼 - 體驗 Github Copilot

讓 AI 為你寫代碼 – 體驗 Github Copilot

2021 年 11 月 4 日
筆記
copilot

前幾天在群里看到有大神分享 Copoilot AI 寫代碼，看了幾個截圖有點不敢相信自己的眼睛。今天趕緊自己也來體驗一下 Copoilot AI 寫代碼到底有多神奇。

申請

現在 Copoilot 還處在預覽階段，想要體驗需要先申請。等待大概一晚會收到郵件提示申請試用成功，然後就可以安裝 copilot 的插件進行體驗了。
申請的地址為 //copilot.github.com/ 。

安裝插件

打開 VSCode 的擴展面板，搜 copilot 找到插件點擊安裝。

安裝完成後會提示你需要登錄 github 進行授權。這一步在國內可能會校驗失敗，多嘗試幾次就會成功。

開始體驗

安裝完插件後就可以開始體驗了。使用其實來也非常簡單，你只需要寫下注釋比如 // 比較兩個數的大小，然後回車，稍等一會就 copilot 就會把建議代碼給列出來。或者直接寫下方法名，比如 function compareDate () { 寫下第一個 { 的時候按下回車，稍等一會 copilot 就會給出建議代碼，按一次 tab 就會生成代碼。
copilot 可能會給出多種建議的代碼，使用 alt + [ 或者 alt + ] 可以進行切換。
下面讓我們來測試一下 copilot 生成的代碼到底怎麼樣。

測試JavaScript

新建一個名為 copilottest.js 的文件。
先來一個簡單的，實現一個快速排序，這種標準的算法生成起來應該沒啥難度。直接 // 快排回車就生成出來了，看了下代碼，還不錯哈。

//快排
function quickSort(arr, left, right) {
    if (left < right) {
        var pivotIndex = partition(arr, left, right);
        quickSort(arr, left, pivotIndex - 1);
        quickSort(arr, pivotIndex + 1, right);
    }
}

再來一個比較常用的字符串轉時間，並且順便生成一個測試方法。

//把格式為"yyyy-MM-dd"的字符串轉換為Date類型
function stringToDate(str) {
    var date = eval('new Date(' + str.replace(/\d+(?=-[^-]+$)/,
        function (a) { return parseInt(a, 10) - 1; }).match(/\d+/g) + ')');
    return date;
}
//測試 stringToDate 方法是否正確
function testStringToDate() {
    var str = "2017-01-01";
    var date = stringToDate(str);
    alert(date);
}

再來帶判斷邏輯的：比較兩個數字，如果第一個數字大於第二個數字，則返回「微信」否則返回”qq”。
這個考驗一下 copilot 對中文的理解。

//比較兩個數字，如果第一個數字大於第二個數字，則返回「微信」否則返回「qq
function compare(num1, num2) {
    if (num1 > num2) {
        return "微信";
    } else {
        return "qq";
    }
}

再來一個判斷時間是星期幾的函數

//根據時間判斷星期幾
function getWeek(date) {
    var week;
    switch (date.getDay()) {
        case 0:
            week = "星期日";
            break;
        case 1:
            week = "星期一";
            break;
        case 2:
            week = "星期二";
            break;
        case 3:
            week = "星期三";
            break;
        case 4:
            week = "星期四";
            break;
        case 5:
            week = "星期五";
            break;
        case 6:
            week = "星期六";
            break;
    }
    return week;
}

再來試試 http 請求寫的怎麼樣，訪問一下百度把html返回。

//返回baidu.com的html
function getBaiduHtml() {
    var url = "//www.baidu.com";
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url, false);
    xhr.send();
    var html = xhr.responseText;
    return html;
}

JavaScript 操作 html 也很常見，那麼試試查找元素怎麼樣

//查找頁面上所有的div
function findAllDiv() {
    var divs = document.getElementsByTagName("div");
    return divs;
}

//查找所有頁面上class=user的input元素
function findAllUserInput() {
    var inputs = document.getElementsByClassName("user");
    return inputs;
}

再來試試 http 提交對象怎麼樣

//請求一個url，post一個json對象
function postJson(url, json) {
    var xhr = new XMLHttpRequest();
    xhr.open("POST", url, false);
    xhr.setRequestHeader("Content-Type", "application/json");
    xhr.send(JSON.stringify(json));
    var response = xhr.responseText;
    return response;
}

來個有點難度的，爬取博客園首頁的文章的標題

//爬取cnblogs.com所有文章的標題
function getAllArticleTitle() {
    var url = "//www.cnblogs.com/";
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url, false);
    xhr.send();
    var html = xhr.responseText;
    var reg = /<a href="(.*?)" target="_blank">(.*?)<\/a>/g;
    var result = html.match(reg);
    return result;
}

測試一下使用某個類庫來完成一些操作

// 使用hls.js播放視頻
function playVideo(video) {
    var hls = new Hls();
    hls.loadSource("//www.w3school.com.cn/i/movie.mp4");
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED, function () {
        video.play();
    });
}

看到這裡有沒有被震驚到？以上代碼全部是 copilot 自動生成的，我僅僅是寫下了幾行注釋。可以看到注釋其實寫的也很簡單，copilot 生成的代碼基本上都符合注釋的內容，可以說 copilot 對中文注釋的理解非常到位。如果你的注釋寫的更加詳細，那麼代碼就會更加符合你的要求。

測試.NET C#

讓我們在來試試 C# 代碼的提示功能怎麼樣。新建一個文件名為 copilottest.cs 的文件。
先來一個簡單的，比較兩個時間的大小。

 //比較兩個時間的大小
    public static bool CompareTime(string time1, string time2) {
        DateTime dt1 = DateTime.Parse(time1);
        DateTime dt2 = DateTime.Parse(time2);
        if (dt1 > dt2) {
            return true;
        } else {
            return false;
        }
    }

做為 CRUD boy 自然要測試下數據庫操作。
先來試試使用EF來查找用戶

//使用EF查詢用戶
    public static List<User> GetUserList() {
        using (var db = new CopiloteContext()) {
            return db.User.ToList();
        }
    }

再來試試使用 dapper 的寫法

  //使用dapper查詢用戶    
    public static List<User> GetUserListDapper() {
        using (IDbConnection db = new SqlConnection("server=.;database=copilote;uid=sa;pwd=123456")) {
            return db.Query<User>("select * from user").ToList();
        }
    }

讓我們加大難度，來個連接跟分組統計人數

   //查詢2020年每個班級學生的人數
    public static void GetClassStudentCount() {
        using (IDbConnection db = new SqlConnection("server=.;database=copilote;uid=sa;pwd=123456")) {
            db.Query<ClassStudentCount>("select class.name as classname,count(student.id) as studentcount from student left join class on student.classid=class.id where class.year=2020 group by class.name").ToList();
        }
    }

讓它自動生成改刪查操作

    class student {
        public int id { get; set; }
        public string name { get; set; }
        public int classid { get; set; }
    }

    //student的新增操作
    public static void AddStudent(student s) {
        using (IDbConnection db = new SqlConnection("server=.;database=copilote;uid=sa;pwd=123456")) {
            db.Execute("insert into student(name,classid) values(@name,@classid)", s);
        }
    }
    //student的更新操作
    public static void UpdateStudent(student s) {
        using (IDbConnection db = new SqlConnection("server=.;database=copilote;uid=sa;pwd=123456")) {
            db.Execute("update student set name=@name,classid=@classid where id=@id", s);
        }
    }
    //student的刪除操作
    public static void DeleteStudent(int id) {
        using (IDbConnection db = new SqlConnection("server=.;database=copilote;uid=sa;pwd=123456")) {
            db.Execute("delete from student where id=@id", new { id = id });
        }
    }

再來試試生成 ASP.NET MVC 的 action 方法。

class UserController : Controller {
        //從 request 獲取 name 參數查詢用戶，如果查到就返回否則返回狀態404
        public ActionResult GetUser(string name) {
            User user = UserService.GetUser(name);
            if (user != null) {
                return Json(user);
            } else {
                return HttpNotFound();
            }
        }

        //使用[FromBody]映射成user對象，並保存到數據庫
        public ActionResult AddUser([FromBody]User user) {
            UserService.AddUser(user);
            return Json(user);
        }
}

其實我還試驗了一下 JAVA 的代碼，也是毫無壓力，這裡就不貼出來了。

總結

到這裡我已經有點無話可說了。 copilot 深深的震撼了我，感覺 copilot 對注釋的理解根據人類無差別，生成的代碼基本是符合要求的，即使有一點問題那也是因為沒有上下文的原因， copilot 只能生成最常用的語句。copilot 雖然只是生成一個個短小的函數，但是再複雜的系統不都是由無數個簡單的函數組成的嗎？況且 copilot 還只是預覽版，如果再迭代幾個版本，AI 再訓練幾年那麼是不是可以有無限可能。到這裡心裏略有一點憂傷，以後一些低級代碼工作很可能被 AI 代替，程序員的入門門檻進一步降低，這到底是好事還是壞事呢？

關注我的公眾號一起玩轉技術

Tags: copilot