create reat app 環境構築メモ

3836 ワード
IntelliJ create-react-app React ESLint IntelliJ テキストリンク

前の記事で書いたようにReduxはちょっとめんどうです。
業務ではRedux使っているものの、プライベートではReactのみでサイト作ろうと思います。

簡単でした。
Reactのひな形を簡単に作れるcreate-react-appを利用します。

導入

create-react-appコマンドをインストール、アプリ作成

npm install -g create-react-app
create-react-app hello-world

サーバーを開始する

作ったアプリのディレクトリ（今回はhello-world）に行き以下のコマンドを実行
サーバーが起動し、http://localhost:3000 などのURLでアプリを見ることができます。

npm start

eslint設定

eslintとprettierのモジュールをインストール


yarn add -D eslint prettier eslint-plugin-prettier eslint-config-prettier
yarn add -D eslint-plugin-react eslint-config-react-app eslint-plugin-import eslint-plugin-flowtype eslint-plugin-jsx-a11y
yarn add -D eslint-plugin-standard eslint-config-standard eslint-plugin-node eslint-plugin-promise

eslint設定ファイル追加

cat<<EOF > .eslintrc.json
{
  "extends": [
    "standard",
    "plugin:prettier/recommended"
  ],
  "plugins": [
    "react",
    "prettier"
  ],
  "parser": "babel-eslint",
  "parserOptions": {},
  "env": {
    "browser": true,
    "es6": true
  },
  "globals": {
    "it": false
  },
  "rules": {
    "prettier/prettier": "error",
    "react/jsx-uses-react": 1,
    "react/jsx-uses-vars": 1,
    "no-console": "warn",
    // warning  Definition for rule 'jsx-a11y/href-no-hash' was not found に対応
    "jsx-a11y/href-no-hash": "off",
    "jsx-a11y/anchor-is-valid": "off"
  }
}
EOF



cat<<EOF > .eslintignore
node_modules
**/*.min.js
src/registerServiceWorker.js
EOF

cat<<EOF > .prettierrc
{
  "singleQuote": false,
  "trailingComma": "es5",
  "semi": false
}
EOF

参考

Intellijの設定

プログラム：　eslint のPATH　（プロジェクトのディレクトリ/node_modules/.bin/eslint )
引数：　--fix $FileDir$

拡張オプション
Auto-save edited files to trigger the watcherのチェックを外します ※付けると、編集するたびにコードフォーマットされてうざいです。