VSCodeでES6のESLintの設定をする方法 (4.2.0対応)

現在ESLintの設定はExtensionを利用するものになっているのでそのやり方。ESLint 4.2.0 に対応したものに更新しました。

• https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
• http://eslint.org/docs/user-guide/configuring

以上を見つつ設定したものを紹介。

まず前提として、Node.jsがインストールしてあり、npm install -g eslintがされていることが前提です。MacでもWindowsでもLinuxでも同様です。

$ eslint --version
v4.2.0

VSCodeを起動後、Command + Shift + p でパレットを出して

ext install

を入力、 ESまで入力すると ESLint のプラグインが出てくるのでダウンロードしてインストールボタンをクリックして再起動します。

その後、メニューの Code > Preference > User Setting (日本語のWindowsだと、基本設定 > 設定 だったりもします。)

eslint.nodePath は自分のプラットフォームに合わせて変更してください。

  // ESlint extension
  "eslint.enable": true,
  "eslint.nodePath": "C:\\Users\\sifue\\AppData\\Roaming\npm\\eslint",
  "eslint.options": {
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    },
    "rules": {
      "quotes": [
        2,
        "single"
      ],
      "linebreak-style": [
        2,
        "unix"
      ],
      "semi": [
        2,
        "always"
      ],
      "no-console": 0
    }
  },

以上を追記します。これでESLintでNGのコードは、エラーになります。
お疲れ様でした。

なお自分は VSCodeのsetting.json は以下の感じになっています。

{
  // ESlint extension
  "eslint.enable": true,
  "eslint.nodePath": "C:\\Users\\sifue\\AppData\\Roaming\npm\\eslint",
  "eslint.options": {
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    },
    "rules": {
      "quotes": [
        2,
        "single"
      ],
      "linebreak-style": [
        2,
        "unix"
      ],
      "semi": [
        2,
        "always"
      ],
      "no-console": 0
    }
  },
  // Controls the rendering size of tabs in characters. Accepted values: "auto", 2, 4, 6, etc. If set to "auto", the value will be guessed when a file is opened.
  "editor.tabSize": 2,
  // Controls if the editor will insert spaces for tabs. Accepted values:  "auto", true, false. If set to "auto", the value will be guessed when a file is opened.
  "editor.insertSpaces": true,
  // Controls whether the editor should render whitespace characters
  "editor.renderWhitespace": "all",
  "window.zoomLevel": 0
}

やっぱりスペースとタブは見えていたほうが便利ですね。