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 *

関連記事

Import React components using Emacs and import-js2.2.0

Abstract Hello everybody it’s me candle. In this time we will import the component path with emacs and import-js. 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. Caution It worked well on the react web but in react native import-js didn’t successfully find out the component. Probably I think that there are some lack of the setting of import-js. Precondition Already exist React web environment I …

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.

Build flycheck + eslint environment supporting to react + es6 in Emacs.

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 …

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.

How to add extension to Ungoogled chromium

English 日本語 Abstract Hello everybody, It’s candle. I don’t use Google Chrome so much because I am firefox user, but sometimes I need to use Chrome for extensions. Google Chrome is slow, and there are some personal information protection is loose. Detail is here. https://github.com/Eloston/ungoogled-chromium So, I use ungoogled chromium. The problem of ungoogle chromium is that is not easy to install extensions. In this article, I’ll show you how to install plugins. This article is according to the under link. https://github.com/Eloston/ungoogled-chromium/blob/master/FAQ.md Premise Ungoogled chromium has been installed


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.