@curve-technology/webapp-scripts

@curve-technology/webapp-scripts

Shareable config scripts for web apps

Installation

Install @curve-technology/webapp-scripts and its peerDependencies

yarn add --dev @curve-technology/webapp-scripts jest eslint

Table of contents

• Babel
• ESLint
  • Base Typescript and React .eslintrc
• Jest
  • Using the default config
  • Overriding the default config
• Prettier
• Husky
• Commitlint
• TypeScript
• Lighthouse

Babel

To use this config, create an .babelrc file in the root of your package and add:

{
  "extends": "@curve-technology/webapp-scripts/babel/nextjs"
}

ESLint

There are four eslint configs available, pick the one most appropriate for your project:

• JS: for general purpose usage
  ./node_modules/@curve-technology/webapp-scripts/eslint/eslint-js
• React: extends the base, for use with React
  ./node_modules/@curve-technology/webapp-scripts/eslint/eslint-js-react
• Typescript: extends the base, for use with Typescript
  ./node_modules/@curve-technology/webapp-scripts/eslint/eslint-ts
• Typescript + React: extends the base, for use with Typescript and React
  ./node_modules/@curve-technology/webapp-scripts/eslint/eslint-ts-react

To use this config, create an .eslintrc file in the root of your package and reference one of the mentioned config options.

Base Typescript and React .eslintrc

Using a configuration file

The extends property value can be an absolute or relative path to a base configuration file. ESLint resolves a relative path to a base configuration file relative to the configuration file that uses it.

Example of a configuration file in JSON format:

{
  "extends": [
    "./node_modules/@curve-technology/webapp-scripts/eslint/eslint-ts-react"
  ],
  "rules": {
    "eqeqeq": "warn"
  }
}

Jest

This config assumes you're using jest.

To use this config, create an jest.config.js file in the root of your package and add:

Using the default config

module.exports = {
  ...require('@curve-technology/webapp-scripts/jest'),
}

Overriding the default config

If you need to add or override this config, use something like this:

const jestConfig = require('@curve-technology/webapp-scripts/jest')

// add an item to `setupFilesAfterEnv`
jestConfig.setupFilesAfterEnv.push('<rootDir>src/testUtils/mocks.js')

module.exports = Object.assign(jestConfig, {
  // your overrides here
  testPathIgnorePatterns: ['/dist/', '/node_modules/'],
  setupFiles: ['dotenv/config'],
  snapshotSerializers: ['jest-emotion'],
})

Prettier

To use this config, create an .prettierrc.js file in the root of your package and add:

module.exports = {
  ...require('@curve-technology/webapp-scripts/prettier'),
}

Husky

To use this config, create an .huskyrc.js file in the root of your package and add:

module.exports = {
  ...require('@curve-technology/webapp-scripts/husky'),
}

Commitlint

To use this config, create an .commitlintrc.js file in the root of your package and add:

module.exports = {
  ...require('@curve-technology/webapp-scripts/commitlint'),
}

TypeScript

To use this config, create an tsconfig.json file in the root of your repo and add:

{
  "extends": "@curve-technology/webapp-scripts/tsconfig/tsconfig.base",
  "exclude": ["node_modules", "./.storybook/**/*"],
  "include": ["next-env.d.ts", "src/**/*.ts", "src/**/*.tsx"]
}

Lighthouse

To use this config, create an lighthouserc.js file in the root of your repo and add:

module.exports = {
  ci: {
    ...require('@curve-technology/webapp-scripts/lighthouse'),
  },
}

---

Made by Curve's web scientists 👨‍🔬