eslint-config-standard-kit

eslint-config-standard-kit

Standard.js is a fantastic collection of linter rules, but it can be difficult to integrate with other code-quality tools like Prettier, TypeScript, or Flow.

This package makes it easy to integrate Standard.js with these other tools by breaking its configuration into modular pieces. Just mix & match the bits you need for your particular setup:

• standard-kit - Basic Standard.js rules
• Language dialects:
  • standard-kit/jsx - JSX language support
  • standard-kit/typescript - TypeScript language support
  • standard-kit/flow - Flow language support
• Runtimes:
  • standard-kit/node - Node.js runtime support, including CommonJS features like require
  • standard-kit/react - React runtime support

If you would like to use Prettier to format your source code instead of Standard.js, just prefix the configuration names with standard-kit/prettier instead of standard-kit.

Easy Setup

Use the configuration web page to generate your.eslintrc.json file and list of dependencies for package.json.

Manual Setup

First, add eslint-plugin-standard-kit as one of your project's devDependencies:

npm install --save-dev eslint-plugin-standard-kit

Depending on which configurations you enable, you will need to add several other dependencies as well:

• basic rules:
  • eslint-plugin-import
  • eslint-plugin-promise
• jsx:
  • eslint-plugin-react
• typescript:
  • @typescript-eslint/parser
  • @typescript-eslint/eslint-plugin
• flow:
  • babel-eslint
  • eslint-plugin-flowtype
• node:
  • eslint-plugin-node
• react:
  • eslint-plugin-react
  • eslint-plugin-react-hooks
• prettier:
  • eslint-plugin-prettier
  • prettier

Finally, edit your ESLint configuration file to enable your selected rules, as shown in the example below:

{
  "extends": [
    "standard-kit",
    "standard-kit/jsx",
    "standard-kit/typescript"
  ],
  "parserOptions": {
    "project": "tsconfig.json"
  }
}

If you are using JSX or Typescript, you may want to pass the --ext option to ESlint to tell it about the .jsx or .ts file extensions:

eslint --ext .js,.jsx,.ts src/

The TypeScript rules also need to know where your tsconfig.json file is located. You can configure this using the parserOptions.project setting, as shown in the example above.

Rules

This package auto-generate its configuration files based on the official eslint-config-standard, eslint-config-standard-jsx, and eslint-config-standard-with-typescript packages. This means you are getting the exact same rules as the official Standard.js project, just combined & filtered into a more convenient format.

Flow support uses the recommended settings from eslint-plugin-flowtype.

Contributing

Pull requests are welcome! This library uses its own rules for linting & formatting, so please be sure the pre-commit hooks pass.

The unit tests use a snapshot system to verify that our output doesn't change. If you need to update the snapshots, just run UPDATE=1 yarn test to re-generate those.

To test the web interface, just use yarn prepare to compile the code, then open / refresh public/index.html.

Changelog

0.15.1 (2020-12-16)

• Fix Flow rules not not affect Typescript files. This solves an issue in the previous release, where enabling both Flow & Typescript in the same project would cause errors in Typescript files.
• Handful of internal code cleanups.