当前位置：首页 > news >正文

vscode-pretter 插件支持 styled-components 格式化问题

news 来源：原创 2024/5/4 3:44:52

前言

开发React项目使用了styled-component做样式开发，开发工具是vscode，并且安装了vscode 插件vscode-styled-components 和 prettier插件作为styled-component的智能提示和格式化工具。据我研究 vscode-styled-coponents插件仅支持了高亮，颜色支持，智能提示。格式化这块是prettier插件支持的。

格式化问题

我封装了media相关tagged函数用于适配不同设备(代码如下)。问题是格式化时无法格式化媒体查询内的样式。

const ConnectButtonWrapper = styled(GradientButton)`
  color: red;
  ${media.phone`
    color: blue;
  `}
  ${media.tablet`
    padding: 1em 1.2em;
    .grandient-border {
      border-width: 1px;
    }
  `}

  ${media.phone`
    padding: 0.15rem 0.33rem;
    .grandient-border {
      border-width: 1px;
    }
  `}
`;

研究prettier

查看prettier src/language-js/embed.js 代码如下其中函数 isStyledJsx 就是用来判断是否能支持格式化的。看他提供的注释，仅仅支持其中的格式化。想要支持我的media.xxxx格式化的话，就需要再下面增加判断条件。
看如下代码最后几行就是我添加的。

/**
 * Template literal in these contexts:
 * <style jsx>{`div{color:red}`}</style>
 * css``
 * css.global``
 * css.resolve``
 */
function isStyledJsx(path) {
  const node = path.getValue();
  const parent = path.getParentNode();
  const parentParent = path.getParentNode(1);
  return (
    (parentParent &&
      node.quasis &&
      parent.type === "JSXExpressionContainer" &&
      parentParent.type === "JSXElement" &&
      parentParent.openingElement.name.name === "style" &&
      parentParent.openingElement.attributes.some(
        (attribute) => attribute.name.name === "jsx"
      )) ||
    (parent &&
      parent.type === "TaggedTemplateExpression" &&
      parent.tag.type === "Identifier" &&
      parent.tag.name === "css") ||
    (parent &&
      parent.type === "TaggedTemplateExpression" &&
      parent.tag.type === "MemberExpression" &&
      parent.tag.object.name === "css" &&
      (parent.tag.property.name === "global" ||
        parent.tag.property.name === "resolve"))
     //=======================支持 meadia.xxx`` 格式化 =====================
     (parent &&
      parent.type === "TaggedTemplateExpression" &&
      parent.tag.type === "MemberExpression" &&
      parent.tag.object.name === "media")
  );
}

解决问题

打开vscode插件目录 C:\Users\Administrator\.vscode\extensions\esbenp.prettier-vscode-9.8.0，找到node_modules/prettier/index.js并打开在其中搜索function isStyledJsx 找到这个函数，在这个函数中加入对应的条件即可。