joppot

The program absolutely runs in copy paste

Software

Import React components using Emacs and import-js2.2.0

投稿日:

Pocket

Abstract

Hello everybody it’s me candle.
In this time we will import the component path with emacs and import-js.
React recommends to write one component in one file, when development becomes to be big, the number of component increase.

If you use 10 components with one Container, you need to write 10 import statements.
import-js helps us from such troublesome work.

Caution
It worked well on the react web but in react native import-js didn’t successfully find out the component. Probably I think that there are some lack of the setting of import-js.


Precondition

Already exist React web environment
I recommend you use the react project created by create-react-app command which I wrote the before article.
You use melpa or el-get

Caution

Since the major version of import-js of emacs does not correspond to import-js 2.2.0 of node-js, I do a little tricky thing.
I recommend using el-get.

SPONSORED LINK


About import-js

The system which emacs uses import-js is like this.
In the same way as eslint, emacs uses impot-js by access the external API.


import-js will automatically get the information about the structure of the project and the location of the component and insert import statements into the file.
Well, import-js has changed quite a bit since 2.1.0.

We use the importjsd daemon to connect with the process of the current editor. importjsd checks the module under the current directory, save the path etc in the database of sqlite3 in cachepath, and pass the value to the editor.

The emacs import-js plugin does not yet support this importjsd (April 11, 2017).
Therefore, we get the source code from the github repository which is developed by a volunteer programmer and use it.


install import-js

First install javascript import-js.
You can install import-js with npm.

npm install -g import-js

After installation you confirm that you can use the command.

importjs

This import-js version is 2.2.0 .
It is ready to go.

Install import-js plugin of Emacs.

Install import-js plugin to use import-js of node from emacs.

In the case of mepla

There is no import-js plugin for emacs supporting node import-js 2.2.0 yet.
It is not merged to the master branch when April 14, 2017, you can not install from melpa package.
So, once installing the old version with mepla and download the latest version by yourself.

Display the emacs packages with “M-x package-list-packages”.
Next search import-js with “C-s import-js”.

Move the cursor to impor-js, type “i”, then type “x” to install.
You are asked whether you want to install it, you can install it by typing “y”.

And download the .el file supporting import-js 2.2.0.

Go to the melpa directory.
The directory name of import-js changes according to the time.

cd ~/.emacs.d/elpa/import-js-20161220.508

Remove the import-js.el and import-js.elc.

rm import-js.el import-js.elc

We pull the file from github.

curl -O https://raw.githubusercontent.com/kevinkehl/emacs-import-js/importjsd/plugin/import-js.el

At last write the below code in .emacs.d/init.el

(require 'import-js)

melpa installation is over.

eInstall with el-get

The majar version import-js plugin of emacs doesn’t support node import-js2.2.0 yet.
We install import-js plugin with a little tricky way.

Open the .emacs.d/init.el and write the below code.

(el-get-bundle import-js
  :type github
  :name import-js
  :pkgname "kevinkehl/emacs-import-js"
  :branch "importjsd"
  :load "plugin/import-js.el"
  :depends (grizzl ))

With this command reload the init.el file and install the import-js plugin.

M-x eval-buffer

el-get installation is over.

Setting up import-js for emacs

The setting of import-js is divided into three.

1, import-js-import shortcut key
2, auto launching configuration of iimportjsd demon
3, Automatically stop the daemon when Emacs is quit with C-x C-c

1 and 2 configuration.

When impor-js-import is executed, the path of the module is automatically inserted into the file.
The allocation of “C-c i” has no reason. I used it because it was not allocated.

As I wrote it at the above, we need to launch the importjsd to use import-js.

Of course, you can start it manually with “M-x run-import-js”, but since it is troublesome, it will automatically start up.

For js2-jsx-mode

(add-hook 'js2-jsx-mode-hook
          (lambda ()
            (local-set-key (kbd "C-c i") 'import-js-import)
            (run-import-js)))

For rjsx-mode

(add-hook 'rjsx-mode-hook
          (lambda ()
            (local-set-key (kbd "C-c i") 'import-js-import)
            (run-import-js)))

In this setting you caught the message that you will kill the importjsd demon in each you quit the emacs.

Since it seems to be troublesome, we will set up it to be killed automatically.

(require 'cl-lib)
(defadvice save-buffers-kill-emacs (around no-query-kill-emacs activate)
  "Prevent annoying "Active processes exist" query when you quit Emacs."
  (cl-letf (((symbol-function #'process-list) (lambda ())))
    ad-do-it))

This is the all code.


Put the .importjs.js file into a react project

The importjs command will do such a thing with reference to .importjs.js in the root of the react project.
Ok I prepared the react project that has such structure in this time.

├── package.json
├── public
│ ├── favicon.ico
│ └── index.html
└── src
├── App.css
├── App.js
├── App.test.js
├── components
│ └── Input.js
├── index.css
├── index.js
└── logo.svg

Create the .importjs.js

touch .importjs.js

I don’t know about the setting of imporjs, so refer to the file on the github.
https://github.com/Galooshi/import-js/blob/master/.importjs.js

Write this.

module.exports = {
  environments: ['node'],
  ignorePackagePrefixes: ['lodash.'],
  declarationKeyword: 'import',
  logLevel: 'debug',
  excludes: [ './build/**' ]
}

Save it.

We use it

From this part, react development environment is different between each engineer. but I try to do at the above environment.

The code of src/App.js like this.

import React from 'react';

class App extends React.Component{
  constructor(){
    super();
    this.state = {
      txt: 'hello world'
    }
  }

  update(e){
    this.setState({
      txt: e.target.value
    })
  }

  render(){
    return(
      <div>
        <p>Text: {this.state.txt}</p>
        <Input onChange={this.update.bind(this)}/>
      </div>
    )
  }
}

export default App;

We try to insert the “Input component” from components/Input.js automatically.
Move the cursor on the <Input> jsx and execute “C-c i” or “M-x import-js-import”.

The first time importjsd does not recognize the module under the project, so nothing will come out.
Run “C-c i” or “M-x import-js-import” again.
Then, I think that the component will be inserted automatically.

It works good.

Conclusion

I tried and error pretty much before I let it auto insert.
Good react development on Emacs

スポンサードリンク

If you think this article is good, share it please

-Software
-, ,

執筆者:


comment

Your email address will not be published. Required fields are marked *

関連記事

How to prevent preview from scrolling back to top in Atom’s Markdown

English 日本語 Abstract Hello everyone, it’s candle. Atom has a markdown preview function from the beginning. When markdown’s sentence becomes long, every time you edit it, the preview back to the top. And, you have to scroll every time to check. It is so tough, we will put a plug-in that will automatically adjust the preview. Premise Atom has been installed

Construct an Atom of eslint corresponding to react + es6

Abstract Hello everyone it’s me candle. This time we will introduce Atom + eslint It is awesome easy to install it. Nowadays eslint became to be mainstream. It has become used not only in Atom but also everywhere. Precondition Node is installed Atom is Installed

Connect to host mysql from docker container of “docker for Mac”

Abstract Hello everyone it’s me candle. In this post I will show you how to connect to the host mysql from the docker container of mac. For example, you may connect to mysql when running rails, wordpress etc on docker. You may prepare docker of mysql, but it can’t hold data, it is troublesome such as startup time. Then I think that it is very useful if docker can access to the host mysql. Precondition You use docker for mac

How to send pdf from Mac to iphone or ipod using iBooks

English 日本語 Abstract Hello everyone, It’s me candle. In this time, I will show you how to send a pdf file from Mac to iphone or ipod. Sometimes I want to read the pdf document in the train, so I wrote the article about it. Before you send a pdf file to the iphone, you add the pdf to iBooks app. Then you will send the pdf with itunes. Precondition Mac PC iphone or ipod or ipad pdf file

Develop React in emacs in rjsx-mode

English 日本語 Abstract Hello everyone this is candle. In this time I would like to introduce rjsx-mode of major-mode for react development of emacs. The development of “react” has been tried and errored between emacs users, such as using web-mode or js2-jsx-mode of js2-mode. Also I had been used js2-jsx-mode before rjsx-mode. Since rjsx-mode is an extension of js2-mode, users of js2-mode can use it without discomfort. rjsx-mode has auto complete function of jsx. it’s fantastic. Precondition You use emacs You use melpa or el-get

Profile


I work in the venture company as a CTO. I start to write program in University, first I learned java, C++ and PHP. In the company, I'm developing web services by Rails. I do like to automation.

スポンサードリンク

Archives