vscode插件开发，发布

2019年03月27日发布阅读(3436) 作者：Jerman

开发插件时的准备

安装nodejs，本文nodejs版本10.15.0
安装npm，本文npm版本6.4.1
安装yo
```
npm install -g yo
```
安装generator-code
```
npm install -g generator-code
```
注册microsoft用户，获取Personal Access Token
1、注册链接： https://signup.live.com/signup ，live.com 是微软的，别怕，放心注册
2、注册完成后，登录后，创建project，添加token，并记录这个token，为发布做准备。发布的时候需要这个token(Personal Access Token)
登录链接： https://azure.microsoft.com/zh-cn/
登录后访问： https://dev.azure.com/landun/_usersSettings/tokens (landun换成你的用户名)
也可以点下图的security
3、添加新token，需要注意两个问题：一、”Organization”要选择All accessible organizations，二、Expiration (UTC)选择Custom defined，日期设置为1年吧。
添加token成功后，注意要复制保存一下，这个token只会出现一次。否则需要重新创建

初始化vscode插件

1、项目目录下执行yo code

第一步: ? What type of extension do you want to create? (Use arrow keys)

是初始化插件类型，本例是创建代码高亮的，那我们选择”New Language Support”，还有其他类型，如”TypeScript[New Extension (TypeScript)]”，”Javascript[New Extension (JavaScript)]”，”主题颜色[New Color Theme]”，”代码片断[New Code Snippets]”等


     _-----_     ╭──────────────────────────╮
    |       |    │   Welcome to the Visual  │
    |--(o)--|    │   Studio Code Extension  │
   `---------´   │        generator!        │
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `
? What type of extension do you want to create? (Use arrow keys)
> New Extension (TypeScript)
  New Extension (JavaScript)
  New Color Theme
  New Language Support
  New Code Snippets
  New Keymap
  New Extension Pack
(Move up and down to reveal more choices)

第二步：? URL or file to import, or none for new:
这一步直接Enter 就好了，不用填

第三步：? What's the name of your extension?
填写插件名称

第三步：`? What’s the identifier of your extension?
填写插件标识符

第四步：? What's the description of your extension?
填写插件描述

第五、六步：
填写语言id和name

Enter the id of the language. The id is an identifier and is single, lower-case name such as 'php', 'javascript'
? Language id: dotjs
Enter the name of the language. The name will be shown in the VS Code editor mode selector.
? Language name: dotjs
Enter the file extensions of the language. Use commas to separate multiple entries (e.g. .ruby, .rb)

第七步：? File extensions: ()
填写文件后缀

例子代码

D:\project\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 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:
D:\project\vscode>
D:\project\vscode>yo code
     _-----_     ╭──────────────────────────╮
    |       |    │   Welcome to the Visual  │
    |--(o)--|    │   Studio Code Extension  │
   `---------´   │        generator!        │
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `
Unable to fetch latest vscode version: Error: connect ETIMEDOUT 104.42.78.153:443
? 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?  test
? What's the identifier of your extension? test
? What's the description of your extension? test
Enter the id of the language. The id is an identifier and is single, lower-case name such as 'php', 'javascript'
? Language id: dotjs
Enter the name of the language. The name will be shown in the VS Code editor mode selector.
? Language name: dotjs
Enter the file extensions of the language. Use commas to separate multiple entries (e.g. .ruby, .rb)
? File extensions: .tpl
Enter the root scope name of the grammar (e.g. source.ruby)
? Scope names: dotjs
   create test\syntaxes\dotjs.tmLanguage.json
   create test\.vscode\launch.json
   create test\package.json
   create test\README.md
   create test\CHANGELOG.md
   create test\vsc-extension-quickstart.md
   create test\language-configuration.json
   create test\.vscodeignore
Your extension test has been created!
To start editing with Visual Studio Code, use the following commands:
     cd test
     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.
D:\project\vscode>

代码开发

插件初始化之后，剩下的就是针对不对的插件写不同的代码了。这里略过，可参考官网内容

https://code.visualstudio.com/api

相关技巧

按F5可以直接调试
在新开的vscode中，按Ctrl+R会重新加载
添加配置荐，直接在package.json中设置，如

{
    "contributes": {
        "languages": [{
            "id": "dotjs",
            "aliases": ["doT", "dotjs"],
            "extensions": [".tpl"],
            "configuration": "./dotjs.configuration.json"
        }],
        "grammars": [{
            "language": "dotjs",
            "scopeName": "text.html.dotjs",
            "path": "./syntaxes/dotjs.tmLanguage"
        }],
        "configuration": {
            "type": "object",
            "title": "dotjs configuration",
            "properties": {
              "dotjs.1Brackets": {
                "type": "string",
                "default": "<",
                "description": "第1标识符, 默认: <"
              },
              "dotjs.2Brackets": {
                "type": "string",
                "default": "$",
                "description": "第2标识符,默认: $"
              },
              "dotjs.3Brackets": {
                "type": "string",
                "default": "$",
                "description": "第3标识符,默认: $"
              },
              "dotjs.4Brackets": {
                "type": "string",
                "default": ">",
                "description": "第3标识符,默认: >"
              }
            }
        }
    }
}

插件内容开发好之后，设置好了README.md，package.json的各个参数后，就可以打包了

插件打包

打包需要安装vsce

npm install -g vsce

打包:

vsce package

插件发布

1、执行vsce create-publisher

这里的tokenPersonal Access Token是在本文最开始要你保存的token，这里就用到了

D:\project\vscode\xndotjs>vsce create-publisher landun
Publisher human-friendly name: (landun)
E-mail: master@imqianduan.com
Personal Access Token: ****************************************************
 DONE  Created publisher 'landun'.

这一步可能会报的错误，解决办法：回到本文创建token时要注意的两点上

 ERROR  Failed request: (401)

 ERROR  Failed Request: Unauthorized(401) - https://marketplace.visualstudio.com/_apis/gallery
 ERROR  Be sure to use a Personal Access Token which has access to **all accessible accounts**.
See https://code.visualstudio.com/api/working-with-extensions/publishing-extension#publishing-extensions for more information.

2、在项目目录下执行

vsce publish

一般会直接发布成功

参考

https://code.visualstudio.com/api/working-with-extensions/publishing-extension
https://segmentfault.com/a/1190000014758981
https://code.visualstudio.com/api/language-extensions/syntax-highlight-guide
https://juejin.im/entry/5b50509d5188251967307780

工具类

目录