Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pruge/vscode-pug-tsx
pug에서 사용한 변수를 append 한다.
https://github.com/pruge/vscode-pug-tsx
Last synced: about 1 month ago
JSON representation
pug에서 사용한 변수를 append 한다.
- Host: GitHub
- URL: https://github.com/pruge/vscode-pug-tsx
- Owner: pruge
- License: mit
- Created: 2021-12-09T02:50:13.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2021-12-09T09:43:38.000Z (about 3 years ago)
- Last Synced: 2024-08-01T08:16:52.824Z (4 months ago)
- Language: TypeScript
- Size: 73.2 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome - pruge/vscode-pug-tsx - pug에서 사용한 변수를 append 한다. (TypeScript)
README
## pug-tsx README
When using pug in the tsx document, the variable used is added after the document.
## Features
It works automatically when saving.
## Extension Settings
This extension contributes the following settings:
* `on-save` - defaults to true, run commands on save.
* `options` - [webpack-preprocessor-pug-tsx](https://www.npmjs.com/package/webpack-preprocessor-pug-tsx) options
* `commands`
* `append-pug-variable` - command name for append variable used in pug.
## Options
- settings.json
```javascript
"pug-tsx.options": {
"includes": string[],
"replace": { [key: string]: string },
"start": string[]
}
```
### `includes`
> type: `string[]`
>
> default: `['jsx', 'React']`
Variable that must be included among imported libs.
### `replace`
> type: `{[key: string]: string}`
>
> default: `{'jsx': '/** @jsx jsx */ jsx'}`
When you need to transform the variable declared in includes.
```javascript
"pug-tsx.options": {
"replace": {
"jsx": "/** @jsx jsx */ jsx"
}
}
```
### `start`
```
> type: string[]
>
> default: ['pug`', 'css`', ' `[^;,]', '\\(`']
```
Specifies the starting string of the element containing the backtick.
Expressed as a regular expression string.
```
- pug` is the starting string of pug.
- css` is the starting string for emotion css.
- `[^;] is the starting string for template strings.
```
## Caveats
### The starting element of the backtick-wrapped phrase should be added to the start of options.
The following code may not work as expected:
```javascript
const Button = styled.button`
color: turquoise;
`;
render pug`
Button This my button component.
`;
```
So, you need to add the following to the start of options.
```javascript
"pug-tsx.options": {
"start": ["button`"]
}
```
### There is no need to include `/** @jsx jsx */` in the document.
The following code is added automatically.
before
```javascript
import { jsx, css } from '@emotion/core';
```
after
```javascript
/** @jsx jsx */ jsx;
import { jsx, css } from '@emotion/core';
```
## Release Notes
Users appreciate release notes as you update your extension.
### 0.1.0
Initial release
-----------------------------------------------------------------------------------------------------------
## Following extension guidelines
Ensure that you've read through the extensions guidelines and follow the best practices for creating your extension.
* [Extension Guidelines](https://code.visualstudio.com/api/references/extension-guidelines)
## Working with Markdown
**Note:** You can author your README using Visual Studio Code. Here are some useful editor keyboard shortcuts:
* Split the editor (`Cmd+\` on macOS or `Ctrl+\` on Windows and Linux)
* Toggle preview (`Shift+CMD+V` on macOS or `Shift+Ctrl+V` on Windows and Linux)
* Press `Ctrl+Space` (Windows, Linux) or `Cmd+Space` (macOS) to see a list of Markdown snippets
### For more information
* [Visual Studio Code's Markdown Support](http://code.visualstudio.com/docs/languages/markdown)
* [Markdown Syntax Reference](https://help.github.com/articles/markdown-basics/)
**Enjoy!**