Coc.nvim: Styled Components Support

[kgnugur]

I'm using styled components in my projects and can't get IntelliSense to work when using CoC.

vscode-styled-components provides IntelliSense in VSCode. Maybe port of it work with CoC too.
Expected behavior

Problem

[chemzqm]

css-tsserver support plugins, you can configure tsserver to use typescript-styled-plugin in your tsconfig.json or jsconfig.json.

You should be able to install that VSCode extension by use url or use vim-plug https://github.com/neoclide/coc.nvim/wiki/Using-coc-extensions, coc-tsserver can load typescriptServerPlugins.

[kgnugur]

From typescript-styled-plugin I tried npm install --save-dev typescript-styled-plugin typescript it worked for first few second but all completion recommendations stopped after that few seconds.
npm install --save-dev typescript-styled-plugin doesn't do anything.
Note: I configured by tsconfig.json accordingly.

[chemzqm]

Need to checkout the log from tsserver.

[kgnugur]

I did npm install --save-dev typescript-styled-plugin typescript, here is tsconfig:

{
  "compilerOptions": {
    "plugins": [
      {
        "name": "typescript-styled-plugin"
      }
    ]
  }
}

Here is the log:

2019-04-07T10:10:35.038 INFO (pid:12354) [plugin] - coc initialized with node: v8.9.0
2019-04-07T10:12:32.344 INFO (pid:14076) [plugin] - coc initialized with node: v8.9.0
2019-04-07T10:12:38.985 INFO (pid:14076) [services] - registed service "tsserver"
2019-04-07T10:12:39.063 INFO (pid:14076) [services] - service tsserver started
2019-04-07T10:12:41.918 INFO (pid:14076) [completion-complete] - Results from: emmet-javascriptreact,around
2019-04-07T10:12:42.227 INFO (pid:14076) [completion-complete] - Results from: around
2019-04-07T10:12:42.860 INFO (pid:14076) [completion-complete] - Results from: around
2019-04-07T10:12:43.051 INFO (pid:14076) [completion-complete] - Results from: tsserver-javascript,around
2019-04-07T10:12:43.093 INFO (pid:14076) [completion-complete] - Results from: tsserver-javascript,around
2019-04-07T10:12:46.647 WARN (pid:14076) [completion-complete] - Complete source "tsserver-javascript" takes 2000ms
2019-04-07T10:12:48.770 WARN (pid:14076) [completion-complete] - Complete source "tsserver-javascript" takes 2001ms
2019-04-07T10:12:54.674 INFO (pid:14076) [completion-complete] - Results from: around
2019-04-07T10:12:56.673 WARN (pid:14076) [completion-complete] - Complete source "tsserver-javascript" takes 2001ms
2019-04-07T10:12:56.673 INFO (pid:14076) [completion-complete] - Results from: around
2019-04-07T10:12:56.890 INFO (pid:14076) [completion-complete] - Results from: around
2019-04-07T10:12:58.888 WARN (pid:14076) [completion-complete] - Complete source "tsserver-javascript" takes 2000ms
2019-04-07T10:12:58.888 INFO (pid:14076) [completion-complete] - Results from: around
2019-04-07T10:13:00.625 INFO (pid:14076) [completion-complete] - Results from: around

[chemzqm]

The log of tsserver opened by :CocCommand tsserver.openTsServerLog

[kgnugur]

Sorry,
I couldn't figure out what to paste and since it is too long I created a gist here is the log: https://gist.github.com/kgnugur/28c8c26a46babf8b7261ac10180d4458

[chemzqm]

It's loaded:

Info 27   [11:22:42.628] Loading typescript-styled-plugin from /home/kgnugur/Codes/via-frontend (resolved to /home/kgnugur/Codes/via-frontend/node_modules)
Info 28   [11:22:42.720] [ts-styled-plugin] config: {"tags":["styled","css","extend","injectGlobal","createGlobalStyle"],"validate":true,"lint":{"emptyRules":"ignore"},"emmet":{}}
Info 29   [11:22:42.722] Plugin validation succeded

and I can't see any error, so no idea.

[kgnugur]

Thank you for the help and your works. For other people here is how to make it work in steps:
1) npm install --save-dev typescript-styled-plugin
2) In root of the project make a tsconfig.json or jsconfig.json and paste the code:

{
  "compilerOptions": {
    "plugins": [
      {
        "name": "typescript-styled-plugin"
      }
    ]
  }
}

3) Setup a higher suggest time if it's not working in your coc-setting like: "suggest.timeout": 4000

[phantomwhale]

Step 3 was the charm for me - thanks so much for this, had managed to cobble together steps 1 and 2, and couldn't figure out what was going on

[pjg]

There's now https://github.com/fannheyward/coc-styled-components which seem to work very well.