joppot

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

ソフトウェア

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


Install eslint

First we’ll install eslint

we’ll install eslint in a whole of Mac PC.
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.


Install the eslint plugin of Atom

Launch Atom and select “Preferences…” from “Atom” of the top menu.

Click the “Install” at the left menu bar, enter “eslint” in the search box, push the Enter Key.
Install “linter-eslint” in the search results.

While installing you can see the dependency package installation.
Allow all.

Installing is finish.

Setup eslint

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.


Creating test file

Create the sample file for checking syntax.

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;

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.



Conclusion

React has many writing way.
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 *

関連記事

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 …

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 …

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.

How to prevent preview from scrolling back to top in Atom’s Markdown

English 日本語 Abstract Hello everyone, it’s candle. Atom has a markdown preview function from the beginning. When markdown’s sentence becomes long, every time you edit it, the preview back to the top. And, you have to scroll every time to check. It is so tough, we will put a plug-in that will automatically adjust the preview. Premise Atom has been installed

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


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.