Help us understand the problem. What is going on with this article?

緩く始める ESLint による静的解析と prettier によるコードフォーマット in React

More than 1 year has passed since last update.

目的はとりあえず最低限の静的解析とそれに準じたフォーマットを施す環境を作ること。
対象ユースケースは React を用いたフロントエンド開発。
こだわる場合は時間の無駄になるので読まない方が良いです。

各々の概要は公式ドキュメントを参照されたし

$ cd ${your_project}
$ touch .eslintrc.json
$ npm install eslint eslint-plugin-react prettier-eslint-cli --dev

.eslintrc.json を次のように編集

eslintrc.json
{
  "env": {
    "browser": true,
    "commonjs": true,
    "es6": true
  },
  "extends": "eslint:recommended",
  "parserOptions": {
    "ecmaFeatures": {
      "experimentalObjectRestSpread": true,
      "jsx": true
    },
    "sourceType": "module"
  },
  "plugins": ["react"],
  "rules": {
    "indent": ["error", 2],
    "linebreak-style": ["error", "unix"],
    "quotes": ["error", "single"],
    "semi": ["error", "always"],
    "react/jsx-uses-react": "error",
    "react/jsx-uses-vars": "error"
  }
}

例えば /src に js ファイルを格納している場合

$ ./node_modules/.bin/prettier-eslint --write ./src/**/*.js

おまけ VSCode 設定

まずは VSCode 拡張である二つをインストールする

あとは以下を設定するだけで作業中のディレクトリに eslint の設定ファイル(例 .eslintrc.json)があればその設定を読み込んで静的解析とフォーマットをしてくれる。

settings.json
  "editor.formatOnSave": true,
  "prettier.eslintIntegration": true,

個人的には VSCode のJS標準フォーマッタがたまに壊れるのにフラストレーションが溜まっていたのが設定の動機。
ESLint の設定は今後チューニングしていくかもしれないが、とりあえずこれでほとんどの場合快適にいけるのではと思う。
快適。

参考記事

https://blog.nabeliwo.me/2017/07/prettier-eslint-vscode/

takewell
新卒一年目, Web で世直ししたいです。
https://takewell.dev
zozotech
70億人のファッションを技術の力で変えていく
https://tech.zozo.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away