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 *

関連記事

Fix emacs powerline character gets corruption(mojibake) on Mac standard terminal or iTerm2

Abstract Hello everyone it’s me candle. In this time I will show you how to fix emacs powerline character corruption(mojibake). I am referring to this site. https://griffio.github.io/utils/2016/01/26/Spacemacs-OSX-Term/ I will explain both iterm2 and mac standard terminal. In my case I launch the Emacs with iterm2, the arrow of powerline gets garbled. Let’s fix. Precondition You use emacs Your emacs was installed powerline. You use emacs with iTerm2 or mac standard terminal.

Build flycheck + eslint environment supporting to react + es6 in Emacs.

Abstract Hello everyone it’s me candle. In this time let’s build emacs + eslint. There are many other syntax check packages such as jsHint, jsxHint, etc which check the coding rule of javascript. According to web info, these packages seem to be unable to adapt well with the latest javascript writing format such as React and es6. Nowadays eslint became to be mainstream. It has become used not only in emacs but also everywhere. I’m also emacs user, try it! I’m not a node JS and Elisp professional, it may contains useless writing or wrong writing. Please go easy on …

Allocate lo0 IP address using Mac login hook automatically

Abstract Hello everyone it’s me candle. In this time we would like to use the login hook of Mac and automatically allocate the local ip address. You can use the default 127.0.0.1 lolcal IP address on your Mac. However when using it with docker, you need to prepare other local IP address separately. Precondition You use Mac.

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

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