https://github.com/dylanblokhuis/remix-code-snippets
Speed up your Remix development with dynamic code snippets
https://github.com/dylanblokhuis/remix-code-snippets
Last synced: 2 months ago
JSON representation
Speed up your Remix development with dynamic code snippets
- Host: GitHub
- URL: https://github.com/dylanblokhuis/remix-code-snippets
- Owner: dylanblokhuis
- License: mit
- Created: 2021-12-29T15:37:10.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2022-05-25T14:48:38.000Z (almost 3 years ago)
- Last Synced: 2025-01-11T17:53:26.625Z (4 months ago)
- Language: TypeScript
- Size: 245 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# remix-code-snippets
Speed up your Remix development with dynamic code snippets. Quickly create remix components using code snippets like `rmx_fc_l` with the following output:
```typescriptreact
import type { LoaderFunction } from "@remix-run/node"
export const loader: LoaderFunction = () => {
}
export default function ComponentName() {
return (
)
}
```
### Want to use `let` instead?
Enable `remix-code-snippets.useLetInsteadOfConst` and you get the following output:
```typescriptreact
import type { LoaderFunction } from "@remix-run/node"
export let loader: LoaderFunction = () => {
}
export default function ComponentName() {
return (
)
}
```
### Add additional code after imports
Fill in `remix-code-snippets.additionalCodeAfterImports` with e.g. `import db from "~/services/db.server"` and you get the following output:
```typescriptreact
import type { LoaderFunction } from "@remix-run/node"
import db from "~/services/db.server"
export const loader: LoaderFunction = () => {
}
export default function ComponentName() {
return (
)
}
```
## Preview
## Code snippets
| Trigger | Description |
| ------------ | --------------------------------------------------- |
| `rmx_fc_a` | Functional component with action |
| `rmx_fc_l` | Functional component with loader |
| `rmx_fc_al` | Functional component with action and loader |
| `rmx_fc_h` | Functional component with handle |
| `rmx_fc_ha` | Functional component with handle and action |
| `rmx_fc_hl` | Functional component with handle and loader |
| `rmx_fc_hal` | Functional component with handle, action and loader |
## Extension Settings
This extension contributes the following settings:
- `remix-code-snippets.useLetInsteadOfConst`: Handle, action and loader will be declared using `let` instead of `const`
- `remix-code-snippets.additionalCodeAfterImports`: Add additional code after the import statement.
## Release Notes
### 1.0.0
Initial release