joppot

コピペで絶対動く。説明を妥協しない

ソフトウェア

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

投稿日:2017年9月6日 更新日:


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 me.

Caution
I succeeded to build eslint environment at terminal Emacs, but Mac OS native Emacs couldn’t connect with eslint.If someone seems to be able to solve it, I will be saved if you comment.

前提

node is installed
emacs is installed



installing eslint

First, install eslint.
The eslint syntax check of emacs is not an emacs standalone function.
Eslint is running on the background, emacs throws values to that API, receive the result and check the code.

I will install eslint to my Mac PC as a whole. By adding the -g flag, you can use it as a whole

npm install -g eslint

Next, install the eslint react plugin.

npm install -g eslint-plugin-react

By also to add the -g flag, you can use it globally.
After installation you would type “eslint” and check the command can be used.

eslint

Prepare of eslit is done.

Installation of flycheck

Ok we approach emacs.
For syntax checking of emacs we use flycheck.

install with mepla

Lauch emacs and run “M-x package-list-packages”
Emacs will display the melpa package index. You would search “flycheck” with C-s

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

Open the ~/.emacs.d/init.el and write this.

;;;flycheck
(require 'flycheck)
(add-hook 'after-init-hook #'global-flycheck-mode)

Install with el-get

Open the ~/.emacs.d/init.el and write this.

;;;flycheck
(el-get-bundle flycheck)
(add-hook 'after-init-hook #'global-flycheck-mode)



flycheck configuration

http://umi-uyura.hatenablog.com/entry/2015/10/28/182320

According to the above blog, flycheck supports eslint, but it seems to use jshint on a priority. so we would disabled jshint, jscs with the below setting.

However, as I knew later, neither jshint nor jscs did not work unless the environment had been built on the node, so the below setting doesn’t matter.

(eval-after-load 'flycheck
  '(custom-set-variables
    '(flycheck-disabled-checkers '(javascript-jshint javascript-jscs))))

The setting seems to be over.

Create the sample file

Create the sample file for syntax check testing.
The place is ok anywhere for the meantime, so we will make it on the desktop.

touch ~/Desktop/App.js

Write below code.

import React from 'react';

class App extends React.Component{
  constructor(){
    super();
    this.state = {
      txt: 'this is the state text'
    }
  }

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

  render(){
    return(
      <div>
        <p>Text: {this.state.txt}</p>
        <input name="" type="text" onChange={this.update.bind(this)} />
      </div>
    )
  }
}

const Person = (props) => <h4>{props.name}</h4>

export default App;

This “-” state indicates that eslint is not working properly.
We have not set eslint yet, so it is displayed like that.


eslint configuration

Put the eslint configuration file on the home directory.
By the way, I have not verified, but I think that the file can be put in each Reac project.
Create .eslintrc file on the home directory.

touch ~/.eslintrc

I almost copy the content from the below site because I do not know how to write eslint syntax check settings.

https://github.com/yannickcr/eslint-plugin-react/issues/18#issuecomment-80754101

Write this to ~/.eslintrc

{
  "env" : {
    "es6": true
  },
  "plugins": [
    "react"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true,
      "modules": true
    },
    "sourceType": "module"
  },
  "rules": {
    "strict": 0,
    "no-throw-literal": 1,
    "quotes": [1, "single"],
    "react/no-multi-comp": 1,
    "react/prop-types": 1,
    "react/display-name": 1,
    "react/wrap-multilines": 1,
    "react/self-closing-comp": 1,
    "react/no-did-mount-set-state": 1,
    "react/no-did-update-set-state": 1,
    "react/jsx-uses-react": 1,
    "react/jsx-uses-vars": 2,
    "react/react-in-jsx-scope": 1
  }
}

There is one note.

 "parserOptions": {
   "ecmaFeatures": {
        "jsx": true,
        "modules": true
    },
    "sourceType": "module"
  },

The above part is written differently depending on the version of eslint. If your code can’t run by something wrong, please change like this.

  "ecmaFeatures": {
    "jsx": true,
    "modules": true
  },
  "parserOptions": {
    "sourceType": "module"
  },

It’s written in this github issue.
https://github.com/yannickcr/eslint-plugin-react/issues/447

I will explain it in the range that I examined.

“env” : {
“es6”: true
},

This is the declare that is written in es6.

“plugins”: [
“react”
],

Declaration of using the react plugin of eslint.

“parserOptions”: {
“ecmaFeatures”: {
“jsx”: true,
“modules”: true
},
“sourceType”: “module”
},

Declaration of using jsx.
if We remove “sourceType”: “module”, the warning is displayed in react component import line.

rules is the eslint rule
For details of these rules please refer to the official website.
http://eslint.org/docs/rules/

complete the setting.

Checking

Open the ~/Desktop/App.js which you just created with editor.

emacs ~/Desktop/App.js

Like the above image, it is successes that the part of FlyC displays the two warnings.
The place of warning is the const Person.
When move the cursor at the place of warning, a warning message will be displayed and you can see the problem.

Apparently, it is a warning not to write two react components in one file.

Let’s try another one. In the .eslintrc file the string quotes are declared as single, so if you change it to double for testing you will be warned.

OK!


Conclusion

Using eslint, you will not write code with different rules or extra part for each file, you can code much more sophisticated program.

スポンサードリンク

If you think this article is good, share it please

-ソフトウェア
-, ,

執筆者:


comment

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

関連記事

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

In emacs on iTerm2, resolve you can’t enter symbol key binding such as C-; C-: C-> C-< C-. C-,

Abstract Hello eveyone it’s me candle. This time I will show you how to solve the problem that you can’t use symbol keybind on your iTerm2 emacs. Basically, emacs on iTerm2 can’t use key binding of control + symbol. The detail thing is written in this article. (japanese) http://memo.sugyan.com/entry/20120224/1330051378 Acouding to the article Apparently it seems that the range of ASCII that ctrl key can control is decided. This post referred to the below linked article. I tried how to setup symbol key binding a few years ago and I was frustrated. But I solved it by that. it was …

Write haml with Atom

English 日本語 Abstract Hello everybody, it’s candle. In this time we will write haml with Atom. I’m coding with emacs for all time. but sotimes I use atom. When I open a haml file, there is no coloring and syntax, I try to add plugin. Premise You have Atom editor.

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 …

Import React components using Emacs and import-js2.2.0

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 …


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.