It turns out that because
@shopify/eslint-plugin
, the project that this project was forked from, relies on several other plugins likeeslint-plugin-import
, ESLint attempts torequire
those plugins at runtime and can't find them because they aren't listed as dependencies, and so aren't installed.
In a nutshell, unless all those other plugins are also bundled together and their reference as plugins in each configuration removed, it's not possible for this project to be ported to a single file output with zero dependencies.
So, do not use this project, it does not work. Install
@shopify/eslint-plugin
instead and try not to think about the extra dependencies that come with it. I'll still put this in a public repo for posterity.
Zero-dependency ESLint plugin for Shopify's JavaScript style guide.
Includes only React and TypeScript plugins.
npm install -D eslint
npm install -D eslint-plugin-shopify-zero
- Extend in
.eslintrc
:
{
"extends": [
"plugin:eslint-plugin-shopify-zero/typescript",
"plugin:eslint-plugin-shopify-zero/react"
]
}
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.