eslint-plugin-shopify-zero

eslint-plugin-shopify-zero

Zero-dependency ESLint plugin for Shopify's JavaScript style guide.

Includes only React and TypeScript plugins.

Usage

1. npm install -D eslint
2. npm install -D eslint-plugin-shopify-zero
3. Extend in .eslintrc:

{
  "extends": [
    "plugin:eslint-plugin-shopify-zero/typescript",
    "plugin:eslint-plugin-shopify-zero/react"
  ]
}

Custom rules

This plugin provides the following custom rules:

• binary-assignment-parens: Require (or disallow) assignments of binary, boolean-producing expressions to be wrapped in parentheses.
• class-property-semi: Require (or disallow) semicolons for class properties.
• images-no-direct-imports: Prevent images from being directly imported.
• jsx-no-complex-expressions: Disallow complex expressions embedded in in JSX.
• jsx-no-hardcoded-content: Disallow hardcoded content in JSX.
• jsx-prefer-fragment-wrappers: Disallow useless wrapping elements in favour of fragment shorthand in JSX.
• no-namespace-imports: Prevent namespace import declarations.
• no-useless-computed-properties: Prevent the usage of unnecessary computed properties.
• prefer-class-properties: Prefer class properties to assignment of literals in constructors.
• prefer-early-return: Prefer early returns over full-body conditional wrapping in function declarations.
• no-ancestor-directory-import: Prefer imports from within a directory extend to the file from where they are importing without relying on an index file.
• prefer-module-scope-constants: Prefer that screaming snake case variables always be defined using const, and always appear at module scope.
• react-hooks-strict-return: Restrict the number of returned items from React hooks.
• react-initialize-state: Require that React component state be initialized when it has a non-empty type.
• react-no-multiple-render-methods: Disallow multiple render methods in React component classes.
• react-prefer-private-members: Prefer all non-React-specific members be marked private in React class components.
• react-type-state: Require that React component state be typed in TypeScript.
• restrict-full-import: Prevent importing the entirety of a package.
• strict-component-boundaries: Prevent module imports between components.
• typescript/prefer-pascal-case-enums: Prefer TypeScript enums be defined using Pascal case.
• typescript/prefer-singular-enums: Prefer TypeScript enums be singular.
• typescript/prefer-build-client-schema: Prefer buildClientSchema for schema building.