Skip to content

README.md

Latest commit

 

History

History
161 lines (122 loc) · 4.29 KB

README.md

File metadata and controls

161 lines (122 loc) · 4.29 KB

@css-modules-kit/ts-plugin

A TypeScript Language Service Plugin for CSS Modules.

Installation

VS Code

Install the ts-plugin via the Extension. Please install:

Neovim

Important

You need to install nvim-lspconfig beforehand (Installation guide).

Important

You need to install typescript-language-server or vtsls beforehand. Please refer to each installation guide.

First, install @css-modules-kit/ts-plugin.

npm i -g @css-modules-kit/ts-plugin

Then, add the following configuration to your init.lua.

Using vtsls 
local npm_root = vim.trim(vim.fn.system('npm root -g'))
local vtsls_default = vim.lsp.config.vtsls

vim.lsp.config('vtsls', {
  filetypes = vim.list_extend(vtsls_default.filetypes, { 'css' }),
  settings = {
    vtsls = {
      tsserver = {
        globalPlugins = {
          {
            name = '@css-modules-kit/ts-plugin',
            location = npm_root,
            languages = { 'css' },
          },
        },
      },
    },
  },
})

vim.lsp.enable('vtsls')
Using typescript-language-server 
local npm_root = vim.trim(vim.fn.system('npm root -g'))
local ts_ls_default = vim.lsp.config.ts_ls

vim.lsp.config('ts_ls', {
  filetypes = vim.list_extend(ts_ls_default.filetypes, { 'css' }),
  init_options = {
    plugins = {
      {
        name = '@css-modules-kit/ts-plugin',
        location = npm_root,
        languages = { 'css' },
      },
    },
  },
})

vim.lsp.enable('ts_ls')

Emacs

Important

You need to install typescript-language-server beforehand. Please refer to each installation guide.

Important

The following steps are for users who use tree-sitter-based major modes such as js-ts-mode, typescript-ts-mode, tsx-ts-mode, and css-ts-mode.

First, install ts-plugin globally.

npm i -g @css-modules-kit/ts-plugin

Then, add the following configuration to your init.el.

;; Setup Language Server
(use-package eglot
  :ensure nil
  :hook ((js-ts-mode         . eglot-ensure)
         (typescript-ts-mode . eglot-ensure)
         (tsx-ts-mode        . eglot-ensure)
         (css-ts-mode        . eglot-ensure))
  :config
  (require 'subr-x) ;; string-trim
  (setq npm-root
        (string-trim (shell-command-to-string "npm root -g")))
  (add-to-list
    'eglot-server-programs
    `(((js-ts-mode :language-id "javascript")
       (typescript-ts-mode :language-id "typescript")
       (tsx-ts-mode :language-id "typescriptreact")
       (css-ts-mode :language-id "css"))
      . ("typescript-language-server" "--stdio"
          :initializationOptions
          ((plugins
            . [((name      . "@css-modules-kit/ts-plugin")
                (location  . ,npm-root)
                (languages . ["css"]))]))))))

Caution

Eglot does not support multiple language servers.

Therefore, when you use the configuration above, only typescript-language-server is used as the language server for *.css. vscode-css-language-server is not used. Language features provided by vscode-css-language-server (such as property completion) are unavailable in *.css. There is currently no way to avoid this issue.

Zed

Install the ts-plugin via the Extension. Please follow the steps below:

  1. Install "CSS Modules Kit" extension.
  2. Add the following to your ~/.config/zed/settings.json file: 
    {
  "languages": {
    "CSS": {
      "language_servers": ["vtsls", "..."]
    }
  }
}
  3. Restart Zed.

WebStorm

Not yet supported.

StackBlitz Codeflow

Install the ts-plugin via the Extension. Please install:

Configuration

See Configuration.