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

前言

开发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;
    }
  `}
`;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

研究prettier

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

/**
 * Template literal in these contexts:
 * 
 * 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")
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

解决问题

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

1. 如果需要解决团队问题，可以在前端项目写一个脚本放到 postinstall hooks中自动处理。或则fork prettier修改相关代码后自己发布一个插件供团队使用。
2. 如果发现这样改了还是没有用，有可能是你当前项目单独安装了pretiier作为项目的开发依赖，这是需要改当前项目node_modules下的prettier代码

解决智能提示问题

vscode-styled-components插件使用了 typescript-styled-plugin 。于是只需要在项目的jsconfig.json 或 tsconfig.json配置文件中增加如下配置。 重要的是 tags, 其他配置可以查看文档 https://github.com/Microsoft/typescript-styled-plugin

{
  "compilerOptions": {
    "plugins": [
      {
        "name": "typescript-styled-plugin",
        "tags": [
          "styled",
          "css",
          "sty",
          "media.phone"
        ]
      }
    ]
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15