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.

Eslint setup

Eslint is a tool that checks your JavaScript code for errors and code formatting issues. We encourage all projects to adopt the eslint:recommended configuration, along with the eslint-config-prettier to delegate checking of stylistic rules to Prettier.

Note: please avoid Eslint for projects that use TypeScript. For those, please use Typescript-Eslint instead.

Installing Eslint

Install eslint and some other plugins:

yarn add --dev \ eslint \ eslint-plugin-react \ eslint-config-prettier \ babel-eslint

Add config Edit .eslintrc.js. Here's a configuration that would work for React projects.

module.exports = { env: { es6: true, node: true, browser: true }, extends: [ 'eslint:recommended', 'plugin:react/recommended', 'eslint-config-prettier' ], settings: { // Ensure you're defining the correct React version here react: { version: '16.5.0' } }, parserOptions: { // Enable JSX support ecmaFeatures: { jsx: true }, ecmaVersion: 2018, sourceType: 'module' }, plugins: ['react'], parser: 'babel-eslint', rules: { // Add any additional rules here 'react/prop-types': 0 } }

Add scripts Add the lint to package.json. Be sure to change paths, depending on where your CSS and JS are. Be sure to place the paths in quotes.

{ "scripts": { "lint": "eslint 'lib/**/*.{js,jsx}'" } }

Gotchas to take note of

• Be sure to quote your paths in package.json! Globs may not work properly otherwise, and you may be missing linting on some files without it. • Make sure react/prop-types is disabled in the eslintrc configuration. We discourage the use of prop types; instead, please consider adding TypeScript for robust compile-time type checking.

Deprecated practices

Unnecessary packages These packages were previously recommended, and are no longer necessary. Please remove them and migrate to our newer setup instead, which uses the default eslint:recommended, which is built into Eslint itself. • eslint-config-standard (and related configurations) • eslint-config-standard-react (and related configurations) • eslint-plugin-flowtype • eslint-plugin-import • • eslint-plugin-node • eslint-plugin-promise • standard • semistandard Config filenames We used to recommend ".eslintrc or .eslintrc.json". Use .eslintrc.js instead, which is a more flexible format.

References

Turn off Eslint's formatting rules (prettier.io) https://prettier.io/docs/en/integrating-with-linters.html#turn-off-eslint-s-formatting-rules

Next: Design Playbook

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