一、緣起

第一次知道codeMirror 是在一個(gè)開源項(xiàng)目中--vue-element-admin，這個(gè)項(xiàng)目讓我受益匪淺，截至2019年4月18日，已有31259star，它是我的vue.js啟蒙老師，真心感謝項(xiàng)目的擁有者--花褲衩。

項(xiàng)目中的一個(gè)json編輯器的組件JsonEditor，里面引入了codeMirror，也是在這個(gè)組件里，第一次知道這樣在組件里引入一個(gè)js文件：

require('script-loader!jsonlint')

學(xué)習(xí)vue的同學(xué)一定不要錯(cuò)過這個(gè)項(xiàng)目。

二、說說 codeMirror

codeMirror是個(gè)在瀏覽器直接運(yùn)行的代碼編輯器，能支持100多種語言，功能強(qiáng)大，以插件的形式組織代碼。

1.好印象

• 功能強(qiáng)大
• 各語言基本都能找到支持項(xiàng)
• 文檔齊全
• demo多,一例勝千言，這一點(diǎn)，跟three.js （一個(gè)WEBGL庫）的思路一致
• 不依賴任何其他庫（比如 jQuery）

2.“壞”印象

• 沒有中文文檔
• 英文文檔不夠細(xì)致，好多需要結(jié)合源代碼猜，這個(gè)比較頭疼
• 代碼基本沒有注釋，閱讀源碼比較困難
• 創(chuàng)建一門新的編程語言除了復(fù)制其他語言的方法（我用的方法）外，另一種方法是：學(xué)習(xí)作者名下另一個(gè)開源項(xiàng)目grammar-mode，這個(gè)項(xiàng)目定義了一門“語言”（或者說是一套新的規(guī)則，定義了一種.grammar擴(kuò)展名的文件），這個(gè)項(xiàng)目的只有一個(gè)README.md,除了命令行那部分，其他說明看不太懂；要想學(xué)通這門“語言”，需要結(jié)合作者的另一個(gè)項(xiàng)目作為參考google-modes...反正，學(xué)習(xí)成本有點(diǎn)高。

三、出發(fā)

接下來，我將記錄我使用codeMirror 過程中遇到的坑和喜悅，我相信它能使我成長，go!