TypeScript guides
Engine basics tutorial
Coding style and best practices
15 min
structure your code effectively to make it easier to read, maintain, and collaborate on code formatting and linting use automated formatting and linting tools to keep your code clean and consistent prettier automatically formats your code eslint analyzes your code and enforces best practices ensure both tools are installed and enabled in your development environment naming conventions using clear and structured names helps you understand, navigate, and maintain your code follow these guidelines to name different elements correctly capitalization styles use these capitalization rules to keep your code consistent type convention example classes & definitions capitalcase capsulegeometry variables & functions camelcase createentity() enums & namespaces capital case entity type component and system naming follow a dot separated format when naming components and systems this keeps them organized and easy to identify each name should include namespace the name of your organization or module project the project to which the system belongs system name a meaningful identifier for the system 📌 example ir engine tutorial hellosystem for multi word names, avoid underscores and use camelcase within dot separated segments ir engine multiwordexample hellosystem component json identifiers ( jsonid ) the jsonid field follows a different convention because ir engine uses it for gltf extensions follow these rules use underscores ( ) instead of dots ( ) write the namespace in uppercase ( ir engine ) use lowercase with underscores for the project and component names 📌 example ir engine tutorial hello for multi word names ir engine multiword example hello avoid unnecessary abbreviations or underscores keep names clear and easy to read ✅ use full words unless it's a common acronym (e g , httprequest ) ✅ avoid shortening words unnecessarily ( playercontroller , not plrctrl ) ✅ use camelcase instead of underscores for variable names ( playerposition , not player position ) good naming makes your code easier to understand at a glance typescript typing always use explicit typescript types for functions, variables, and objects this prevents errors and makes your code easier to maintain use arrow functions arrow functions make your code more concise and readable they are the preferred way to define functions inside objects or systems arrow function (recommended) const hellosystem = ecs definesystem({ uuid 'ir engine tutorial hellosystem', execute () => { console log("hello world") }, insert { after physicssystem } }) regular function (less common in ir engine) function sayhello() { console log("hello world") } const hellosystem = ecs definesystem({ uuid 'ir engine tutorial hellosystem', execute sayhello, insert { after physicssystem } }) ℹ️ why use arrow functions? makes your code shorter and easier to read matches the style used across ir engine’s codebase works well for defining system logic use arrow functions whenever you define functions inside objects or systems apply best practices here’s an example of a properly structured system following all best practices import { ecs } from '@ir engine/packages/ecs' import { physicssystem } from '@ir engine/packages/spatial/src/physics/physicsmodule' import { namecomponent } from '@ir engine/packages/spatial/src/common/namecomponent' import { visiblecomponent } from '@ir engine/packages/spatial/src/renderer/components/visiblecomponent' import { transformcomponent } from '@ir engine/packages/spatial/src/transform/components/transformcomponent' import { primitivegeometrycomponent } from '@ir engine/packages/engine/src/scene/components/primitivegeometrycomponent' import { vector3 } from 'three' import { geometrytypeenum } from '@ir engine/packages/engine/src/scene/constants/geometrytypeenum' // define a structured component name export const hellocomponent = ecs definecomponent({ name 'ir engine tutorial hellocomponent', jsonid 'ir engine tutorial hello', oninit () => ({ initialized false }) }) // define the query to find entities with hellocomponent const helloquery = ecs definequery(\[hellocomponent]) // define the system using arrow functions export const hellosystem = ecs definesystem({ uuid 'ir engine tutorial hellosystem', execute () => { for (const entity of helloquery()) { let { initialized } = ecs getmutablecomponent(entity, hellocomponent) if (initialized value) continue initialized set(true) ecs setcomponent(entity, namecomponent, 'ir engine hello entity') ecs setcomponent(entity, visiblecomponent) ecs setcomponent(entity, transformcomponent, { position new vector3(0, 1, 0) }) ecs setcomponent(entity, primitivegeometrycomponent, { geometrytype geometrytypeenum spheregeometry }) } }, insert { after physicssystem } }) ➡️ next steps now that you’ve structured your code correctly, continue learning about defining components docid 9nzpd2p3fcymmjozyau 1