因为懒,我写了个vscode插件

因为懒,我写了个vscode插件

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第11天,点击查看活动详情

前言

大家好,我是小阵 🔥,一路奔波不停的码字业务员
身为一个前端小菜鸟,总是有一个飞高飞远的梦想,因此,每点小成长,我都想要让它变得更有意义,为了自己,也为了更多值得的人
如果喜欢我的文章,可以关注 ➕ 点赞,与我一同成长吧~😋
加我微信:zzz886885,邀你进群,一起学习交流,摸鱼学习两不误🌟

开开心心学技术大法~~

开心

来了来了,他真的来了~

正文

起因

项目原因,因为更改了移动端适配的方案,所以一部分less文件内部的像素要缩小一倍。

第一个文件我是一个一个除2的。

我觉得有点累。

第二个文件我写串正则帮我处理。

依然还是累,因为要cv。(我要将文件内容复制成字符串,然后控制台用正则)

第三个文件我写了个node脚本帮我处理。

好的,感觉cv一下就可以了。(我用node帮我读取了文件,而我只需要复制文件的路径即可,因为node的fs包需要靠路径来读取文件内容,当然也要写回原路径)

第四个文件的时候我cv累了,所以我打算写个vscode插件帮我处理,我只需要点点鼠标就好。

安装插件生成器帮我把壳子做好

// 安装需要的包
npm install  yo generator-code -D

// 运行
npx yo code
复制代码

具体过程可以自己走一遍就什么都清楚了。

编写插件

因为我之前写node,已经把逻辑都写好了,而我只需要cv就ok


const vscode = require('vscode');
const { toString, fromString } = require('uint8arrays');

function activate(context) {
	console.log('Congratulations, your extension "replacefile-vscode-plugin" is now active!');
	let disposable = vscode.commands.registerCommand('replacefile', function (uri) {
		vscode.workspace.fs.readFile(uri).then(res => {
			const contentUTF8 = toString(res);
			const replacedContentUTF8 = contentUTF8.replace(/(?<=[ \:\-\+\*\/\'\"\)\(\!)])(\d+)px(?=[ ;\-\+\*\/\'\"\)\(\!])/g, function (a, b) { return `${b / 2}px` });
			vscode.workspace.fs.writeFile(uri, fromString(replacedContentUTF8)).then(() => {
				vscode.window.showInformationMessage('文件替换成功');
			})
		})
	});

	context.subscriptions.push(disposable);
}

function deactivate() { }

module.exports = {
	activate,
	deactivate
}

复制代码

可以看到,我只用了vscode.workspace.fs就完成了我的主要功能,也用vscode.window.showInformationMessage来做了下提示。

因为vscode.workspace.fs返回的是Uint8Array类型,所以我又下载了uint8arrays包帮我处理从Uint8Arrayutf-8,在处理完之后再转回Uint8Array作为vscode.workspace.fs.writeFile的入参。

当然,因为功能简单,且目标明确,并不是为了拓展多深奥玄妙的功能,所以甚至连报错兼容都没做处理

配置指令

当然,为了指令可以正常使用,当然也要在package.json文件中定义一下。

因为我只需要在工作区的文件内容上右键点击来触发我的逻辑,所以只需要定义下"editor/context"


{
  "contributes": {
    "commands": [
      {
        "command": "replacefile",
        "title": "replacefile222"
      }
    ],
    "menus": {
      "editor/context": [
        {
          "when": "editorFocus",
          "command": "replacefile",
          "group": "navigation"
        }
      ]
    }
  },
  "scripts": {
    "lint": "eslint .",
    "pretest": "npm run lint",
    "test": "node ./test/runTest.js"
  },
}

复制代码

因为功能单一,我并没有发布到插件市场,而是本地生成了个.vsix的插件包,本地在安装使用,如果感兴趣的小伙伴,可以发布到插件市场上让小伙伴们可以一起使用。

补充

上面代码我更改了下,添加了cmd + shift + p 的可以直接调用的功能。

image.png

const vscode = require('vscode');
const { toString, fromString } = require('uint8arrays');

function activate(context) {
	console.log('Congratulations, your extension "replacefile-vscode-plugin" is now active!');
	let disposable = vscode.commands.registerTextEditorCommand('extension.replacefile', function (textEditor, edit, args) {
		const currentUri = args || textEditor && textEditor.document && textEditor.document.uri
		if (currentUri) {
			vscode.workspace.fs.readFile(currentUri).then(res => {
				const contentUTF8 = toString(res);
				const replacedContentUTF8 = contentUTF8.replace(/(?<=[ \:\-\+\*\/\'\"\)\(\!)])(\d+)px(?=[ ;\-\+\*\/\'\"\)\(\!])/g, function (a, b) { return `${b / 2}px` });
				vscode.workspace.fs.writeFile(currentUri, fromString(replacedContentUTF8)).then(() => {
					vscode.window.showInformationMessage('文件替换成功');
				})
				vscode.window.showInformationMessage('文件替换成功');
			}, err => {
				vscode.window.showErrorMessage('fs.readFile失败:', err);
			})
		} else {
			vscode.window.showErrorMessage('找不到文件uri');
		}
	});

	context.subscriptions.push(disposable);
}

function deactivate() { }

module.exports = {
	activate,
	deactivate
}

复制代码

完整代码在这里,感兴趣的朋友可以拉下来看下

结语

往期好文推荐「我不推荐下,大家可能就错过了史上最牛逼vscode插件集合啦!!!(嘎嘎~)😄」

分类:
前端