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.



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 *

関連記事

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

Build PlantUML environment on Mac using brew

Abstract Hello everybody it’s me candle. In this article, I would like to build a plantUML environment which can make UML easily on Mac. I have been used starUML for making UML. plantUML seems to be much more useful than that. Precondition You already use brew. Check java version I think that java is already installed in your mac pc. PlantUML can be run with mac default java. So you launch terminal app and check the java version with the below command. java -version Probably it can be work in java version around 1.8.x . Install graphviz graphviz is a …

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

How to invert photoshop brush

English 日本語 Abstract Hello everyone. It’s candle. In this time, I’ll show you how to invert brush effect. Precondition Nothing

Limit the number of text characters in wordpress article index by plugin

English 日本語 Abstract Hello everybody, It’s candle. Nowadays, when I used free themes for wordpress at the company, I noticed that. Many free theme use the_content function which expands all the contents of individual articles in the article list, and it is very irritating. However, editing a free theme is troublesome. We use the “Advanced Excerpt” plugin to limit the number of characters displayed in the article list and make it easy to see. We use the free theme “twentyeleven” as a sample. Before After Premise There is a wordpress.

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