在偷懒道路上越走越远的程序员，竟然写了一个vscode插件

前端

2024-02-03 02:02:33

前言

开开心心学技术大法~~

来了来了，他真的来了~

正文

起因

项目原因，因为更改了移动端适配的方案，

偷懒心法

发现原来一直在写css，于是就想着写个vscode插件，来自动生成一些css代码。

原理很简单，就是将已经写好的css代码封装成一个一个的方法，然后在需要的地方调用，大大减少了手动编写css代码的时间。

功能

目前插件的功能还比较简单，只支持生成一些基本的css代码，比如margin、padding、width、height等，但是已经可以满足我的日常开发需求了。

使用场景

这个插件最适合用来生成一些重复性的css代码，比如margin、padding等，这样可以大大减少手动编写代码的时间。

代码示例

// margin
vscode.commands.registerCommand('extension.margin', () => {
  const editor = vscode.window.activeTextEditor;
  if (!editor) {
    return;
  }

  const selection = editor.selection;
  const text = editor.document.getText(selection);

  const margin = {
    top: '0',
    right: '0',
    bottom: '0',
    left: '0',
  };

  if (text) {
    const values = text.split(' ');
    if (values.length === 1) {
      margin.top = margin.right = margin.bottom = margin.left = values[0];
    } else if (values.length === 2) {
      margin.top = margin.bottom = values[0];
      margin.right = margin.left = values[1];
    } else if (values.length === 4) {
      margin.top = values[0];
      margin.right = values[1];
      margin.bottom = values[2];
      margin.left = values[3];
    }
  }

  const css = `
margin: ${margin.top} ${margin.right} ${margin.bottom} ${margin.left};
`;

  editor.edit((editBuilder) => {
    editBuilder.insert(selection.end, css);
  });
});