ディレクトリ作成から ESLint と Prettier を連携するまで

新しいディレクトリを作成したあと、ESLintやPrettierの再設定が面倒。よく忘れるし、いちいち思い出すコストがかかるのでまとめる。

やりたいこと

• ESLintを入れたい
  • JavaScript Standard Styleを使う
• Prettierを入れたい
  • ESLintと連携させたい

# なにはともあれコレから始める
npm init -y

# eslintを入れる
npm install -D eslint

# eslintの設定ファイルをつくる
touch .eslintrc.json

# JavaScript Standard Styleを入れる
npm install standard -D

# Prettierを入れる
npm install -D prettier

# ESLintとPrettierの連携をするために
npm install -D prettier-eslint prettier-eslint-cli eslint-config-google

ESLintの設定ファイル.eslintrc.jsonには以下を追記する。

{
  "extends": "standard",
  "plugins": [],
  "env": { "browser": true },
  "globals": {},
  "rules": {
    "semi": "error"
  },
  "parserOptions": {
    "ecmaVersion": 2018
  }
}