Atom 微信小程式檔案程式碼高亮

宇宙全棧發表於2018-06-13

小程式相關的檔案字尾名是 .wxml, .wxss, .wxs ,可是 Atom 編輯器預設不會自動識別這些型別的檔案,開啟這些檔案只能看到反人類的黑白程式碼。

一個優雅的方案是,通過修改 Atom 的配置,使 Atom 把 .wxml 當成 .html, 把 .wxss 當成 .css, 把 .wxs 當成 .js. 這樣在開啟這些型別的檔案時就會看到彩色的程式碼了。

操作步驟

1、開啟 config.cson 配置檔案

同時按下快捷鍵 Command + Shift + P 喚起命令皮膚, 輸入 Application: Open Your Config , 點選Enter鍵 , 將會開啟檔案 config.cson

Atom 微信小程式檔案程式碼高亮

2、修改 config.cson 配置檔案

core 下面新增

customFileTypes:
  'text.html.basic': [
    'wxml'
  ]
  'source.css': [
    'wxss'
  ]
  'source.js': [
    'wxs'
  ]
複製程式碼

檔案大致結構

"*":
  core:
    customFileTypes:
      'text.html.basic': [
        'wxml'
      ]
      'source.css': [
        'wxss'
      ]
      'source.js': [
        'wxs'
      ]
複製程式碼

這個檔案中可能還有很多其他的屬性,因為有些外掛會自動將配置加到這個檔案中

配置完成! 重新開啟 .wxml, .wxss, wxs 字尾的檔案,將會看到彩色的程式碼。

原理

其實,Atom 並不是把 wxml 檔案識別成 html檔案,而是用和 html 檔案一樣的語法規則去高亮顯示 wxml 檔案中的程式碼。text.html.basic, source.css, source.js 就是相應的語法規則名稱,這些名稱可以在 language-xxx 這樣的 Atom 內建或第三方的 Package 中找到。

參考:

flight-manual.atom.io/using-atom/…

flight-manual.atom.io/using-atom/…

相關文章