とりあえずESlistとprettierでコードフォーマットしたい人へ。Visual Studio Codeで動く設定ファイルをさらしてみる。

ESlintとprettierによるコードフォーマットに興味を持って調べていたのですが、
きっちりとした丁寧な解説をしている記事が多く、、
シンプルに導入方法だけを書いている記事があまりなかったので書いてみます。

（１）準備

Visual Studio Codeをインストールして、eslintとprettierの拡張機能を入れる。

（２）npm

npmを初期化する。
特定のプロジェクトフォルダを作り、Visual Studio Codeで開いてから、
コンソールで、以下入力

npm init -y

（３）各種パッケージのインストール

npm install -D eslint prettier eslint-config-prettier eslint-plugin-prettier babel-eslint

eslint、prettier以外に、下記を入れました。

eslint-config-prettier・・・ESlint→Prettierの順に実行し、Prettierの整形ルールを優先する。
eslint-plugin-prettier・・・PrettierをESLint上で実行する
babel-eslint・・・非標準仕様のJSを使えるようにする

（４）設定ファイルの設置

.eslintrc.jsをプロジェクトフォルダ直下に置きます。
個人的にはjsonよりjsの方が好き。コメントも書けるし。

.eslintrc.js

module.exports = {
  root: true, // ルートのルールと見なす。（これ以上上位のルールを確認しない）
  env: {
    browser: true,
    node: true,
    jquery: false, // jQueryを使う場合は、trueにする。
    es6: true
  },
  plugins: ['prettier'],
  extends: [
    'eslint:recommended', // eslint推奨のルールセットを読み込む
    'plugin:prettier/recommended', // prettier推奨のルールセットを読み込む
  ],
  parser: 'babel-eslint', // 非標準仕様で、NGを出さないようにする。
  parserOptions: {
    sourceType: 'module', // es6のモジュールで、NGを出さないようにする。
  },
  globals: { // グローバル変数
    $: false // envのjqueryがtrueなら、こちらはtrueにしなくてもOK
  },
  rules: { // 追加ルール
    'prettier/prettier': [
      "error", {
        "printWidth": 120, // 1行の最大文字数を120文字とする。
        "semi": false, // セミコロンは不要
        "singleQuote": true, // シングルクォーテーションはOK
      }
    ],
  },
}

これで、Visual Studio Codeでjsファイルを開くと、
エラーの箇所に赤い波下線が引かれるようになります。

個別に整形する場合は、波下線にマウスオーバーして、「クイックフィックス」を選択。
また、ファイル内全体を整形する場合は、ctrl + shift + pで、eslintと打ち、「ESlint:Fix all auto-fixable problems 」を選択すればOKです。

さらにファイル保存時に自動整形させたい場合は、設定 – 拡張機能 – ESlintから、「Eslint:Auto Fix On Save」にチェックを入れれば、自動整形されます。

 

（参考）

■ESLintのルールを全部手動で設定するのは大変だからやめておけ
https://qiita.com/khsk/items/0f200fc3a4a3542efa90

■ES5なJavaScriptをESLintとPrettierで改善する
https://www.wantedly.com/companies/askul/post_articles/155377

■Prettier 入門 ～ESLintとの違いを理解して併用する～
https://qiita.com/soarflat/items/06377f3b96964964a65d

■ESLintの設定
https://yokotakenji.me/log/?p=6021

jQuery/Javascript

Posted by dog-ears