ESLint v3.x で React 使う場合の設定メモ

• 2016-08-04 Thu: 追記・修正

(eslint v3.1.1)

Install

$ node install -g eslint eslint-plugin-react 

.eslintrc

{
  "plugins": ["react"],
  "extends": ["eslint:recommended", "plugin:react/recommended"],
  "env": {
    "es6": true,
    "browser": true,
    "node": true
  },
  "rules": {
    "react/prop-types": "warn",
    "eqeqeq": ["warn", "smart"],
    "no-console": "off",
    "no-var": "error",
    "prefer-const": "error",
    "semi": ["warn", "always"]
  },
  "parserOptions": {
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  }
}

補足など

ecmaFeatures の "jsx": true すると何が変わるの？

コンポーネントのrenderのとこチェックするかどうか

class MyComponent extends React.Component {
  render() {
    retrun (
        <p> {foo}</p> // 使ってない変数。"jsx": true だとエラーになる
    )
  }
}

変数巻き上げ対応

babel通すと strict モードになって const と let は巻き上げならずにエラーになる。

    "no-var": "error",
    "prefer-const": "error",

巻き上げになる例

var hoge = "global";
 
function func() {
    console.log(hoge);  //=? undefined
    var hoge = "local";
    console.log(hoge); //=> local
}
 
func();

巻き上げならない例

"use strict"

const fuga = "global";
 
function func2() {
    console.log(fuga);  //=> エラー
    const fuga = "local";
    console.log(fuga);
}
 
func2();

es5で書くなら top-var 入れといた方がいいかも（その場合は no-var prefer-const 外す）

参考

• http://eslint.org/
• http://eslint.org/docs/rules/
• http://eslint.org/docs/user-guide/configuring#extending-configuration-files
• ESLint v2.0.0 の変更点まとめ
  • ecmaVersion: 6を記載しても、ES2015(ES6) の新しいグローバル変数は定義されません
  • できる限りparserOptionsよりもenvを使うようにしましょう。
• ESLintのエラールール。日本語ざっくり解説[ES6編] - Qiita

Emacs の whitespace-mode でタブと行末スペースと全角スペースに色付けするメモ

今まで　font-lock で色つけたけど whitespace-mode に乗り換えた。

(progn
  (require 'whitespace)
  (setq whitespace-style
        '(
          face ; faceで可視化
          trailing ; 行末
          tabs ; タブ
          spaces ; スペース
          space-mark ; 表示のマッピング
          tab-mark
          ))
  (setq whitespace-display-mappings
        '(
          (space-mark ?\u3000 [?\u2423])
          (tab-mark ?\t [?\u00BB ?\t] [?\\ ?\t])
          ))
  (setq whitespace-trailing-regexp  "\\([ \u00A0]+\\)$")
  (setq whitespace-space-regexp "\\(\u3000+\\)")
  (set-face-attribute 'whitespace-trailing nil
                      :foreground "RoyalBlue4"
                      :background "RoyalBlue4"
                      :underline nil)
  (set-face-attribute 'whitespace-tab nil
                      :foreground "yellow4"
                      :background "yellow4"
                      :underline nil)
  (set-face-attribute 'whitespace-space nil
                      :foreground "gray40"
                      :background "gray20"
                      :underline nil)
  (global-whitespace-mode t)
  )

参考

• Emacsでtab文字や行末の空白の可視化
• https://www.emacswiki.org/emacs/WhiteSpace