● eslint

npm i -D eslint
npm i -D eslint-plugin-react-hooks
npm i -D eslint-plugin-unused-imports

npx eslint --init

簡単な英語で質問されるので答えます。

インストール完了後に一度 eslint を実行してみます

./node_modules/.bin/eslint src --ext js,jsx,ts,tsx

.eslintrc.cjs を少し修正します。

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "overrides": [
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "@typescript-eslint",
        "unused-imports" // 追加
    ],
    "rules": {
        // 追加 ↓
        'react/react-in-jsx-scope': 'off',

        // 追加 ↓
        "@typescript-eslint/no-unused-vars": "off", // or "no-unused-vars": "off",
        "unused-imports/no-unused-imports": "error",
        "unused-imports/no-unused-vars": [
            "warn",
            { "vars": "all", "varsIgnorePattern": "^_", "args": "after-used", "argsIgnorePattern": "^_" }
        ],

        "indent": [
            "error",
            2
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "double"
        ],
        "semi": [
            "error",
            "always"
        ]
    },
    // 追加 ↓
    settings: {
        react: {
            version: 'detect',
        },
    },
};

再度 eslint を実行してみます

./node_modules/.bin/eslint src --ext js,jsx,ts,tsx

package.json を編集して、以下のコマンドからも実行できるようにします

  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "lint": "eslint src --ext .js,.jsx,.ts,.tsx src/",
    "lint:fix": "npm run lint -- --fix"
  },

npm run lint

● eslintのプラグイン

React+TSプロジェクトで便利だったLint/Format設定紹介

● prettier

npm i -D prettier eslint-config-prettier
npm i -D prettier-plugin-organize-imports

vi .prettierrc.json

{
  "trailingComma": "all",
  "tabWidth": 2,
  "printWidth": 80,
  "singleQuote": false,
  "jsxSingleQuote": false,
  "arrowParens": "always",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "semi": true,
  "endOfLine": "lf",
  "plugins": ["prettier-plugin-organize-imports"]
}

vi .eslintrc.cjs

.eslintrc.cjs

extends に prettier を追加

{
  "extends": [
      "prettier"
  ]
}

引用 : https://bit.ly/3SEqw20