eslint-config-price

Crypto.com's ESLint config with typescript and React support.

Getting started

Install

# yarn
yarn add eslint-config-price --dev

# Install peerDependenceis
yarn add -D install-peerdeps
yarn install-peerdeps eslint-config-crypto-ts --dev

Configuration

// add crypto-eslint to your .eslintrc.js
module.exports = {
  // ...
  extends: ["price"],
  // ...
};

Integration with next.js

# install @next/eslint-plugin-next
yarn add --dev @next/eslint-plugin-next

Extends @next/eslint-plugin-next in your .eslinrc.js

module.exports = {
  // ...
  extends: ["price", "plugin:@next/next/recommended"],
  // ...
};

Integration with prettier

eslint-config-crypto-ts have a peerDependency on prettier. All you have to do is create a .prettierrc.json in your project root.

.prettierrc.json Example

{
  "singleQuote": false,
  "arrowParens": "always",
  "semi": true,
  "trailingComma": "es5",
  "printWidth": 80,
  "tabWidth": 2
}

To keep eslint prettier rules in sync with .prettierrc.json:

// import prettier config
const prettierConfig = require("./.prettierrc.json");

module.exports = {
  rules: {
    // use the imported prettier config
    "prettier/prettier": ["error", prettierConfig],
  },
};

Note: While it is possible to pass options to Prettier via your ESLint configuration file, it is not recommended because editor extensions such as prettier-atom and prettier-vscode will read .prettierrc, but won't read settings from ESLint, which can lead to an inconsistent experience.

https://github.com/prettier/eslint-plugin-prettier#options

.vscode/settings.json

It's recommended that you turn on auto format/fix on save.

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  }
}

.vscode/settings.json shouldn't be commit to git. You can add .vscode to your global ~/.gitignore

# edit your ~/.gitignore

.vscode

An .eslintrc.js Example

const prettierConfig = require("./.prettierrc.json");

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  parserOptions: {
    project: "./tsconfig.json",
    babelOptions: {
      presets: ["next/babel"],
    },
  },
  extends: ["crypto-ts", "plugin:@next/next/recommended"],
  rules: {
    "prettier/prettier": ["error", prettierConfig],
  },
};

What's in eslint-config-crypto-ts

eslint-config-crypto-ts uses the following eslint plugin/config packages.

eslint
prettier
@typescript-eslint/eslint-plugin
@typescript-eslint/parser,
eslint-plugin-prettier
eslint-config-prettier
eslint-import-resolver-typescript
eslint-plugin-eslint-comments
eslint-plugin-import
eslint-plugin-react
eslint-plugin-react-hooks