0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

EslintとPrettierをReactプロジェクトで使用(備忘録)

Posted at

目的

[公式](https://prettier.io/docs/en/integrating-with-linters.html#notes)では基本的には非推奨となっているみたいなので、 "eslint-plugin-prettier"を使わずに、Reactで作成したプロジェクトをVSCodeで保存時に フォーマットの自動整形と構文チェックをする。

前提

  • node.jsとyarnはインストール済み

  • npx create-react-appでプロジェクト作成
    (この時、eslint 系パッケージはreact-scriptsに含まれている。yarn.lockで確認。)

  • Typescriptはここでは使用せず

  • VS Code extensionsにて eslintとprettierを導入済み
    (VSCode 拡張用の prettier は、node_modules に prettier がインストールされていれば、そちらを実行するようになっている。ここではCLIでコマンドで実行させずに、エディタ上で自動整理を実行させるために、インストールしておく。)
    https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
    https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

手順

1, `npx create-react-app sample` 2, `cd sample` 3, ` yarn add -D eslint prettier eslint-config-prettier ` 4, `yarn run eslint --init`  :eslintrc.jsonファイル作成 (質問に答えていきます) 5, 各ファイルを編集  (prettierrc.jsonは作らず、デフォルトのままになってます。)
eslintrc.json
{
  "env": {
    "browser": true,
    "es2021": true,
    "jest": true 
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:prettier/recommended",
    "prettier" //eslintのフォーマットの機能を上書きして機能の競合をなくす
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": ["react","prettier"],
  "rules": {
    "react/react-in-jsx-scope": "off",
    "prettier/prettier": "error"
  }
}

settings.json
{  *省略

 //liner
  "editor.codeActionsOnSave": { "source.fixAll.eslint": true },
  "eslint.alwaysShowStatus": true,
  "eslint.lintTask.enable": true,

  //formatter
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.formatOnPaste": true,
  "prettier.packageManager": "yarn",
  "javascript.format.enable": false,

  "files.autoSave": "onFocusChange",
}

参照

* https://medium.com/how-to-react/config-eslint-and-prettier-in-visual-studio-code-for-react-js-development-97bb2236b31a * https://ai-can-fly.hateblo.jp/entry/prettier-usage * https://knote.dev/post/2020-08-29/duprecated-eslint-plugin-prettier/
0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?