ReactのプロジェクトにESLintとPrettierを導入してVSCodeで使ってみた

$ yarn run eslint --init

$ yarn add -D eslint-plugin-react eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react-hooks

env:
  browser: true
  es2021: true
extends:
  - 'plugin:react/recommended'
  - airbnb # Which style guide do you want to follow?で選択したよく使われている解析設定
parserOptions:
  ecmaFeatures:
    jsx: true
  ecmaVersion: 12
  sourceType: module
plugins:
  - react
rules: {}

import logo from './logo.svg';

$ yarn run eslint ./src/App.js
yarn run v1.22.17
$ /Users/tohi/RaiseTech/react/task/task5/hitolog/node_modules/.bin/eslint ./src/App.js

/Users/tohi/RaiseTech/react/task/task5/hitolog/src/App.js
   6:5   error  'React' must be in scope when using JSX        react/react-in-jsx-scope
   6:5   error  JSX not allowed in files with extension '.js'  react/jsx-filename-extension
   7:7   error  'React' must be in scope when using JSX        react/react-in-jsx-scope
   8:9   error  'React' must be in scope when using JSX        react/react-in-jsx-scope
   9:9   error  'React' must be in scope when using JSX        react/react-in-jsx-scope
  12:11  error  'React' must be in scope when using JSX        react/react-in-jsx-scope
  16:9   error  'React' must be in scope when using JSX        react/react-in-jsx-scope

✖ 7 problems (7 errors, 0 warnings)

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

$ yarn run eslint  ./src/App.js                                                                                                16s  火 11/ 9 20:43:25 2021
yarn run v1.22.17
$ /Users/tohi/RaiseTech/react/task/task5/hitolog/node_modules/.bin/eslint ./src/App.js

/Users/tohi/RaiseTech/react/task/task5/hitolog/src/App.js
  6:5  error  JSX not allowed in files with extension '.js'  react/jsx-filename-extension

✖ 1 problem (1 error, 0 warnings)

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

$ yarn add -D prettier

$ yarn add -D eslint-config-prettier

env:
  browser: true
  es2021: true
extends:
  - 'plugin:react/recommended'
  - airbnb
  - prettier # <=ここ
parserOptions:
  ecmaFeatures:
    jsx: true
  ecmaVersion: 12
  sourceType: module
plugins:
  - react
rules: {}

	{
		"printWidth": 80,               //80文字で1行を折り返す
		"tabWidth": 2,                  //タブのサイズを2につす
		"useTabs": false,               //インデントにスペースを使う
		"semi": true,                   //末尾のセミコロンを付ける
		"singleQuote": false,           //""ではなく''をつかう
		"quoteProps": "as-needed",　　　 //必要な場合(間に'-'が入っていたり)オブジェクトのプロパティー名をQuoteで囲む
		"jsxSingleQuote": false,        //jsxにおいて""ではなく''を使う
		"trailingComma": "none",        //可能な場合,をつける
		"bracketSpacing": true,         //{}の前後に空白を入れる=> {foo:bar} => { foo:bar }
		"jsxBracketSameLine": false,    //jsxでhtmlを記述する時、タグの終わり「>」を同じ行に記述する
		"arrowParens": "avoid",         //アロー関数の引数が1つの時カッコで囲まない
		"rangeStart": 0,                //ファイル内を範囲指定でフォーマットする。開始位置の指定
		"rangeEnd": Infinity,           //ファイル内を範囲指定でフォーマットする。終了位置の指定
		"parser": "none",               //パーサーを指定=>prettierは自動で判別するため設定不要
		"filepath": "none",             //使用するパーサーを推測するために使用するファイル名を指定
		"requirePragma": false,         //@formatのコメントが入っているコードのみフォーマットする
		"insertPragma": false,          //requirePragmaで必要なコードを挿入する
		"proseWrap": "preserve",        //マークダウンをそのまま折り返す
		"htmlWhitespaceSensitivity": "css", //htmlのフォーマットをいい感じにしてくれる
		"vueIndentScriptAndStyle": false, //vueファイルの<script>タグの中をインデントしない
		"endOfLine": "auto",            //既存の改行コードを使う
    "embeddedLanguageFormatting"  　//ファイルに埋め込まれた引用コードをPrettierが認識できればフォーマットする
	}

{
  "singleQuote": true,
  "trailingComma": "all"
}

import logo from './logo.svg';
import './App.css';

function App() {
  console.log("test") # <<<<===ここ
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit
          {' '}
          <code>src/App.js</code>
          {' '}
          and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

$ yarn run prettier ./src/App.js
yarn run v1.22.17
$ /Users/tohi/RaiseTech/react/task/task5/hitolog/node_modules/.bin/prettier ./src/App.js
import logo from './logo.svg';
import './App.css';

function App() {
  console.log('test');  #<<<<<<<======ここ！
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;
✨  Done in 1.08s.

$ ls                                                                                                                                 火 11/ 9 21:24:19 2021
README.md    node_modules package.json public       src          yarn.lock
$ mkdir .vscode
$ touch settings.json

{
  "eslint.format.enable": false,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}