Skip to content

TypeScript language service plugin supporting for importing assets.

License

Notifications You must be signed in to change notification settings

mizdra/typescript-plugin-asset

Repository files navigation

@mizdra/typescript-plugin-asset

TypeScript language service plugin supporting for importing assets.

Screenshot

Motivation

In web front-end development, you often type asset import statements. However, asset import statements are not completed in the editor, which makes typing them difficult.

Video showing typing an import statement for an asset. You have to type everything yourself, from the name of the binding to the import specifier.

This plugin solves this problem by providing completion for asset import statements.

Video showing completing the import statement of asset.

Installation

$ npm install -D @mizdra/typescript-plugin-asset

How to setup

To use this plugin, you need to follow three steps.

  1. Write the plugin configuration in tsconfig.json
  2. Configure your editor to use the TypeScript language service plugin

Write the plugin configuration in tsconfig.json

Add the following configuration to tsconfig.json. See Available options for details.

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "plugins": [
      {
        "name": "@mizdra/typescript-plugin-asset",
        "include": ["assets/**/*"],
        "extensions": [".png", ".jpg", ".svg"],
        "exportedNameCase": "constantCase",
        "exportedNamePrefix": "I_"
      }
    ]
  }
}

Configure your VS Code to use the TypeScript language service plugin

Warning This section can be skipped by users using editors other than visual studio code.

VS Code cannot load plugins by default. Therefore, special operations are required.

Specifically, you have to do two operations:

  1. Run the "TypeScript: Select TypeScript Version" command
  2. Choose "Use Workspace Version"

Also, although this is optional, the following settings can be added to .vscode/settings.json to prompt other team members to change the above settings.

// .vscode/settings.json
{
  "typescript.tsdk": "node_modules/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true
}

Available options

include (required)

Glob pattern of assets. @mizdra/typescript-plugin-asset completes import statements only for assets matching this pattern.

  • Type: string[]
  • Example: ["assets/**/*"]

exclude

Glob pattern of assets to exclude. @mizdra/typescript-plugin-asset does not complete import statements for assets matching this pattern.

extensions (required)

File extensions of assets. @mizdra/typescript-plugin-asset completes import statements only for assets matching this extensions.

  • Type: string[]
  • Example: [".png", ".jpg", ".svg"]

exportedNameCase

The name case of default export in asset module.

  • Type: "constantCase" | "camelCase" | "pascalCase" | "snakeCase"
  • Default: "constantCase"

exportedNamePrefix

The name prefix of the default export of the asset module. Must be a valid JavaScript identifier.

  • Type: string
  • Default: "I_"

About

TypeScript language service plugin supporting for importing assets.

Resources

License

Stars

Watchers

Forks

Sponsor this project

 

Packages

No packages published