【VSCode】ReactとTypeScript、ESLint、Prettier、Airbnbで環境構築する手順

npx create-react-app ./ --template typescript

npx create-react-app react-typescript-starter --template typescript

npm init @eslint/config

? How would you like to use Eslint? …
  To check syntax  only
  To check syntax and find problems
> To check syntax, find problems, and enforce code style

? What type of modules does your project use? …
> JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

? Which framework does your project use? …
> React
  Vue.js
  None of these

? Does your project use TypeScript > No/ Yes

? Where does your code run? …
> Browser
  Node

? How would you like to define a style for your project? …
> Use a popular style guide
  Answer questions about your style
  Inspect your JavaScript file(s)

? Which style guide do you want to follow? … 
❯ Airbnb: https://github.com/airbnb/javascript
  Standard: https://github.com/standard/standard
  Google: https://github.com/google/eslint-config-google
  XO: https://github.com/xojs/eslint-config-xo

? What format do you want your config file to be in? … 
❯ JavaScript
  YAML
  JSON

? Would you like to install them now with npm? › No / Yes

npm i --save-dev eslint-config-airbnb-typescript

npm i --save-dev eslint-plugin-unused-imports

npm i --save-dev prettier eslint-config-prettier

module.exports = {
  printWidth: 120, //1行の文字列を120文字にする
  singleQuote: true, //ダブルに代わりシングルクオーテーションを使う
  semi: true, //行末にセミコロンを追加
  trailingComma: 'es5', //複数行の場合は可能な限り末尾のカンマを表示
  tabWidth: 2, //タグのスペース２ デフォルトは2
  useTabs: false, //スペースをタブに代える デフォルトはfalse
}

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    //'plugin:react/recommended', airbnbにほど設定されているので削除可能
    'airbnb',
    'airbnb-typescript', //追加
    'airbnb/hooks', //追加
    'plugin:@typescript-eslint/recommended', //型を必要としないプラグインの推奨ルールをすべて有効
    'plugin:@typescript-eslint/recommended-requiring-type-checking', //型を必要とするプラグインの推奨ルールをすべて有効
    'prettier', //追加 ESLintの情報に沿ってフォーマット
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12, //latestから12に変更
    sourceType: 'module',
    tsconfigRootDir: __dirname, //追加 tsconfig.jsonがある相対パスを指定
    project: ['./tsconfig.json'], //追加  tsconfig.jsonを指定
  },
  plugins: [
    'react',
    '@typescript-eslint',
    'unused-imports' //追加 使っていないimportを自動で削除用
  ],
  ignorePatterns: ['build'], //追加 .eslintignoreに対象外にしているが無いとコンパイルに時間がかかる
  /*-- ↓以下追加 --*/
  rules: {
    'no-use-before-define': 'off', //関数や変数が定義される前に使われているとエラーになるデフォルトの機能をoff
    '@typescript-eslint/no-use-before-define': ["error"], //typescript側のno-use-before-defineを使うようにする
    'import/prefer-default-export': 'off', //named exportがエラーになるので使えるようにoff
    '@typescript-eslint/no-unused-vars': 'off', //unused-importsを使うため削除
    'unused-imports/no-unused-imports': 'error', //不要なimportの削除
    'unused-imports/no-unused-vars': [ //unused-importsでno-unused-varsのルールを再定義
      'warn',
      { vars: 'all', varsIgnorePattern: '^_', args: 'after-used', argsIgnorePattern: '^_' },
    ],
    'react/function-component-definition': [//アロー関数以外受け付けない設定
      2,
      {
        namedComponents: 'arrow-function',
        unnamedComponents: 'arrow-function',
      },
    ],
    'no-param-reassign': [2, { props: false }], //パラメーターのプロパティ変更を許可
    'import/extensions': [ //importのときに以下の拡張子を記述しなくてもエラーにしない
      'error',
      {
        js: 'never',
        jsx: 'never',
        ts: 'never',
        tsx: 'never',
      },
    ],
    'react/jsx-filename-extension': [ //jsx形式のファイル拡張子をjsxもしくはtsxに限定
      'error',
      {
        extensions: ['.jsx', '.tsx'],
      },
    ],
    'react/react-in-jsx-scope': 'off', //import React from 'react'が無くてもエラーを無くす
    'react/prop-types': 'off', //TypeScriptでチェックしているから不要。offにする
    'no-void': [ //void演算子の許可
      'error',
      {
        allowAsStatement: true, 
      },
    ],
  },
  settings: {
    'import/resolver': { //importするファイルをjsだけではなく、tsを含むファイルを許可する
      node: {
        paths: ['src'],
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
      },
    },
  },
  /*-- ↑追加ここまで --*/
};

extends: [
    //'plugin:react/recommended', airbnbにほとんど設定されているので削除
    'airbnb',
    'airbnb/hooks', //追加
    'plugin:@typescript-eslint/recommended', //型を必要としないプラグインの推奨ルールをすべて有効
    'plugin:@typescript-eslint/recommended-requiring-type-checking', //型を必要とするプラグインの推奨ルールをすべて有効
    'prettier', //追加 ESLintの情報に沿ってフォーマット
  ],

parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12, //latestから12に変更
    sourceType: 'module',
    tsconfigRootDir: __dirname, //追加 tsconfig.jsonがある相対パスを指定
    project: ['./tsconfig.json'], //追加  tsconfig.jsonを指定
  },

plugins: [
    'react',
    '@typescript-eslint',
    'unused-imports' //追加 使っていないimportを自動で削除用
  ],

ignorePatterns: ['build'], //追加 .eslintignoreに対象外にしているが無いとコンパイルに時間がかかる

'no-use-before-define': 'off', //関数や変数が定義される前に使われているとエラーになるデフォルトの機能をoff
'@typescript-eslint/no-use-before-define': ['error'], //typescript側のno-use-before-defineを使うようにする

'import/prefer-default-export': 'off', //named exportがエラーになるので使えるようにoff

'@typescript-eslint/no-unused-vars': 'off', //unused-importsを使うため削除
'unused-imports/no-unused-imports': 'error', //不要なimportの削除
'unused-imports/no-unused-vars': [ //unused-importsでno-unused-varsのルールを再定義
   'warn',
   { vars: 'all', varsIgnorePattern: '^_', args: 'after-used', argsIgnorePattern: '^_' },
 ],

'react/function-component-definition': [//アロー関数以外受け付けない設定
      2,
      {
        namedComponents: 'arrow-function',
        unnamedComponents: 'arrow-function',
      },
    ],

'no-param-reassign': [2, { props: false }], //パラメーターのプロパティ変更を許可

'import/extensions': [
      //importのときにファイルの拡張子を記述しなくてもエラーにしない
      'error',
      {
        js: 'never',
        jsx: 'never',
        ts: 'never',
        tsx: 'never',
      },
    ],

'react/jsx-filename-extension': [ //jsx形式のファイル拡張子をjsxもしくはtsxに限定
      'error',
      {
        extensions: ['.jsx', '.tsx'],
      },
    ],

'react/react-in-jsx-scope': 'off', //import React from 'react'が無くてもエラーを無くす

'react/prop-types': 'off', //TypeScriptでチェックしているから不要。offにする

'no-void': [
      'error',
      {
        allowAsStatement: true, //void演算子の許可
      },
    ],

settings: {
    'import/resolver': {
      //importするファイルをjsだけではなく、tsを含むファイルを許可する
      node: {
        paths: ['src'],
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
      },
    },
  },

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

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint": "eslint --ext 'src/**/*.{js,jsx,ts,tsx}'", //エラーチェック
    "format": "eslint --cache --fix 'src/**/*.{js,jsx,ts,tsx}' && prettier --write 'src/**/*.{js,jsx,ts,tsx}'" //ESLintとPrettierによるフォーマット
  },

npm run lint

npm run format

import { ReportHandler } from 'web-vitals';

const reportWebVitals = (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;

{
  "editor.defaultFormatter": "esbenp.prettier-vscode", //デフォルトのフォーマットはprettierを指定
  "editor.formatOnSave": true, //保存したときにフォーマットする
  "editor.codeActionsOnSave": { //ESLintに対応しているファイルはESLintでフォーマット
    "source.fixAll.eslint": true
  },
}

import { AddBlock } from '../../../components/blocks/AddBlock';
import { InputBlock } from '../../../components/blocks/InputBlock';

import { AddBlock } from '@/components/blocks/AddBlock';
import { InputBlock } from '@/components/blocks/InputBlock';