joppot

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

ソフトウェア

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



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 invert photoshop brush

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

Using vc to manage git on emacs25

Abstract Hello everyone it’s me candle. In this article we would like to use vc(version controll) which is included by deault in emacs. It seems that vc supports to both subversion and git, not git-specific functions. If you want to use git with emacs in earnest, I recommend magit. On the other hand, since vc is installed in by default, it is good for user who want to use it easily. Precondition You use emacs You have a basic git skill. vc-git configuration of emacs Although vc supports to git, ‘git add’ and ‘git reset HEAD’ do not exist. 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.

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 …

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

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