Skip to content

Commit 04b462e

Browse files
committed
update README
1 parent c358816 commit 04b462e

File tree

4 files changed

+51
-4
lines changed

4 files changed

+51
-4
lines changed

README.md

Lines changed: 51 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,34 @@
22

33
TypeScript language service plugin supporting for importing assets.
44

5-
## Demo
5+
![Screenshot](./docs/screenshot.png)
66

7-
TODO
7+
## Motivation
88

9-
## Install
9+
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.
10+
11+
![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.](./docs/typing-asset-import-statement-is-difficult.gif)
12+
13+
This plugin solves this problem by providing completion for asset import statements.
14+
15+
![Video showing completing the import statement of asset.](./docs/complete-asset-import-statement.gif)
16+
17+
## Installation
1018

1119
```console
1220
$ npm install -D @mizdra/typescript-plugin-asset
1321
```
1422

15-
## Usage
23+
## How to setup
24+
25+
To use this plugin, you need to follow three steps.
26+
27+
1. Write the plugin configuration in `tsconfig.json`
28+
2. Configure your editor to use the TypeScript language service plugin
29+
30+
### Write the plugin configuration in `tsconfig.json`
31+
32+
Add the following configuration to `tsconfig.json`. See [Options](#options) for details.
1633

1734
```json
1835
// tsconfig.json
@@ -32,6 +49,36 @@ $ npm install -D @mizdra/typescript-plugin-asset
3249
}
3350
```
3451

52+
### Configure your VS Code to use the TypeScript language service plugin
53+
54+
> **Warning**
55+
> This section can be skipped by users using editors other than visual studio code.
56+
57+
VS Code cannot load plugins by default. Therefore, special configuration is required.
58+
59+
https://github.com/microsoft/TypeScript/wiki/Writing-a-Language-Service-Plugin#testing-locally
60+
61+
> Note: If you're using Visual Studio Code, you'll have to use the first approach above, with a path to the module, or run the "TypeScript: Select TypeScript Version" command and choose "Use Workspace Version", or click the version number between "TypeScript" and 😃 in the lower-right corner. Otherwise, VS Code will not be able to find your plugin.
62+
63+
Visual Studio Code cannot load plugins by default. Therefore, special operations are required.
64+
65+
Specifically, you have to do two operations:
66+
67+
1. Run the "TypeScript: Select TypeScript Version" command
68+
2. Choose "Use Workspace Version"
69+
70+
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.
71+
72+
```json
73+
// .vscode/settings.json
74+
{
75+
"typescript.tsdk": "node_modules/typescript/lib",
76+
"typescript.enablePromptUseWorkspaceTsdk": true
77+
}
78+
```
79+
80+
### (Optional)
81+
3582
## Options
3683

3784
### `include` (required)
244 KB
Loading

docs/screenshot.png

299 KB
Loading
1000 KB
Loading

0 commit comments

Comments
 (0)