写経・整理 | りあクト！ TypeScriptで始めるつらくないReact開発 第3.1版【Ⅱ. React基礎編】

$ npm install yarn

$ yarn eslint --init

? How would you like to use ESLint? …
    ✓ To check syntax, find problems, and enforce code style
? What type of modules does your project use? …
    ✓  JavaScript modules (import/export)
? Which framework does your project use? …
    ✓ React
? Does your project use TypeScript?
    ✓ Yes
? Where does your code run?
    ✓ Browser
? How would you like to define a style for your project?
    ✓ Use a popular style guilde
? Which style guide do you want to follow?
    ✓ Airbnb: https://github.com/airbnb/javascript
? What format do you want your config file to be in?
    ✓ JavaScript
? Would you like to install them now with npm?
    ✓ No

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "plugin:react/recommended",
        "airbnb"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "@typescript-eslint"
    ],
    "rules": {
    }
};

$ yarn add -D eslint-plugin-react @typescript-eslint/eslint-plugin \
eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y \
eslint-plugin-react-hooks @typescript-eslint/parser

$ typesync

$ yarn typesync

module.exports = {
    env: {
      browser: true,
      es2021: true,
    },
    extends: [
      'plugin:react/recommended',
      'airbnb',
      'airbnb/hooks',
      'plugin:import/errors',
      'plugin:import/warnings',
      'plugin:import/typescript',
      'plugin:@typescript-eslint/recommended',
      'plugin:@typescript-eslint/recommended-requiring-type-checking',
    ],
    parser: '@typescript-eslint/parser',
    parserOptions: {
      ecmaFeatures: {
        jsx: true,
      },
      ecmaVersion: 12,
      project: './tsconfig.eslint.json',
      sourceType: 'module',
      tsconfigRootDir: __dirname,
    },
    plugins: [
      '@typescript-eslint',
      'import',
      'jsx-a11y',
      'react',
      'react-hooks',
    ],
    root: true,
    rules: {
      // occur error in `import React from 'react'` with react-scripts 4.0.1
      'no-use-before-define': 'off',
      '@typescript-eslint/no-use-before-define': [
        'error',
      ],
      'lines-between-class-members': [
        'error',
        'always',
        {
          exceptAfterSingleLine: true,
        },
      ],
      'no-void': [
        'error',
        {
          allowAsStatement: true,
        },
      ],
      'padding-line-between-statements': [
        'error',
        {
          blankLine: 'always',
          prev: '*',
          next: 'return',
        },
      ],
      '@typescript-eslint/no-unused-vars': [
        'error',
        {
          'vars': 'all',
          'args': 'after-used',
          'argsIgnorePattern': '_',
          'ignoreRestSiblings': false,
          'varsIgnorePattern': '_',
        },
      ],
      'import/extensions': [
        'error',
        'ignorePackages',
        {
          js: 'never',
          jsx: 'never',
          ts: 'never',
          tsx: 'never',
        },
      ],
      'react/jsx-filename-extension': [
        'error',
        {
          extensions: ['.jsx', '.tsx'],
        },
      ],
      'react/jsx-props-no-spreading': [
        'error',
        {
          html: 'enforce',
          custom: 'enforce',
          explicitSpread: 'ignore',
        },
      ],
      'react/react-in-jsx-scope': 'off',
    },
    overrides: [
      {
        'files': ['*.tsx'],
        'rules': {
          'react/prop-types': 'off',
        },
      },
    ],
    settings: {
      'import/resolver': {
        node: {
          paths: ['src'],
        },
      },
    },
  };

build/
public/
**/coverage/
**/node_modules/
**/*.min.js
*.config.js
.*lintrc.js

$ yarn add -D prettier eslint-config-prettier
$ yarn typesync
$ yarn

singleQuote: true
trailingComma: "all"

  3:25  warning  Missing return type on function                                                                  @typescript-eslint/explicit-module-boundary-types
  5:5   error    Promises must be handled appropriately or explicitly marked as ignored with the `void` operator  @typescript-eslint/no-floating-promises

import { ReportHandler } from 'web-vitals';

const reportWebVitals = (onPerfEntry?: ReportHandler) => {
  if (onPerfEntry && onPerfEntry instanceof Function) {
    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
      getCLS(onPerfEntry);
      getFID(onPerfEntry);
      getFCP(onPerfEntry);
      getLCP(onPerfEntry);
      getTTFB(onPerfEntry);
    });
  }
};

export default reportWebVitals;

import { ReportHandler } from 'web-vitals';

const reportWebVitals: ReportHandler | undefined = (
  onPerfEntry?: ReportHandler,
) => {
  if (onPerfEntry && onPerfEntry instanceof Function) {
    void import('web-vitals').then(
      ({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
        getCLS(onPerfEntry);
        getFID(onPerfEntry);
        getFCP(onPerfEntry);
        getLCP(onPerfEntry);
        getTTFB(onPerfEntry);
      },
    );
  }
};

export default reportWebVitals;