vscode 插件开发之代码高亮与代码模板

最近在学用 openscad 弄 3d 建模，发现自带的编辑器太烂了，没有代码提示，只要高亮，这很不利于学习啊。

那能不能换个编辑器呢？让 vscode？真别说，还真有插件，但是没有 API 提示，闹搞哦。那只能自己动手丰衣足食了。

先研究一下别人代码时怎么写的，学会了到时候再自己开发个好用的。

研究插件 scad 的 github 地址。

文件夹布局：

.
├── .gitignore
├── images
│   └── logo.png
├── LICENSE
├── package.json
├── README.md
├── scad.configuration.json
├── snippets
│   └── snippets.json
├── syntaxes
│   └── scad.tmLanguage
├── vsc-extension-quickstart.md
└── .vscode
    └── launch.json

我们重点时看下面这些文件或者文件夹

.
├── package.json
├── scad.configuration.json
├── snippets
│   └── snippets.json
├── syntaxes
    └── scad.tmLanguage

syntaxes

这个文件夹内放着语法高亮的文件。因为 vscode 标记引擎时 TextMate 提供 ^[1]，所以文件后缀是.tmLanguage。

而作者也在 README 中给出 scad.tmLanguage项目地址。

因为我也是刚刚接触 TextMate，这个里面的东西放以后讲吧。

snippets

这个文件夹内放代码片段的。如过 TextMate 有提供.tmSnippets文件/文件夹，可以用yo code导入生成为适合 vscode 使用的文件

➜ yo code  

     _-----_     ╭──────────────────────────╮
    |       |    │   Welcome to the Visual  │
    |--(o)--|    │   Studio Code Extension  │
   `---------´   │        generator!        │
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |     
   __'.___.'__   
 ´   `  |° ´ Y ` 

? What type of extension do you want to create? New Code Snippets
Folder location that contains Text Mate (.tmSnippet) and Sublime snippets (.sublime-snippet) or press ENTER to start with a new snippet file.
? Folder name for import or none for new: OpenSCAD.tmbundle/Snippets
34 snippet(s) found and converted.

Problems while converting: 
OpenSCAD.tmbundle/Snippets/difference.tmSnippet: Missing property 'tabTrigger'. Snippet skipped.
OpenSCAD.tmbundle/Snippets/intersection.tmSnippet: Missing property 'tabTrigger'. Snippet skipped.
OpenSCAD.tmbundle/Snippets/union.tmSnippet: Missing property 'tabTrigger'. Snippet skipped.
? What's the name of your extension? openscad
? What's the identifier of your extension? openscad
? What's the description of your extension? 
Enter the language for which the snippets should appear. The id is an identifier and is single, lower-case name such as 'php', 'javascript'
? Language id: scad
   create openscad/.vscode/launch.json
   create openscad/package.json
   create openscad/vsc-extension-quickstart.md
   create openscad/README.md
   create openscad/CHANGELOG.md
   create openscad/snippets/snippets.code-snippets
   create openscad/.vscodeignore

Your extension openscad has been created!

To start editing with Visual Studio Code, use the following commands:

     cd openscad
     code .

Open vsc-extension-quickstart.md inside the new extension for further instructions
on how to modify, test and publish your extension.

For more information, also visit http://code.visualstudio.com and follow us @code.

我需要的文件在这里openscad/snippets/snippets.code-snippets，复制到我们项目中，并把package.json的引用改为这个文件。

这个文件内容比较多，拿出部分代码分析：

{
    "cir": {
        "prefix": "cir",
        "body": "circle(r=${1:10});",
        "description": "circle",
        "scope": "source.scad"
    },
    "col": {
        "prefix": "col",
        "body": "color([${1:0}/255, ${2:0}/255, ${3:0}/255]) {\r\n\t${0}\r\n}",
        "description": "color",
        "scope": "source.scad"
    },
    "cu": {
        "prefix": "cu",
        "body": "cube(size=[${1:10}, ${2:10}, ${3:10}], center=${4:true});",
        "description": "cube",
        "scope": "source.scad"
    }
}

prefix 定义一个或多个触发词，这些触发词在 IntelliSense 中显示该片段。子字符串匹配是在前缀上执行的，因此，在这种情况下，“ fc”可以匹配“ for-const”。

body 是一个或多个内容行，插入时将作为多行内容加入。换行符和嵌入的选项卡将根据插入代码段的上下文进行格式化。

description 是 IntelliSense 显示的代码段的可选描述。

scope 属性将范围限定为特定语言

更多详见文档

scad.configuration.json

这个文件中规定了语言配置，看了一下作者并未对此做修改。更多详情 更多详见文档。

package.json

很熟悉的文件，然而微软对这个文件添加了 vscode 特殊熟悉。

{
    "name": "scad",
    "description": "scad support for OpenSCAD",
    "version": "1.0.1",
    "publisher": "efbenson",
    "icon": "images/logo.png",
    "license": "SEE LICENSE IN LICENSE.txt",
    "repository": {
        "type": "git",
        "url": "https://github.com/efbenson/vscode-lang-scad.git"
    },
    "engines": {
        "vscode": "^0.10.1"
    },
    "categories": [
        "Languages"
    ],
    "contributes": {
        "languages": [{
            "id": "scad",
            "aliases": ["OpenSCAD", "scad"],
            "extensions": [".scad"],
            "configuration": "./scad.configuration.json"
        }],
        "snippets": [
            {
                "language": "scad",
                "path": "./snippets/snippets.json"
            }
        ],
        "grammars": [{
            "language": "scad",
            "scopeName": "source.scad",
            "path": "./syntaxes/scad.tmLanguage"
        }]
    }
}

icon

这个属性指定的是插件的 icon

contributes

这个是 vscode 特有的，里面有三个属性

• languages: 语言配置，可以看到引入了之前提到的 scad.configuration.json
• snippets: 代码片段，刚刚我们生成的snippets在这个位置引入
• grammars: scad.tmLanguage项目 的scad.tmLanguage在这个位置引入。

这样就完成了所以的语法高亮和代码模板的制作。

1. https://macromates.com/manual/en/language_grammars ↩