PhpStormでESLintでReactのコードをチェック : JavaScript

Tweet

Pocket

PhpStormでReactのコードをESLintでチェックするメモです。

ESLint – Pluggable JavaScript linter

今回Reactのサンプルはreactjs/react-tutorial: Code from the React tutorial.を使います。

設定の流れ

(1) npmでeslintインストール
(2) npmでeslint-plugin-reactインストール
(3) .eslintrc作成
以下PhpStormの設定です。
(4) PhpStormのESLint設定

またReactをJSXで記載しているときはPhpStormのコードチェックでJSXを扱うため下記設定を行います。

JSXで書かれたファイルを開くと「Switch language level to JSX Harmony」と表示されますのでSwitchを選択します。
(またはLanguages & Frameworks > JavaScriptのJavaScript language versionをJSX Harmonyを選択します。 )

ESLint設定手順

今回パッケージはローカルへインストールします。

(1) ESLintインストールします。

$ npm install eslint --save-dev

(2) ReactのESLint用パッケージをインストールします。

$ npm install eslint-plugin-react --save-dev

(3) .eslintrcファイル作成します。

{
  "plugins": [
    "react"
  ],
  "settings": {
    "react": {
      "pragma": "React",  // Pragma to use, default to "React"
      "version": "15.0" // React version, default to the latest React stable release
    }
  },
  "env": {
    "es6": true,
    "node": true,
    "browser": true
  },
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    }
  }
}

(4) PhpStormのESLintの設定を行います。

Language & Frameworks > JavaScript > Code Quality Tools > ESLint

設定は下記図のように行います。