持续创作，加速成长！这是我参与「掘金日新计划 · 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包帮我处理从Uint8Array到utf-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 的可以直接调用的功能。
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插件集合啦！！！(嘎嘎嘎~)😄」