Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ackeecz/vscode-frontend
Visual Studio Code frontend extension with useful snippets and commands
https://github.com/ackeecz/vscode-frontend
ackee frontend javascript react vscode-extension
Last synced: 3 days ago
JSON representation
Visual Studio Code frontend extension with useful snippets and commands
- Host: GitHub
- URL: https://github.com/ackeecz/vscode-frontend
- Owner: AckeeCZ
- License: mit
- Created: 2019-07-20T20:12:51.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-09T15:39:23.000Z (over 1 year ago)
- Last Synced: 2024-09-24T10:31:17.223Z (3 days ago)
- Topics: ackee, frontend, javascript, react, vscode-extension
- Language: TypeScript
- Size: 501 KB
- Stars: 5
- Watchers: 8
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Ackee Frontend VS Code extension
A set of usefull snippets and commands we use at Ackee for web apps development.
## Features
- Commands for project scaffolding (typescript supported)
- React/Fela snippets
## Contents
- [Commands](#commands)
- [Settings](#settings)
- [Snippets](#snippets)
## Commands
### Create component
- `Component.(j|t)sx` - React stateless component
- `index.(j|t)s` - index file to export the React component
### Create Fela component
Creates a folder with following structure:
- `Component.(j|t)sx` - React stateless component with `styles` prop
- `Component.styles.(j|t)s` - fela rules
- `index.(j|t)s` - index file to export the React component and wrap it with `connectFela`
#### Usage
1. Right click to a folder where you want to create a component
2. Select _"Ackee: create component"_
3. Type a name and press enter
> **Note**: The command can also be triggered by a shortcut `cmd+a cmd+c` or by VS Code command line. But in that case the component is created in root directory of a project, because VS Code API does not provide selected folder in the explorer window. See [this issue](https://github.com/Microsoft/vscode/issues/3553) for more info.
## Settings
These settings can be changed in VS Code settings under `ackeeFrontend` namespace.
| Name | Default value | Description |
| -------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
| `moduleDependencies` | `true` | If enabled it uses named imports from dependencies.js file of the module. |
| `felaHooks` | `false` | If enabled, scaffolded components will use enhanced fela hooks instead of connect HOC. |
| `typescript` | `false` | If enabled, scaffolded components will be in TypeScript. |
| `typescriptFelaTheme` | `false` | If enabled, scaffolded styles of components will have `TRuleWithTheme` instead of simple `TRule` (`typescript` option must be enabled). |
| `typescriptFelaExtendProp` | `false` | If enabled, scaffolded interfaces of components will have `extend` prop. (`typescript` option must enabled). |
| `includeReactImport` | `false` | If enabled, a scaffolded component will include import of React. |
| `useAckeeFelaPackage` | `false` | If enabled, useFelaEnhanced and related types will be imported from @ackee/fela package. |
## Snippets
Supported languages:
- JavaScript (.js)
- JavaScript React (.jsx)
| Trigger | Content |
| ------- | ---------------------------------------------- |
| `frd→` | Fela rule (default export) |
| `frdt→` | Fela rule with theme (default export) |
| `fr→` | Fela rule (named export) |
| `frt→` | Fela rule with theme (named export) |
| `imrd→` | Import React and PropTypes from dependencies |
| `ed→` | Export for component indexes |
| `rfc→` | React stateless component with FelaComponent |
| `rfcc→` | React stateless component with connectFela HOC |