react

VS CodeでESlint、Prettierを使用したReact環境を構築する

vscode-react-eslint-prettier

Reactの環境構築はcreate-react-appでとても簡単になりました。ここにコードチェック、整形ツールであるESlint、Prettier を導入してみます。
ESlint、Prettierを使用した環境構築方法やルールはプロジェクトによって違うと思うので、基本的な設定だけしています。プロジェクトに合わせて編集してください。

完成品はGitHubにアップしています。create-react-appで生成されるReactのアイコンなどは削除しています。

[blogcard url="https://github.com/nineharker/react-vscode-eslint-prettier"]

環境構築

それでは環境構築していきましょう！パッケージ管理にyarnを使っていきますが、npmを使用している人は便宜読み替えてください。

VS CodeにESlintとPrettierの拡張機能を追加する

VS Codeの拡張機能としてESlintをインストールしましょう。

ESlintをインストール

Prettierもインストールします。

Prettierもインストール

これで必要な拡張機能はインストールできました。

create-react-appでプロジェクトを作成する

Reactプロジェクトを作成しましょう。

create-react-app sample

必要なパッケージをインストールする

create-react-appで作成された雛形では、すでにESLintに関するパッケージが導入されています。

create-react-appで作成したプロジェクトの場合、eslintとbabel-eslint、eslint-loaderをインストールしたらエラーが発生するのでインストールしないください。

yarn add --dev prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-react

eslint、prettierの設定ファイルを生成する

プロジェクトルートに.eslintrc.jsと.prettierrc配置してルールを書いていきます。 基本的な設定だけを書いています。

module.exports = {

  "env": {

    "es6": true,

    "node": true

  },

  "parser": "babel-eslint",

  "plugins": [

    "react",

    "prettier"

  ],

  "parserOptions": {

    "version": 2018,

    "sourceType": "module",

    "ecmaFeatures": {

      "jsx": true

    }

  },

  "extends": [

    "eslint:recommended",

    "plugin:react/recommended",

    "plugin:prettier/recommended",

    "prettier/react"

  ],

  "rules": {

    "prettier/prettier": "error"

  }

}


{

  "printWidth": 120,

  "useTabs": false,

  "semi": true,

  "singleQuote": true,

  "trailingComma": "es5",

  "bracketSpacing": true,

  "jsxBracketSameLine": false

}

VS Codeの設定でセーブ時に整形するようにする

セーブ時に整形するようにVS Codeの設定を変更しましょう。VS Codeのデフォルトのフォーマット機能をオフにしています。

 {

   "javascript.format.enable": false,

   "eslint.autoFixOnSave": true

 }

おわり

お疲れ様でした！これで設定が完了です。App.jsなどのコンポーネントの拡張子はjsxに変更しましょう。

ESlint、Prettierの設定は大変ですが、その後の開発が圧倒的に楽になるのでぜひお試しください。

Sponsored Link

-react