背景
- この記事を読んでprettierを入れてみたくなった
前提
- React開発向けの内容
手順メモ
- 必要なモジュールをインストール
npmの人
npm i --save-dev eslint babel-eslint eslint-config-airbnb eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-import prettier-eslint prettier-eslint-cli eslint-plugin-jest
yarnの人
yarn add -D eslint babel-eslint eslint-config-airbnb eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-import prettier-eslint prettier-eslint-cli eslint-plugin-jest
- VSCodeでPrettierの拡張機能を追加

- ファイル保存時にフォーマッターがかかるように設定追加

- 以下のようにするとeslintの設定と平仄がとれるようになる
{
"editor.formatOnSave": true,
"javascript.format.enable": false,
"prettier.eslintIntegration": true
}
- eslintの設定ファイルは最小限だとこれくらい?
.eslintrc
{
"extends": "airbnb",
"parser": "babel-eslint"
}
- これで保存時にフォーマッタがかかるようになる