@tw-in-js/typescript-plugin v0.0.1

@tw-in-js/typescript-plugin

TypeScript language service plugin that adds IntelliSense for tailwindjs

• Features
• Installation
• Usage
• Configuration
• Contribute
• License

Features

Provides editor support for `tw`... tagged template syntax including:

• Autocomplete for tailwind, beamwind and oceanwin classes
• Warnings on unknown classes
• Quick fixes for misspelled property names.

Installation

npm install --save-dev @tw-in-js/typescript-plugin

Usage

This plugin requires TypeScript 2.4 or later. It can provide intellisense in both JavaScript and TypeScript files within any editor that uses TypeScript to power their language features. This includes VS Code, Sublime with the TypeScript plugin, Atom with the TypeScript plugin, Visual Studio, and others.

With VS Code

Just install the VS Code tailwindjs extension. This extension adds syntax highlighting and IntelliSense for styled components in JavaScript and TypeScript files.

If you are using a workspace version of TypeScript however, you must manually install the plugin along side the version of TypeScript in your workspace.

Then add a plugins section to your tsconfig.json or jsconfig.json

{
  "compilerOptions": {
    "plugins": [
      {
        "name": "@tw-in-js/typescript-plugin"
      }
    ]
  }
}

Finally, run the Select TypeScript version command in VS Code to switch to use the workspace version of TypeScript for VS Code's JavaScript and TypeScript language support. You can find more information about managing typescript versions in the VS Code documentation.

With Sublime

This plugin works with the Sublime TypeScript plugin.

And configure Sublime to use the workspace version of TypeScript by setting the typescript_tsdk setting in Sublime:

{
  "typescript_tsdk": "/path/to/the/project/node_modules/typescript/lib"
}

Finally add a plugins section to your tsconfig.json or jsconfig.json and restart Sublime.

{
  "compilerOptions": {
    "plugins": [
      {
        "name": "@tw-in-js/typescript-plugin"
      }
    ]
  }
}

With Atom

This plugin works with the Atom TypeScript plugin.

Then add a plugins section to your tsconfig.json or jsconfig.json and restart Atom.

{
  "compilerOptions": {
    "plugins": [
      {
        "name": "@tw-in-js/typescript-plugin"
      }
    ]
  }
}

To get sytnax highlighting for styled strings in Atom, consider installing the language-babel extension.

With Visual Studio

This plugin works Visual Studio 2017 using the TypeScript 2.5+ SDK.

Then add a plugins section to your tsconfig.json.

{
  "compilerOptions": {
    "plugins": [
      {
        "name": "@tw-in-js/typescript-plugin"
      }
    ]
  }
}

Then reload your project to make sure the plugin has been loaded properly. Note that jsconfig.json projects are currently not supported in VS.

Configuration

Tags

This plugin adds IntelliSense to any template literal tagged with tw, ow or bw:

import { bw } from 'beamwind'

bw`
  sm:hover:(
    bg-black
    text-white
  )
  md:(bg-white hover:text-black)
`

You can enable IntelliSense for other tag names by configuring "tags":

{
  "compilerOptions": {
    "plugins": [
      {
        "name": "@tw-in-js/typescript-plugin",
        "tags": ["tw", "cx"]
      }
    ]
  }
}

Now strings tagged with either tw and cx will have IntelliSense.

Contribute

Thanks for being willing to contribute!

This project is free and open-source, so if you think this project can help you or anyone else, you may star it on GitHub. Feel free to open an issue if you have any idea, question, or you've found a bug.

Working on your first Pull Request? You can learn how from this free series How to Contribute to an Open Source Project on GitHub

We are following the Conventional Commits convention.

Develop

Ensure you run at least Node v14.

Clone the repository and cd into the project directory.

Run yarn install && yarn build.

• yarn test: Run test suite including linting
• yarn format: Ensure consistent code style
• yarn build: Build the package
• yarn release: To publish the package

Manual testing the Language service plugin

You can check manually language service plugin features with our example project.

yarn build
cd dist
yarn link
cd project-fixtures/react-apollo-prj
yarn install
yarn link @tw-in-js/typescript-plugin
code . # Or launch editor/IDE what you like

Of course, you can use other editor which communicates with tsserver .

License

MIT