Peraturan dan Ketentuan

Untuk menegakkan gaya kode yang konsisten dan menghindari masalah umum dalam basis kode, kami memiliki serangkaian aturan dan ketentuan yang kami ikuti dan terapkan di seluruh proyek.

Typescript

Pengantar ini menggunakan TypeScript untuk menyediakan type-safety dan menghindari bug umum dalam basis kode. Konfigurasi proyek didasarkan pada T3 Stack dengan beberapa pembaruan.

Jika Anda belum familiar dengan TypeScript, Anda bisa memeriksa artikel ini untuk mempelajari lebih lanjut : Typescript for React Developers

Anda bisa menemukan informasi lebih lanjut di sini.

Penamaan

Kami mengikuti kabab-case untuk penamaan file dan folder karena kami pikir itu adalah cara paling mudah untuk dibaca dan konsisten untuk menamai file dan folder dalam proyek besar, serta merupakan cara paling umum untuk menamai file dan folder di komunitas React.

Contoh penamaan kabab-case: my-component.tsx

Untuk penamaan variabel, function, class, interface, dan enum, kami menggunakan camelCase karena itu adalah cara yang paling umum untuk menamai variabel di komunitas React.

Contoh penamaan camelCase: const myFunction = () => {}

Linting

Menggunakan linter adalah keharusan dalam proyek JavaScript mana pun. Untuk memulainya, kami menggunakan ESLint dengan konfigurasi T3 Stack dan beberapa aturan khusus untuk memastikan bahwa kami mengikuti aturan dan ketentuan terkait penamaan file, class pada Tailwind CSS, type pada TypeScript, urutan impor, dan lainnya.

Berikut adalah file konfigurasi ESLint lengkap:

eslintrc.cjs

/** @type {import("eslint").Linter.Config} */
const config = {
  parser: "@typescript-eslint/parser",
  parserOptions: {
    project: true,
  },
  plugins: ["@typescript-eslint", "unused-imports", "simple-import-sort"],
  extends: [
    "next/core-web-vitals",
    "plugin:@typescript-eslint/recommended-type-checked",
    "plugin:@typescript-eslint/stylistic-type-checked",
    "prettier",
  ],
  rules: {
    // These opinionated rules are enabled in stylistic-type-checked above.
    // Feel free to reconfigure them to your own preference.
    "import/prefer-default-export": "off",
    "@typescript-eslint/array-type": "off",
    "@typescript-eslint/consistent-type-definitions": "off",

    "simple-import-sort/imports": [
      "error",
      {
        groups: [
          // `react` first, `next` second, then packages starting with a character
          ["^react$", "^next", "^[a-z]"],
          // Packages starting with `@`
          ["^@"],
          // Packages starting with `~`
          ["^~"],
          // Imports starting with `../`
          ["^\\.\\.(?!/?$)", "^\\.\\./?$"],
          // Imports starting with `./`
          ["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"],
          // Style imports
          ["^.+\\.s?css$"],
          // Side effect imports
          ["^\\u0000"],
        ],
      },
    ],
    "simple-import-sort/exports": "error", // Export configuration for `eslint-plugin-simple-import-sort`

    "unused-imports/no-unused-imports": "error",
    "unused-imports/no-unused-vars": [
      "error",
      {
        argsIgnorePattern: "^_",
        varsIgnorePattern: "^_",
        caughtErrorsIgnorePattern: "^_",
      },
    ],

    "@typescript-eslint/consistent-type-imports": [
      "warn",
      {
        prefer: "type-imports",
        fixStyle: "inline-type-imports",
      },
    ],

    "@typescript-eslint/no-unused-vars": ["warn", { argsIgnorePattern: "^_" }],
    "@typescript-eslint/require-await": "off",
    "@typescript-eslint/no-misused-promises": [
      "error",
      {
        checksVoidReturn: { attributes: false },
      },
    ],
  },
};

module.exports = config;