ESLintでES6(JS)を自動整形する

はじめに #

Javascript で開発していく上で、ある程度のルールは決めておく必要がある。 ESLint を使用し、コード管理する。

管理ルールはhttp://cou929.nu/data/google_javascript_style_guide/を参照する。

1. パッケージ管理ツール npm
2. 使用モジュール ESLint
3. 使用ルール eslint-config-google

node をインストールする #

nodeをインストールし npm を使用できる状態にしてください。

ESlint とルールをインストールする 作業ディレクトリ内で、以下を実行し必要なモジュールをインストールしてください。

npm install eslint eslint-config-google

ESlint ルールを記述する #

作業ディレクトリ内で、【.eslintrc】ファイルを作成し以下を記述してください。

{
  "extends": ["google"],
  "rules": {
    "linebreak-style": ["error", "windows"]
  },
  "env": {
    "es6": true
  }
}

テストコードを記述する ファイル名は【test.js】とします。 google のルールだと引数名に””とコードに;がないことは許されません。

// eslint-disable-next-line valid-jsdoc
/**
 * @add
 */
function add(x, y) {
  return x + y
}
document.write(add("Hello", "World"));

ESlint で整形する #

以下コマンドを実行し、ルール通りに修正されるか確認してください。

eslint --fix test.js

// eslint-disable-next-line valid-jsdoc
/**
 * @add
 */
function add(x, y) {
  return x + y;
}
document.write(add('Hello', 'World'));

以上です。