This package provides the following services:
React autocompletion atom plugin
Autocomplete component names & prop types for any react component used in your project.
DX for the win!
Demo Video
🎥- Component Name autocompletion
- PropType autocompletion and inline documentation
- your feature here!
Install Instructions
- Search for the
atom-react-autocomplete
package in Atom and install npm i react-autocomplete-cli --save-dev
in your project root- Create a
.importjs.json
file in your project root directory & specify your component paths. (See example below) - in your project add
generate: "rc-autocomplete"
to your npm scripts - Run
npm run generate
to generate the projects autocompletions - Restart atom for it to source the completions file
completions.json
file used by the atom plugin, you can .gitignore it or include for others using the atom plugin
Protip If you do commit the completions.json
file to your project other devs on your team will not need to run the setup steps. They can just install the atom plugin and be off to the races.
.importjs.json
example
{
"lookupPaths": [
"node_modules/react-toolbox/components/**/*.js",
"app/src/components"
]
}
package.json
example
// the `npm run generate` command will look at .importjs.json lookupPaths
"scripts": {
"singlePath": "rc-autocomplete --src 'node_modules/react-toolbox/components/**/*.js'",
"generate": "rc-autocomplete"
}
The CLI for this can be found here: https://github.com/DavidWells/react-autocomplete-cli
Troubleshooting
If you have completions.json
generated in your projects root directory and autocompletions are not working, restart/refresh Atom and it should pickup the completions file.
How does this work?
React Docgen generates data that is parsed into readable tokens (completions.json
) for consumption of the atom autocomplete+ provider (see lib/provider
for how the provider works)
Configuration is the same as import-js https://github.com/Galooshi/import-js#configuration to enable future improvements and possible automated imports
Todo:
- [] Update autocomplete to support values of props
- [] Make autocomplete output pluggable (custom prompts)
- [] Make custom docs link pluggable
- [] Generate output for sublime text
- [] ... ?
About the autocompletion
The atom plugin uses the autocomplete-plus https://github.com/atom/autocomplete-plus/wiki/Provider-API
Inspiration
Thanks to atom https://github.com/atom/autocomplete-html/blob/master/lib/provider.coffee for the inspiration on building this
Also Props to:
- https://twitter.com/davatron5000/status/731249986600456192
- https://github.com/buzzfeed/solid-completions
- https://github.com/Galooshi/atom-import-js/