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 *

関連記事

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

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.

Hide Google Chrome 70 “For quick access, place your bookmarks …” bar

Abstract Hello everyone it’s me candle. I usually use Safari. Sometimes using Google Chrome, I forget how to turn off the bookmark bar. First I will write two important things. Google Chrome 70 turn off the book mark bar by default. In the top page of Google Chrome 70, the bookmark bar is definitely displayed Condition You use Google Chrome Turn off it Open Google Chrome, choose “Settings” from the menu icon in the top right. If you turn off “Show bookmarks bar” in the second “Design” area from the top, bookmark bar disappears. It’s over Conclusion Simple is best.

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.

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.