持续创作,加速成长!这是我参与「掘金日新计划 · 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插件集合
啦!!!(嘎嘎嘎~)😄」