A CLI for creating snippets and export index files automatically
MIT License
Are you tired of manually creating React snippets and managing index files? Look no further! AutoSnip CLI is here to save you time and effort. AutoSnip CLI is a powerful tool for automatically creating React , React Native and Next.js snippets and managing index files in your project.
npm install -g autosnip-cli
or
yarn global add autosnip-cli
npm install --save-dev autosnip-cli
or
yarn add --dev autosnip-cli
autosnip [options]
or
npx autosnip [options]
-V, --version
: Output the version number-d, --directory <directories...>
: Directory to watch for new files (required)-t, --template <template>
: Path to custom template or use available snippets: TRAFC, TRFC, TNAFC, TNFC, TXL, JRAFC, JRFC, JNAFC, JNFC, JXL-w, --watch
: Watch the specified directory for new files-i, --index <indexFile>
: Create a specified index file for default exports--snippet-depth <depth...>
: Depth to create snippets--index-depth <depth...>
: Depth to create index files-s, --style [type]
: Create a style file with the snippet. [type]
can be "css", "scss", "sass", "less", "stylus", optionally prefixed with "module-" for CSS modules (e.g., "module-scss")--remove-style
: Remove the associated style file when the component file is deleted-h, --help
: Display help for commandautosnip-cli -d ./src -t TRAFC -w -i notindex.ts --snippet-depth 1 --index-depth 1
import React from 'react';
import {{ name }} from './{{ name }}.module.css';
interface {{ name }}Props {}
const {{ name }} = ({}: {{ name }}Props) => {
return <div>This is a custom snippet and file name is {{ name }}</div>;
};
export default {{ name }};
This custom snippet takes the name
parameter, which is derived from the file's name, and uses it to generate both the component name and the filename for the CSS module:
autosnip-cli -d ./src -t ./path/to/your/template.tmpl -w -i notindex.ts --snippet-depth 1 --index-depth 1
autosnip-cli -d ./src ./components -t TRAFC -w -i notindex.ts --snippet-depth 1 2 --index-depth 1 2
autosnip-cli -d ./src -t TRAFC -w -i notindex.ts --snippet-depth 1 --index-depth 1 -s module-scss
This command will create a style file {{ name }}.module.scss
when the snippet is added and automatically import it in the snippet
autosnip-cli -d ./src -t TRAFC -w -i notindex.ts --snippet-depth 1 --index-depth 1 -s module-scss --remove-style
In react-native project style file will not created or removed because react-native not supported style file or module-style, instead StyleSheet is used and just -s option is enough for react-native project to add StyleSheet in the snippet, other style options are just ignored.
Instead of this:
import { Text, View } from 'react-native';
interface {{ name }}Props {}
const {{ name }} = ({}: {{ name }}Props) => {
return (
<View>
<Text>{{ name }}</Text>
</View>
);
};
export default {{ name }};
This used:
import { Text, View , StyleSheet } from 'react-native';
interface {{ name }}Props {}
const {{ name }} = ({}: {{ name }}Props) => {
return (
<View>
<Text>{{ name }}</Text>
</View>
);
};
export default {{ name }};
const styles = StyleSheet.create({ /* Add your styles here */ });
Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License - see the LICENSE file for details.
If you have any questions or need help, please open an issue on our GitHub repository.
Made with ❤️ by Rakhimov Orzubek