【React】ESLint と Prettier を VS Code に導入し、設定する方法。構文解析とコード整形を自動化する！

yarn create react-app プロジェクト名

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

touch .eslintrc.js .prettierrc

{
  "trailingComma": "es5",
  "semi": false,
  "singleQuote": true,
  // お好みで Prettier の設定を追加
}

module.exports = {
  // 環境設定
  env: {
    es6: true,
    browser: true,
    node: true,
  },
  parser: 'babel-eslint',
  plugins: ['react'],
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  },
  extends: [
    // eslint-plugin-react 関連
    'eslint:recommended',
    'plugin:react/recommended',
    // Prettier 関連
    'plugin:prettier/recommended',
    'prettier/react',
  ],
  rules: {
    // お好みで構文解析のルールを追加
  },
}

 "extends": ["prettier"],
  rules: {
    'prettier/prettier': 'error',
  },

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}