为新语言编写Visual Studio Code语法高亮插件

简介: 为一个简单的实验编程语言编写Visual Studio Code插件, 实现语法高亮. Develop a plugin for Visual Studio Code, to achieve syntax highlight for a simple experimental programming language.

本文源码库: program-in-chinese/quan4-highlighter

语法高亮是一个开发环境的基本功能. 此文尝试为之前的"圈4"语言(详见编程语言试验之Antlr4+JavaScript实现"圈4")编写一个高亮插件, 仅为演示之用. 参考的是Visual Studio Code官方文档: Add Themes, Snippets and Colorizers to Visual Studio Code. 首先创建插件如下, 为".圈4"的源文件添加高亮:

$ yo code

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

? What type of extension do you want to create? New Language Support
Enter the URL (http, https) or the file path of the tmLanguage grammar or press ENTER to start with a new grammar.
? URL or file to import, or none for new: 
? What's the name of your extension? 圈4高亮
? What's the identifier of your extension? quan4-highlighter
? What's the description of your extension? 圈4语言的VS Code插件
? What's your publisher name (more info: https://code.visualstudio.com/docs/tools/vscecli#_publishing-extensions)? nobody
Enter the id of the language. The id is an identifier and is single, lower-case name such as 'php', 'javascript'
? Language id: quan4
Enter the name of the language. The name will be shown in the VS Code editor mode selector.
? Language name: 圈4
Enter the file extensions of the language. Use commas to separate multiple entries (e.g. .ruby, .rb)
? File extensions: .圈4
Enter the root scope name of the grammar (e.g. source.ruby)
? Scope names: source.圈4
   create quan4-highlighter/syntaxes/quan4.tmLanguage.json
   create quan4-highlighter/.vscode/launch.json
   create quan4-highlighter/package.json
   create quan4-highlighter/README.md
   create quan4-highlighter/CHANGELOG.md
   create quan4-highlighter/vsc-extension-quickstart.md
   create quan4-highlighter/language-configuration.json
   create quan4-highlighter/.vscodeignore
   create quan4-highlighter/.gitignore

Your extension quan4-highlighter has been created!

默认语法文件syntaxes/quan4.tmLanguage.json中, 关键词的模式匹配为:

"match": "\\b(if|while|for|return)\\b"

直接改为:

"match": "求约数"

运行插件后(F5新运行, Command+R可以在插件修改后刷新)实现:

很明显它是最直接的正则表达式匹配. 还不确定是否能做到空格敏感, 以及语法检验.

这只是第一步, 之后还需对语法定义格式(TextMate Manual & Language Grammars)进行深入学习.

2017-12-24

相关文章
|
6月前
|
JavaScript C# 开发工具
22款Visual Studio Code实用插件推荐
Visual Studio Code是一个轻量级但功能强大的源代码编辑器,轻量级指的是下载下来的Visual Studio Code其实就是一个简单的编辑器,强大指的是支持多种语言的环境插件拓展,也正是因为这种支持插件式安装环境开发让Visual Studio Code成为了开发语言工具中的霸主,让其同时支持开发多种语言成为了可能。俗话说的好:“工欲善其事,必先利其器”,安装一些实用插件对自己日常的开发和工作效率能够大大的提升,避免996从选一款好的开发插件开始。以下是我整理的一些比较实用的Visual Studio Code插件希望对大家有用,大家有更好的插件推荐可在文末留言🤞。
255 0
|
22天前
|
前端开发 JavaScript C#
CodeMaid:一款基于.NET开发的Visual Studio代码简化和整理实用插件
CodeMaid:一款基于.NET开发的Visual Studio代码简化和整理实用插件
|
1月前
|
开发框架 .NET 开发工具
visualstudio如何加入工作插件---Web developer工具
visualstudio如何加入工作插件---Web developer工具
21 0
|
6月前
|
Go
VsCode(Visual Studio Code) 安装插件教程
VsCode(Visual Studio Code) 安装插件教程
159 0
|
前端开发 JavaScript PHP
Visual Studio Code的使用心得与常用免费插件使用技巧大全总结 老板夸奖我是开发小能手!
这就是我一直在使用的免费代码编辑神器, 它的优点太多了, 有: 智能感知、代码调试、内置 Git 命令、可扩展和可定制都相当牛,最关键的是免费开源!!
352 3
Visual Studio Code的使用心得与常用免费插件使用技巧大全总结 老板夸奖我是开发小能手!
|
6月前
|
开发工具 开发者 git
2023 Visual Studio Code 插件推荐:18 个提高开发效率的常用插件
Visual Studio Code (简称VSCode) 是一款强大的开源代码编辑器,它拥有众多功能强大的扩展插件,使得开发者可以根据自己的需求来定制编辑器的功能和外观。在本文中,我们将分享一些非常实用的 VSCode 插件,这些插件将提高您的开发效率,使编码变得更加愉快。
450 0
|
Web App开发 JavaScript 前端开发
Visual Studio Code 常见的配置、常用好用插件以及【vsCode 开发相应项目推荐安装的插件】
Visual Studio Code 常见的配置、常用好用插件以及【vsCode 开发相应项目推荐安装的插件】
316 0
|
计算机视觉 开发者 C++
实用分享-Visual Studio图像查看插件(Image Watch)
实用分享-Visual Studio图像查看插件(Image Watch)
405 0
|
SQL 前端开发 JavaScript
18款Visual Studio实用插件
18款Visual Studio实用插件
415 0
|
并行计算 JavaScript 前端开发
Visual Studio Code 珍藏好久的插件推荐(中)
Visual Studio Code 珍藏好久的插件推荐(中)