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 *

関連記事

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.

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.

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

How to use f.lux, blue light cut software

Abstract Hello everyone. In this time I will explain how to use f.lux. f.flux can reduce the amount of blue light as much as possible. f.lux can adjust the blue light cut rate with the seek bar. Please try using it. Condition You use Mac or Windows I will explain it in Mac PC. Download f.lux Go to the blew site. http://justgetflux.com/ Click the center “Download f.lux” button. Once you have downloaded the zip file, let’s double-click it and extract it. Since The executable file is expanded in the download folder, move it to the Application folder. It’s over. Use …

How to send pdf from Mac to iphone or ipod using iBooks

English 日本語 Abstract Hello everyone, It’s me candle. In this time, I will show you how to send a pdf file from Mac to iphone or ipod. Sometimes I want to read the pdf document in the train, so I wrote the article about it. Before you send a pdf file to the iphone, you add the pdf to iBooks app. Then you will send the pdf with itunes. Precondition Mac PC iphone or ipod or ipad pdf file


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.