ESLintとPrettierの設定

目次

1. 必要なライブラリのインストール
2. ESLintの設定（ファイル作成・記述）
3. Prettierの設定（ファイル作成・記述）
4. VSCode側の設定

1. 必要なライブラリのインストール

$ yarn add -D eslint prettier eslint-config-prettier

2. ESLintの設定

ESLintの設定の記述場所は、以下の3つがある。

• .eslintrc（yaml, json形式）
• package.json（eslintConfigに記述）
• eslintrc.js(オブジェクト形式)

.eslintrcの場合

.eslintrc

{
  "root": true,
  "extends": [
    "eslint:recommended"
  ],
  "env": {
    "es6": true,
    "node": true
  }
}

package.jsonの場合

package.json

{
  ...
  "eslintConfig": {
    "root": true,
    "extends": [
      "eslint:recommended"
    ],
    "env": {
      "es6": true,
      "node": true
    }
  }
}

実行

$ eslint --fix ./app/**/*.ts

3. prettierの設定

prettierの設定の記述場所は、以下の3つがある。

• .prettierrc（yaml, json形式）
• package.json（prettierに記述）
• prettier.js(オブジェクト形式)

.prettierrcの場合

.prettierrc

{
  "tabWidth": 2,
  "printWidth": 300,
  "semi": false,
  "singleQuote": true,
  "bracketSpacing": true,
  "trailingComma": "es5",
  "arrowParens": "always",
  "parser": "typescript"
}

package.jsonの場合

package.json

{
  ...
  "prettier": {
    "tabWidth": 2,
    "printWidth": 300,
    "semi": false,
    "singleQuote": true,
    "bracketSpacing": true,
    "trailingComma": "es5",
    "arrowParens": "always",
    "parser": "typescript"
  }
}

実行

$ prettier --write ./app/**/*.ts

4. VSCodeの設定

VSCodeを使用している場合、VSCode内でプラグインをインストールすることで、上記のコマンドを実行しなくてもアラートを出してくれたり、自動保管してくれるようになる。

プロジェクト
└── .vscode
    └── setting.json

setting.json

{
  "editor.insertSpaces": true,
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.tabSize": 2,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact"
  ]
}