Engineering

Our engineering is underpinned by principles that celebrate both the integrity of code and the ambition to innovate. This manifesto champions excellence, advocates for the adoption of cutting-edge technologies, and fosters an environment of continuous intellectual growth.

TypeScript ESLint

typescript-eslint is a tool for using ESLint and Typescript together without needing to worry about implementation detail differences wherever possible.

Migrating from TSLint? We recommend removing existing lint packages & configurations, starting fresh before proceeding with the steps below.

Installing TypeScipt ESLint

yarn add --dev \ eslint \ @types/react \ @typescript-eslint/eslint-plugin \ @typescript-eslint/parser \ eslint-config-react \ eslint-plugin-react \ eslint-config-prettier \ eslint-plugin-prettier \ prettier

Add config

//.eslintrc { "extends": [ "eslint:recommended", "plugin:react/recommended", "plugin:@typescript-eslint/recommended", "prettier/@typescript-eslint", "plugin:prettier/recommended" ], "plugins": ["react", "@typescript-eslint", "prettier"], "env": { "browser": true, "node": true, "jest": true }, "rules": { "prettier/prettier": ["error", { "semi": false, "singleQuote": true }] }, "settings": { "react": { "pragma": "React", "version": "detect" } }, "parser": "@typescript-eslint/parser" }

//.tsconfig.json { "compilerOptions": { "jsx": "react", "allowSyntheticDefaultImports": true }, "exclude": ["node_modules"] }

Add scripts

// package.json { "scripts": { "prettier": "prettier-eslint --list-different 'src/**/*.js'", "prettier:fix": "prettier-eslint --write 'src/**/*.js'", "lint": "eslint './src/**/*.{ts,tsx}'" "lint:fix": "eslint './src/**/*.{ts,tsx}' --fix" } }

Gotchas to take note of

• Don't forget to rename file extensions MyButton.tsx

VS Code

To integrate with VS Code install the ESLint extension and update User Settings

"javascript.validate.enable": false, "editor.formatOnSave": true, "[javascript]": { "editor.formatOnSave": false }, "[javascriptreact]": { "editor.formatOnSave": false }, "[typescript]": { "editor.formatOnSave": false }, "[typescriptreact]": { "editor.formatOnSave": false }, "eslint.autoFixOnSave": true, "eslint.validate": [ "javascript", "javascriptreact", { "language": "typescript", "autoFix": true }, { "language": "typescriptreact", "autoFix": true } ],

References

• Roadmap: TSLint -> ESLint (github.com) https://github.com/palantir/tslint/issues/4534 • TypeScript ESLint (github.com) https://github.com/typescript-eslint/typescript-eslint#how-do-i-configure-my-project-to-use-typescript-eslint

Next: Design Playbook
Designing for Scalability: Engineering Challenges and Strategies
Design & Engineering

Designing for Scalability: Engineering Challenges and Strategies

From building minimum-viable-products to managing existing products, we created product teams and managed them within Mashup Garage. We work with companies of different stages and together we built products and launched them.

Innovation at the Intersection: How Diverse Cultures are Shaping Tech
News & Culture

Innovation at the Intersection: How Diverse Cultures are Shaping Tech

From building minimum-viable-products to managing existing products, we created product teams and managed them within Mashup Garage. We work with companies of different stages and together we built products and launched them.

Agile Evolution: Adapting Strategy for Fast-Paced Tech Development
process & strategy

Agile Evolution: Adapting Strategy for Fast-Paced Tech Development

From building minimum-viable-products to managing existing products, we created product teams and managed them within Mashup Garage. We work with companies of different stages and together we built products and launched them.

Connect.

Mashup Garage, a premier software development team, specialises in crafting exceptional products for startups and enterprises. With expertise in React, Elixir/Phoenix, and Ruby on Rails, we deliver solutions that meet your unique needs. Our mission is to bring value backed by decades of technical expertise and global co-founding experience.

What do you need help with?

Build a project

Build a team

Consult

Speak to someone

Expect a guaranteed response from us in 1-2 business days.

United Kingdom

London

Islington, London

+44 738 777 3405

LDN

Philippines

Manila

3F Topy IV Building, 3 Economia Road, Bagumbayan, Quezon City, 1110

+63 917 3084089

MNL