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 *

関連記事

Atom imports React component using import-js 2.2.0

Abstract Hello everybody it’s me candle. In this time we will import the component path into the file using import-js and Atom automatically. 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. 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. Atom was installed in your computer.

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.

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.

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

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 …


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.