JavascriptのソースチェックESLintと自動整形ツールPrettierをインストールする

今時ES6 JavaScriptで記述することが多くなったので
コード検証ツールにESLint、自動整形ツールにPrettierをインストールしてSublimeTextから使用できるようにします。

● ESLintのインストール

npm install -g eslint

● Prettierのインストール

npm install -g prettier

● PrettierによるJavaScriptソースコード自動整形のテスト

ここまでの状態で自動整形のテストを行います
test.js ファイルを用意して自動整形してみます

prettier test.js 

ターミナル画面(標準出力)に自動整形した結果が表示されます。
実際に自動整形してファイルを更新するには( --write )オプションを使用します。

prettier --write test.js

● ESLintによるJavaScriptソースコード検証のテスト

※1. .eslintrc.js の生成

eslint test.js と行きたいところですが、まず設定ファイルを作成します。 懸賞したいファイルがあるディレクトリから

eslint --init

を実行すると対応形式で設定ファイル( .eslintrc.js )が生成されます こんなファイルです

module.exports = {
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "sourceType": "module"
    },
    "rules": {
        "indent": [
            "error",
            4
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "always"
        ]
    }
};

※2. eslintの実行

eslint test.js 

でソースコードの検証が実行されます。

● ESLint検証ルール( .eslintrc.js )をカスタマイズする

.eslintrc editor
https://pirosikick.github.io/eslintrc-editor/

● Airbnb JavaScript Style Guideに沿ったESLintを設定する

「Airbnb JavaScript Style Guide」はなかなか厳格なルールなので
既存のプロジェクトにいきなり当てはめるには無理がありますが
どの程度厳格なソースフォーマット指定なのか体験しておくだけでも価値があると思います

・ Airbnb JavaScript Style Guide

https://github.com/airbnb/javascript

・ Airbnb JavaScript Style Guide に沿ったESLintを設定します

npm init -y
npm install --save-dev eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y eslint
{
  "extends": "airbnb"
}

● Sublime Textから使用できるようにする

JavaScript自動整形PrettierをSublime Textから使用できるようにする

関連エントリー

No.1151
06/16 11:34

edit

node.js