Skip to content

Instantly share code, notes, and snippets.

@liuderchi liuderchi/init.js
Last active Sep 8, 2017

Embed
What would you like to do?
Insert React Functional Component Snippet for Atom
// steps:
// 1. copy this file to ~/.atom/init.js
// 2. in Atom, dispatch command "Window:Reload", Atom would run this file rather than init.coffee
// 3. create new empty file Foo.js
// 4. focus to new tab, send command "react:insert-functional-component-template"
atom.commands.add('atom-text-editor', 'react:insert-functional-component-template', () => {
editor = atom.workspace.getActiveTextEditor()
if (!editor) { return null }
const fileNameCap = getCamelCaseNameFromPath(editor.getPath())
const template = `import React from 'react'\n\nconst ${fileNameCap} = (props) => {\n return (\n <div></div>\n )\n}\n\nexport default ${fileNameCap}`
editor.getLastSelection().insertText(template)
})
const getCamelCaseNameFromPath = (filePath) => {
const [ _, filenameNoExt ] = /(.*?)(?:\.[^.]+)?$/.exec(path.basename(filePath))
return filenameNoExt
.replace(/[\W_]/g, ' ')
.replace(/\w+/g, match => match[0].toUpperCase() + match.slice(1))
.replace(/\s+/g, '')
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.