⚛ ⚡用于快速创建新的React组件CLI实用程序 ⚡ ⚛

This structure might appear odd to you, with an index.js that points to a named file. I've found this to be an optimal way to set up components; the index.js allows you to import from the directory (eg. import Button from 'components/Button'), while having Button.js means that you're never lost in a sea of index.js files in your editor.This structure is not currently configurable, but I'm happy to consider implementing alternatives!

Configuration

Configuration can be done through 3 different ways:

Creating a global .new-component-config.json in your home directory (~/.new-component-config.json).Creating a local .new-component-config.json in your project's root directory.Command-line arguments.

The resulting values are merged, with command-line values overwriting local values, and local values overwriting global ones.

API Reference

Type

Control the type of component created:

functional for a stateless functional component (default).class for a traditional Component class,pure-class for a PureComponent class,

Legacy createClass components are not supported.

Usage:

Command line: --type or -t

JSON config: { "type": }

Directory

Controls the desired directory for the created component. Defaults to src/components

Usage:

Command line: --dir or -d

JSON config: { "dir": }

File Extension

Controls the file extension for the created components. Can be either js (default) or jsx.

Usage:

Command line: --extension or -x

JSON config: { "extension": }

Prettier Config

Delegate settings to Prettier, so that your new component is formatted as you'd like. Defaults to Prettier defaults.

For a full list of options, see the Prettier docs.

Usage:

Command line: N/A (Prettier config is only controllable through JSON)

JSON config: { "prettierConfig": { "key": "value" } }

Example:

{ "prettierConfig": { "singleQuote": true, "semi": false, }}

(Ideally, the plugin would consume your project's prettier settings automatically! But I haven't built this yet. PRs welcome!)

Platform Support

This has only been tested in macOS. I think it'd work fine in linux, but I haven't tested it. Windows is a big question mark (would welcome contribution here!).

Development

To get started with development:

Check out this git repo locally, you will need to ensure you have Yarn installed globally.In the folder run yarn installCheck that command runs node ../new-component/src/index.js --helpAlternatively you can set up a symlink override by running npm link then new-component --help. Note: this will override any globally installed version of this package.

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。