VSCode插件之字数统计、翻译

hello world 初体验

环境条件：

npm
git
最新版的VS Code（我的是1.32.3，结果测试的时候说我版本太低，就升级到了1.33.0）

根据官网给的链接your-first-extension, 我们需要安装一个代码生成工具，减少重复代码的编写。

npm install -g yo generator-code

万事俱备只欠东风，接下来试试官网的hello world,首先是把项目结构搭建出来。

yo code

根据提示，输入自己想做的插件名称，identifier，描述等信息

# ? What type of extension do you want to create? New Extension (TypeScript)
# ? What's the name of your extension? HelloWorld
### Press <Enter> to choose default for all options below #### ? What's the identifier of your extension? helloworld
# ? What's the description of your extension? LEAVE BLANK
# ? Enable stricter TypeScript checking in 'tsconfig.json'? Yes
# ? Setup linting using 'tslint'? Yes
# ? Initialize a git repository? Yes
# ? Which package manager to use? npm

然后进入到**./helloworld** 目录，就可以看到目录结构已经出来了。这种级别的 demo 一般都是可以直接跑的。

将**./helloworld**目录放到VS Code中。
F5 就会自动进行编译，然后会打开一个Extension Development Host窗口
Command+Shift+P 输入Hello World就可以看到效果了。

自带的特效是输出一个“Hello World” 的**InformationMessage**框。具体可以看：

经过对Hello World的练手，环境搭建，项目目录的搭建基本上就熟悉了，然后就可以着手准备本次的插件开发了。

cd ../ && rm -rf helloworld/

目标功能：实时字数统计 + 翻译选中文本

有些东西不适合从零开始，因为太浪费时间了，不如找点现成的，站在别人的肩膀上迭代。

实时字数统计

所以我打开VS Code 直接在插件市场输入word count，结果出来了一堆，然后找了一个看起来还不赖的，ycjc868-vscode-word-count, 点进去Repository地址，先看看人家是怎么实现的，感觉可用的关键代码有这么几个：

// VSCode 底部状态栏private _statusBarItem: vscode.StatusBarItem = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Left);
// 注册光标改变事件vscode.window.onDidChangeTextEditorSelection(this.updateWordCount, this, subscriptions);// 获取当前编辑器对象const editor = vscode.window.activeTextEditor;
// 获取文本以及将内容展示到状态栏const wordCount = this._getWordCount(doc);this._statusBarItem.text = `${wordCount} Words`;this._statusBarItem.show();

翻译选中的文本

功能已经完成一半了，接下来是实现第二个功能翻译选中文本，之前写过一个系统级别的翻译的工具，基本原理是：

监听系统剪切板的内容变化，
调用翻译API完成翻译任务，
调用系统GUI组件弹出翻译内容。

能用是能用，就是不太受控制，用的时候开启服务，不用的时候得关掉，要不然疯了一样往外弹提醒。

本次要做一个VS Code中的翻译，这个场景就蛮适合，最起码不会打扰到自己。思路还是看看别人是咋实现类似的功能的。找到了一个**天气预报**的插件，里面有一段代码如下：

const config = vscode.workspace.getConfiguration('remind-me') //获取可配置项中的数据
const appkey = config.hefengAppkey? config.hefengAppkey: 'YOUR_KEY' // 这里放和风天气的KEY
WebRequest.get(`https://way.jd.com/he/freeweather?city=${encodeURI(cityName)}&appkey=${appkey}`).then(reps => {let rep = JSON.parse(reps.body)...... )

我不会TypeScript，所以使用WebRequest的时候，提示我没有这个类，猜想是需要引入这种脚手架的库，然后搜了一下，找到一个**Web-Request的使用介绍**。

npm install web-request

然后在**extension.ts**中像引入vscode一样引用一下。

import * as vscode from 'vscode';
import * as WebRequest from 'web-request';

有道翻译的API不让免费用了，那就用百度的翻译API（翻译的效果好像也还凑活），锅碗瓢盆都准备好了，现在该淘米了，那就得拿到选中的文本，代码如下：

let selection = editor.selection
let text = editor.document.getText(selection)

经过测试发现，代码是间歇性正常，然后我使用**console.log** 打印了下web请求的结果，发现是返回内容解析出错了，猜想是汉字在URL中有编解码的影响，然后会导致出问题。就拿encodeURI对选中的文本加了下处理。

public _translate(keyword: string): string {// 获取选中的文本let wcconfig = vscode.workspace.getConfiguration("wordcount");let url = wcconfig.transapi ? wcconfig.transapi : "https://fanyi.baidu.com/transapi?from=auto&to=auto&query="if(keyword) {url = url + encodeURI(keyword)WebRequest.get(url).then(resp => {let rep = JSON.parse(resp.content);console.log(resp.content);let transret = rep.data[0].dst;this._statusBarItem.text = "[" + keyword + "]:" + transret;this._statusBarItem.show();});}return "失败了~~~~(>_<)~~~~"
}

这样就可以正常工作了，但是看到刚才的那个作者的repository中有对于配置文件的使用，为了减少硬编码，咱也试试呗。在**package.json**中加入下面的配置项。

"commands": [{"command": "extension.wordCount","title": "count Words"}
],
"configuration":{"type": "object","title": "some configuration for translate","properties": {"wordcount.transapi": {"type": "string","default": "https://fanyi.baidu.com/transapi?from=auto&to=auto&query=","description": "auto translate api from baidu"}}
},

拓展代码使用let wcconfig = vscode.workspace.getConfiguration("wordcount");就可以拿到对应的配置值了。

打包、发布

东西做出来，肯定得分享，不然不会有进步的。然后还是看看别人怎么弄的，跟着做就好了。找到了一个VSCode插件开发全攻略（十）打包、发布、升级真的是详细。

这里我说下我遇到的几个问题。

`README.md` 文件修改问题

➜  wordcount git:(master) ✗ vsce package
Executing prepublish script 'npm run vscode:prepublish'...> wordcount@0.0.1 vscode:prepublish /Users/biao/Code/vscode/wordcount
> npm run compile> wordcount@0.0.1 compile /Users/biao/Code/vscode/wordcount
> tsc -p ./ERROR  Make sure to edit the README.md file before you publish your extension.

解决方法：删掉开头自动生成的文本，写点自己的内容就好了。

无法打包

➜  wordcount git:(master) ✗ vsce packageERROR  Missing publisher name. Learn more: https://code.visualstudio.com/api/working-with-extensions/publishing-extension#publishing-extensions

解决思路：missing publisher name 在package.json 中加入publisher信息就好了。

仓库缺失问题

➜  wordcount git:(master) ✗ vsce package
Executing prepublish script 'npm run vscode:prepublish'...> wordcount@0.0.1 vscode:prepublish /Users/biao/Code/vscode/wordcount
> npm run compile> wordcount@0.0.1 compile /Users/biao/Code/vscode/wordcount
> tsc -p ./WARNING  A 'repository' field is missing from the 'package.json' manifest file.
Do you want to continue? [y/N] n

可以看出这里是Warning，所以没有也没关系。如果想上传到GitHub上，开头环境中的git就派上了用场。

git add .
git commit -m 'xxxxxx'
git remote add origin your-git-repository
git push origin master

publish 失败

➜  wordcount git:(master) ✗ vsce puhlish
Usage: vsce [options] [command]Options:-V, --version                        output the version number-h, --help                           output usage informationCommands:ls [options]                         Lists all the files that will be publishedpackage [options]                    Packages an extensionpublish [options] [<version>]        Publishes an extensionunpublish [options] [<extensionid>]  Unpublishes an extension. Example extension id: microsoft.csharp.list <publisher>                     Lists all extensions published by the given publisherls-publishers                        List all known publisherscreate-publisher <publisher>         Creates a new publisherdelete-publisher <publisher>         Deletes a publisherlogin <publisher>                    Add a publisher to the known publishers listlogout <publisher>                   Remove a publisher from the known publishers listshow [options] <extensionid>         Show extension metadatasearch [options] <text>              search extension gallery*

跟教程上的不一样，怎么就是不成功。后来想了下发布肯定是要身份信息的，照应刚才的Token信息。所以先将publisher登陆下。

➜  wordcount git:(master) ✗ vsce login guoruibiao
Publisher 'guoruibiao' is already known
Do you want to overwrite its PAT? [y/N] y
Personal Access Token for publisher 'guoruibiao': ****************************************************(node:95091) Warning: Setting the NODE_TLS_REJECT_UNAUTHORIZED environment variable to '0' makes TLS connections and HTTPS requests insecure by disabling certificate verification.
➜  wordcount git:(master) ✗ vsce publish
Executing prepublish script 'npm run vscode:prepublish'...> wordcount@0.0.1 vscode:prepublish /Users/biao/Code/vscode/wordcount
> npm run compile> wordcount@0.0.1 compile /Users/biao/Code/vscode/wordcount
> tsc -p ./This extension consists of 566 separate files. For performance reasons, you should bundle your extension: https://aka.ms/vscode-bundle-extension
Publishing guoruibiao.wordcount@0.0.1...
(node:95103) Warning: Setting the NODE_TLS_REJECT_UNAUTHORIZED environment variable to '0' makes TLS connections and HTTPS requests insecure by disabling certificate verification.DONE  Published guoruibiao.wordcount@0.0.1
Your extension will live at https://marketplace.visualstudio.com/items?itemName=guoruibiao.wordcount (might take a few seconds for it to show up).

Token 的生成按照刚才的链接跟着做就好了，publish通过后会返回一个地址：

https://marketplace.visualstudio.com/items?itemName=guoruibiao.wordcount

大概5分钟后就可以访问了。

分发与安装

在VS Code 插件市场搜索**word count** 找到作者是guoruibiao的那个，点击**install**,完事。

VSCode插件之实时字数统计与选中词英汉互译相关推荐

【工具】Vscode翻译插件推荐（不用谷歌翻译api、支持短句英汉互译、支持查词、支持自动补全、不需要浏览器）
需求: 1)偶尔需要查英文生词: 2)有时候想不起来中文对应的英文: 3)不想回到浏览器打开一堆网页: 4)谷歌翻译挂了. 偶尔需要的需求: 1)短句翻译. 因为谷歌翻译挂了,首先,排除最热门的翻译插 ...
vue 富文本 quill 编辑器，实现图片上传到服务器，以及实时字数统计
vue 富文本 quill 编辑器,实现图片上传到服务器,以及实时字数统计写在前面 vue 富文本 quill / vue-quill-editor 如何使用图片上传到服务器实时字数统计图片编 ...
WordCounter.icu - 一个简单的在线实时字数统计工具
字数计数器是检测文档字数的绝佳工具.它们有多种格式,并可用于个人和专业用途. 无论是哪种类型的字数统计器,对于任何想要验证其工作品质是否简洁且无错误的人来说都是一个极为重要的工具. 您应该习惯于计算字 ...
VSCode前端开发工具插件--LiveServer实时刷新网页
VSCode前端开发工具插件–LiveServer实时刷新网页 1.概述当我们使用VSCode工具开发前端HTML页面时,修改内容后都要重新刷新网页才能展示更新代码的内容.那么有没有一种方式能够实时 ...
（插件）程序员摸鱼神器，上班也可以在VSCode看股票基金实时数据
据说,今年股市.基金市场多了很多新入场的韭菜,据说下面这张图真实反映了大多韭菜的基金操作手法: 除此之外,韭菜还有一大特点就是巴不得时时刻刻盯着那个走势图,好像盯着它就能涨停一样,一秒不看手里的股就飞 ...
textArea剩余字数统计插件
效果如: js代码: /*** textArea字数统计* * Created on : 2015-6-26, 11:49:24* Author : tom lyl010991@126.com*/ v ...
2023最新最全vscode插件精选
文章简介本文介绍最新.最实用.最强大的 vscode 精选扩展.好用的扩展,犹如神兵利器,帮助程序员在代码的世界中,所向披靡,战无不胜! 作者介绍随易出品,必属精品,只写有深度,有质量的干货文章! ...
无法跳转 vscode_爱了爱了，这个VSCode插件将极大提高你的工mo作yu效率
前言最近沉迷掘金不能自拔,一整天都在掘金上面刷呀刷,同时还在一边使用VSCode码代码.我突发奇想,能不能把掘金塞进VSCode里呢?在做之前,当然要做一下市场调查,市面上有另外两个掘金相关的插件, ...
摸鱼写了一个番茄时钟vscode插件来摸鱼(劳逸结合)
想法想找一个番茄时钟的vscode插件来劳逸结合,有规律摸鱼,翻了很多vscode 插件都不太满意,干脆自己撸了一个. 特性遵循番茄时钟的工作方式–每1个番茄时钟有一个短休息时间,4个番茄时钟后有 ...

VSCode插件之实时字数统计与选中词英汉互译

VSCode插件之字数统计、翻译

hello world 初体验

目标功能：实时字数统计 + 翻译选中文本

实时字数统计

翻译选中的文本

打包、发布

`README.md` 文件修改问题

无法打包

仓库缺失问题

publish 失败

分发与安装

VSCode插件之实时字数统计与选中词英汉互译相关推荐

最新文章

热门文章

VSCode插件之实时字数统计与选中词英汉互译

VSCode插件之字数统计、翻译

hello world 初体验

目标功能：实时字数统计 + 翻译选中文本

实时字数统计

翻译选中的文本

打包、发布

README.md 文件修改问题

无法打包

仓库缺失问题

publish 失败

分发与安装

VSCode插件之实时字数统计与选中词英汉互译相关推荐

最新文章

热门文章

`README.md` 文件修改问题