Tauri+Next.js+TypeScript+ESLint+Prettierプロジェクト作成メモ

winget install --id Rustlang.Rustup

winget install Volta.Volta
volta install node@16

volta pin node@16

npm create tauri-app
✔ Project name · tauri-project
✔ Choose your package manager · npm
✔ Choose your UI template · next-ts

cd tauri-project
npm install

volta pin node@16

  "volta": {
    "node": "16.17.1"
  }

npm run tauri dev

npm init @eslint/config
√ How would you like to use ESLint? · style
√ What type of modules does your project use? · esm
√ Which framework does your project use? · react
√ Does your project use TypeScript? · No / Yes
√ Where does your code run? · browser
√ How would you like to define a style for your project? · guide
√ Which style guide do you want to follow? · airbnb
√ What format do you want your config file to be in? · JSON
√ Would you like to install them now? · No / Yes
√ Which package manager do you want to use? · npm

npm install eslint-config-airbnb-typescript @typescript-eslint/eslint-plugin@^5.13.0 @typescript-eslint/parser@^5.0.0 --save-dev

npm install --save-dev eslint-config-next eslint-plugin-import eslint-plugin-unused-imports

npm install --save-dev prettier eslint-config-prettier

{
  "trailingComma": "all",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "jsxSingleQuote": true,
  "printWidth": 100
}

npm install --save-dev eslint-plugin-jest

// eslint-disable-next-line import/no-import-module-exports
import nextJest from 'next/jest';

const createJestConfig = nextJest({
  // next.config.jsとテスト環境用の.envファイルが配置されたディレクトリをセット。基本は"./"で良い。
  dir: './',
});

// Jestのカスタム設定を設置する場所。従来のプロパティはここで定義。
const customJestConfig = {
  // jest.setup.tsを作成する場合のみ定義。
  // setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
  moduleNameMapper: {
    // aliasを定義 （tsconfig.jsonのcompilerOptions>pathsの定義に合わせる）
    '^@/components/(.*)$': '<rootDir>/components/$1',
    '^@/pages/(.*)$': '<rootDir>/pages/$1',
  },
  moduleDirectories: ['node_modules', '<rootDir>/'],
  testEnvironment: 'jest-environment-jsdom',
};

// createJestConfigを定義することによって、本ファイルで定義された設定がNext.jsの設定に反映される
module.exports = createJestConfig(customJestConfig);

{
    "env": {
      "browser": true,
      "es2021": true,
      "jest/globals": true
    },
    "extends": [
      "next/core-web-vitals",
      "airbnb",
      "airbnb-typescript",
      "airbnb/hooks",
      "plugin:@typescript-eslint/recommended",
      "plugin:@typescript-eslint/recommended-requiring-type-checking",
      "plugin:jest/recommended",
      "plugin:jest/style",
      "prettier"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
      "ecmaFeatures": {
        "jsx": true
      },
      "ecmaVersion": 13,
      "sourceType": "module",
      "tsconfigRootDir": ".",
      "project": "./tsconfig.eslint.json"
    },
    "plugins": ["react", "@typescript-eslint", "import", "unused-imports", "jest"],
    "rules": {
      "no-use-before-define": "off",
      "import/order": "error",
      "unused-imports/no-unused-imports": "error",
      "@typescript-eslint/no-use-before-define": "off",
      "@typescript-eslint/restrict-template-expressions": "off",
      "import/prefer-default-export": "off",
      "import/extensions": [
        "error",
        "always",
        {
          "js": "never",
          "jsx": "never",
          "ts": "never",
          "tsx": "never"
        }
      ],
      "react/jsx-filename-extension": [
        "error",
        {
          "extensions": [".jsx", ".tsx"]
        }
      ],
      "react/react-in-jsx-scope": "off",
      "no-void": [
        "error",
        {
          "allowAsStatement": true
        }
      ],
      "react/function-component-definition": [2, { "namedComponents": "arrow-function" }],
      "jest/consistent-test-it": ["error", {"fn": "it"}],
      "jest/require-top-level-describe": ["error"],
      // 厳しすぎるルールは無効化
      "arrow-body-style": ["error", "as-needed"],
      "react/require-default-props": "off",
      "react/jsx-props-no-spreading": "off"
    }
}

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.maxTokenizationLineLength": 2500,
  "[javascript]": {
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.addMissingImports": true,
      "source.fixAll": true
    }
  },
  "[javascriptreact]": {
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.addMissingImports": true,
      "source.fixAll": true
    }
  },
  "[typescript]": {
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.addMissingImports": true,
      "source.fixAll": true
    }
  },
  "[typescriptreact]": {
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.addMissingImports": true,
      "source.fixAll": true
    }
  },
  "[json]": {
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.fixAll": true
    }
  },
  "[yaml]": {
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.fixAll": true
    }
  }
}

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "incremental": true,
    "esModuleInterop": true,
    "module": "esnext",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": ["next-env.d.ts", "src/**/*.ts", "src/**/*.tsx"],
  "exclude": ["node_modules"],
  "paths": {
    // 型定義の配置場所指定
    "*": ["src/types/*"]
  }
}

{
  "extends": "./tsconfig.json",
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
}