備忘録_ESlint入門_個人的メモ

完全に自分用です。

インストール

$ npm install --save-dev eslint

設定ファイル

設定方法も何個があるけど、下記を使用

.eslintrc.json

設定ファイルサンプル

{
  "env": {
    "browser": true,
    "jquery": true
  },
  "extends": "eslint:recommended",
  "globals": {
  },
  "parserOptions": {
    "ecmaVersion": 2015
  },
  "rules": {
    "no-extra-semi": "warn",
    "no-undef": "warn",
    "quotes": ["warn", "single"],
    "space-before-blocks": ["warn", { "functions": "always" }]
  }
}

env

ブラウザやjQueryなどのグローバルプロパティを一括指定

• true or false

extends

ESLintおすすめのルールを適用させることが可能

下記参照
http://eslint.org/docs/rules/

globals

グローバルに存在していることを明示
※基本はenvに指定。それでも対応できない場合はここで。

parserOptions

サンプルファイルではES2015の記述に対応させるオプションを記述

詳しくは下記を参照
http://eslint.org/docs/user-guide/configuring#specifying-parser-options

rules

もろもろルールを記述

• off / チェックしない
• warn / 警告表示
• error / エラー

--fix オプション

--fixのオプションを使用することでエラー部分を自動的に書き換えてくれる
※全てを書き換えるわけでなはいので注意

下記ページを参照(スパナのマーク)
http://eslint.org/docs/rules/

$ eslint <対象ファイルのパス> --fix

.eslintignore

除外したいファイルを記述する
※例えばjQuery自体とか・・・

/dev/lib/**

-f codeframe

下記のようにオプションを追加するとエラー箇所がわかりやすくなる

$ eslint <対象ファイルのパス> -f codeframe

neovimで使う

下記2つのプラグインを入れる

• 'neomake/neomake'
• 'benjie/neomake-local-eslint.vim'

設定ファイルに下記を追記

autocmd! BufWritePost * Neomake
let g:neomake_javascript_enabled_makers = ['eslint']

let g:neomake_error_sign = {'text': '>>', 'texthl': 'WarningMsg'}
let g:neomake_warning_sign = {'text': '>>',  'texthl': 'Question'}