eslint + prettier の使い方

概要

  • 規約に沿って可読性を保ったコーディングがしたい
  • eslint + prettier を併用してwebpackで使いたい

  • 基本的に eslint –fix 実行時に prettier を使う感じ

eslint

  • ESLint
  • avaScript のための静的検証ツール
  • コードを実行する前にバグを見つけたりする
  • C言語の lint が元祖検証ツール

  • 検証ルールを自由に有効・無効

  • カスタムルールを作れる
  • プラグインが多い
  • JSXサポート
  • Babelと連携可能

prettier

eslintを使う

eslintインストール

  • eslint-plugin-react もないとcliで実行時にエラーといわれた
  • 1
    $ yarn add  -D eslint eslint-plugin-react
  • nodeのバージョンが対応外と言われる

    • 1
      2
      3
      4
      eslint@5.0.1: The engine "node" is incompatible with this module. Expected version  "^6.14.0 || ^8.10.0 || >=9.10.0".

      $ node -v
      v9.8.0
  • 「 >=9.10.0 」と書いていたので9.10.0をインストール

    • 1
      2
      3
      $ sudo n 9.10.0
      $ node -v
      v9.10.0
  • 再度 yarn add してインストール完了

設定ファイル作成

  • プロジェクトのローカルの node_modules から eslint を実行

    • 1
      $ ./node_modules/.bin/eslint --init
  • 設問形式か自分でファイルを作成するか聞かれる

    • とりあえず最初なので設問形式で作成する
    • 1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      ? How would you like to configure ESLint? Answer questions about your style
      ? Which version of ECMAScript do you use? ES2016
      ? Are you using ES6 modules? Yes
      ? Where will your code run? Browser
      ? Do you use CommonJS? No
      ? Do you use JSX? Yes
      ? Do you use React? Yes
      ? What style of indentation do you use? Tabs
      ? What quotes do you use for strings? Single
      ? What line endings do you use? Unix
      ? Do you require semicolons? Yes
      ? What format do you want your config file to be in? JSON
    • 質問に上記の回答をしていくと以下の設定ファイルが自動で生成される

      • よく記事で見る設定ファイルの形式がJSONなのでJSONを選択しました。他には yaml と js が選べます。
    • 1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      {
      "env": {
      "browser": true,
      "es6": true
      },
      "extends": "eslint:recommended",
      "parserOptions": {
      "ecmaFeatures": {
      "jsx": true
      },
      "ecmaVersion": 2018,
      "sourceType": "module"
      },
      "plugins": [
      "react"
      ],
      "rules": {
      "indent": [
      "error",
      "tab"
      ],
      "linebreak-style": [
      "error",
      "unix"
      ],
      "quotes": [
      "error",
      "single"
      ],
      "semi": [
      "error",
      "always"
      ]
      }
      }

使い方

  • eslint単体ならCLIで使う

    • 1
      eslint hoge,js
  • webpackでの使い方はwebpackのセクションで説明

試用

  • 下記コードに対してcliから試用
  • 1
    2
    3
    hoge = () => {
    console.log("aaa");
    }
  • 1
    $ ./node_modules/.bin/eslint hoge.js
  • 結果が以下

  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    hoge.js
    1:1 error 'hoge' is not defined no-undef
    2:1 error Expected indentation of 1 tab but found 4 spaces indent
    2:5 error Unexpected console statement no-console
    2:17 error Strings must use singlequote quotes
    3:2 error Missing semicolon semi

    5 problems (5 errors, 0 warnings)
    3 errors, 0 warnings potentially fixable with the `--fix` option.
  • console.log も怒られているが rules に “no-console”: “off” を追加すればok

  • tab でインデントしてたんですがVSCodeの仕様でスペース4つになっていますね…これはVSCode側の設定でなんとかする部分でしょう
  • あとは hoge関数 が使われていないこと、ダブルクオートが使われていること、関数の最後にセミコロンがないことが怒られています
  • –fix コマンドを使用すると整形もしてくれるっぽいです(prettierいらないんでは…?)

Airbnbのスタイルガイド導入

  • air bnb という会社のスタイルガイドを導入します
  • airbnb/javascript
  • eslint-config-airbnb
  • eslint-config-airbnbの導入

  • eslint-config-airbnb@latest の依存関係を調べる

    • 1
      2
      3
      4
      5
      6
      $ npm info "eslint-config-airbnb@latest" peerDependencies

      { eslint: '^4.19.1',
      'eslint-plugin-import': '^2.12.0',
      'eslint-plugin-jsx-a11y': '^6.0.3',
      'eslint-plugin-react': '^7.9.1' }
    • eslint-plugin-import、eslint-plugin-jsx-a11y、eslint-plugin-reactが必要

    • 1
      yarn add -D eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-config-airbnb
  • configの設定

    • 1
      2
      3
      4
      5
      6
      7
      {
      "env": {
      "browser": true,
      "es6": true
      },
      "extends": ["eslint:recommended","airbnb"]
      }

eslint を使用しないファイルを設定

  • .eslintignore というファイルを作成する
    • node_modulesは書かなくてもデフォルトでignoreになってるかも
    • 1
      2
      3
      dest
      webpack.config.js
      node_modules

prettier

  • Prettier
  • 下記をサポートするコードフォーマッタ
    • JavaScript(ES2017含む)
    • JSX
    • Flow
    • TypeScript
    • CSS, Less, ,SCSS
    • JSON
    • GraphQL
    • Markdown(GFM含む)
    • YAML
  • オリジナルな記述を全て一貫した規約に沿った記述に自動で整形する
  • 一行にまとめられているコードとかを複数行の可読性のある形にできたりする

  • 公式サイト要約

    • 自動で整形できるからコーディング規約導入による面倒がかなり減るよ。多少思った通りの整形にならなくてもメリットの方が大きいよ。

使い方

  • CLIオプション一覧
  • API使用法

  • prerrie単体ならcliで

  • 以下のファイルに対して
  • 1
    2
    3
    hoge = () => {
    console.log("aaa");
    }
  • プロジェクトのnode_modulesから使う

  • 1
    ./node_modules/.bin/prettier --single-quote --trailing-comma es5 --write "./hoge.js"
  • 整形後

  • 1
    2
    3
    hoge = () => {
    console.log('aaa');
    };
  • –debug-check コマンドでコードの正確性が変更される可能性を検出できる。(–writeと併用はできない)

eslintとの併用

  • ESLintとの統合
  • eslint-plugin-prettier が必要
  • 1
    yarn add -D eslint-plugin-prettier eslint-config-prettier

VSCodeで保存時に整形されるようにする

  • VSCodeというエディタを使う場合のみです
  • Prettier - JavaScript formatter のプラグインをインストール
  • command + , で User Settings を開いて、「”eslint.autoFixOnSave”: true,”prettier.eslintIntegration”: true」を追加
  • 保存するたびにeslint-prettierが実行される

git commit 時に整形されるようにする

  • HuskyとLint-stagedを使う方法
  • 1
    yarn add -D lint-staged husky
  • package.jsonに以下追加

    • 1
      2
      3
      4
      5
      6
      7
      8
      9
      "scripts": {
      "precommit": "lint-staged"
      },
      "lint-staged": {
      "*.{js,jsx}": [
      "eslint --fix",
      "git add"
      ]
      },

webpackで eslint + prettier の設定を使用する

  • loaderにeslintを使用していくイメージ
  • eslint-loader を追加
  • 1
    $ yarn add eslint-loader
  • 以下を webpack.config.js に追加

  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    module: {
    rules: [
    {
    enforce: 'pre',
    test: /\.(js|jsx)$/,
    exclude: /node_modules/,
    loader: 'eslint-loader',
    }
    }
  • エディタとかgit commit時の設定してたらいらん気もする

todo

  • css、stylusのlintもする
  • スタイルガイド毎の違いとか調べてみたい

参考