joppot

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

ソフトウェア

Construct an Atom of eslint corresponding to react + es6

投稿日:

Pocket

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 *

関連記事

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.

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

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

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.

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