vscode扩展包开发-vscode-extension

2019年12月24日 10:45 阅读 158 评论 0

前言

这几天一直在使用md写笔记,但是项目过程中,我不想写纯英文的文档,或者纯中文的,每次对某个句子翻译都太发咋了,还需要贴上去,或者是使用已有的翻译包获取翻译粘贴上去。。。

那既然这样,我想这自己写一个扩展包,可以获得光标词前的翻译并打印下来成为文本,另外还想获取单词的更多词义,以后也方便我写文档。

参考资料:

vscode原址github

vscode官方文档-api

基础环境的准备,创建扩展包项目

确保已经安装:

安装 Yeoman VS Code Extension Generator :

(env) PS F:\Program Files> npm install  -g yo generator-code

npm WARN deprecated [email protected]: cross-spawn no longer requires a build toolchain, use it instead

C:\Users\ASUS\AppData\Roaming\npm\yo -> C:\Users\ASUS\AppData\Roaming\npm\node_modules\yo\lib\cli.js

C:\Users\ASUS\AppData\Roaming\npm\yo-complete -> C:\Users\ASUS\AppData\Roaming\npm\node_modules\yo\lib\completion\index.js



> [email protected] postinstall C:\Users\ASUS\AppData\Roaming\npm\node_modules\generator-code\node_modules\ejs

> node ./postinstall.js



Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)





> [email protected] postinstall C:\Users\ASUS\AppData\Roaming\npm\node_modules\yo\node_modules\core-js

> node -e "try{require('./postinstall')}catch(e){}"



Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!



The project needs your help! Please consider supporting of core-js on Open Collective or Patreon: 

> https://opencollective.com/core-js 

> https://www.patreon.com/zloirock 



Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)





> [email protected] postinstall C:\Users\ASUS\AppData\Roaming\npm\node_modules\yo\node_modules\spawn-sync

> node postinstall





> [email protected] postinstall C:\Users\ASUS\AppData\Roaming\npm\node_modules\yo

> yodoctor





Yeoman Doctor

Running sanity checks on your system



√ No .bowerrc file in home directory

√ Global configuration file is valid

√ NODE_PATH matches the npm root

√ No .yo-rc.json file in home directory

√ Node.js version

√ npm version

√ yo version



Everything looks all right!

+ [email protected]

+ [email protected]

added 993 packages from 382 contributors in 220.566s

(env) PS F:\Program Files>

之后我们使用Yeoman开始,通过在输入bash命令yo code来进入yeoman环境

之后会产生一个人机交互界面选择菜单,选择你所想创建的扩展包类型,通过上下左右键,这里我们选择New Extension (JavaScript),javascript类型。

yo code

? ==========================================================================

We're constantly looking for ways to make yo better! 

May we anonymously report usage statistics to improve the tool over time? 

More info: https://github.com/yeoman/insight & http://yeoman.io

========================================================================== Yes



     _-----_     ╭──────────────────────────╮

    |       |    │   Welcome to the Visual  │

    |--(o)--|    │   Studio Code Extension  │

   `---------´   │        generator!        │

    ( _´U`_ )    ╰──────────────────────────╯

    /___A___\   /

     |  ~  |

   __'.___.'__

 ´   `  |° ´ Y `



? What type of extension do you want to create?

  New Extension Pack

  New Language Pack (Localization)

  New Extension (TypeScript)

> New Extension (JavaScript)

  New Color Theme

  New Language Support

  New Code Snippets

(Move up and down to reveal more choices)

进行创建扩展包的基础信息,我自己是使用的npm,好像还可以选择其他选项:

? What type of extension do you want to create? New Extension (JavaScript)

? What's the name of your extension? show-translation

? What's the identifier of your extension? show-translation

? What's the description of your extension? show-translation-description

? Enable JavaScript type checking in 'jsconfig.json'? Yes

? Initialize a git repository? Yes

? Which package manager to use? npm

创建王城包的基础配置信息:

在当前目录创建好文件夹show-translation,并配置初始文件

这个人机交互界面蛮人性化的,都有提醒。

   create show-translation\.vscode\extensions.json

   create show-translation\.vscode\launch.json

   create show-translation\test\runTest.js

   create show-translation\test\suite\extension.test.js

   create show-translation\test\suite\index.js

   create show-translation\.vscodeignore

   create show-translation\.gitignore

   create show-translation\README.md

   create show-translation\CHANGELOG.md

   create show-translation\vsc-extension-quickstart.md

   create show-translation\jsconfig.json

   create show-translation\extension.js

   create show-translation\package.json

   create show-translation\.eslintrc.json





I'm all done. Running npm install for you to install the required dependencies. If this fails, try running the command yourself.





[ .................] \ fetchMetadata: sill pacote range manifest for [email protected]^3.0.0 fetched in 

调试扩展程序

我们使用vscode打开之前创建好的文件夹。

按下F5进行调试,我们会看到弹出一个新的vscode的窗口:

原创文章,转载请注明出处:https://boywithacoin.cn/article/vscodekuo-zhan-bao-kai-fa-vscode-extension/


您尚未登录,请 登录注册 后评论
    0 人参与 | 0 条评论
    暂时没有评论,欢迎来尬聊!