joppot

The program absolutely runs in copy paste

Software

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

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

Pocket

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

SPONSORED LINK


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

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

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

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 …

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

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