eslint-config-standardize

IMPORTANT

eslint-config-standardize was my first attempt to integrate ESLint with TypeScript and React. Currently, the package that my team and I use is @quitsmx/eslint-config. With TypeScript and PrettierX integrated, this one is more modern and easier to use. I would recommend you give it a try, eslint-config-standardize will be discontinued soon.

Customizable ESLint config backed by StandardJS rules and PrettierX formatting.

For use with ESLint v7.0 and above, for previous versions use eslint-config-standardize 0.7.x or bellow.

Minimum Node.js version: 10.13, 12.0, or above.

NOTE:

From v0.9.0, eslint-plugin-prettierx is included and enabled in this package. You don't need to include the "eslint-plugin-prettierx/standardize-bundle" config.

Setup

Install from npm (omit eslint if it's already installed or you are using CRA).

npm install -D eslint eslint-config-standardize
# or
yarn add -D eslint eslint-config-standardize

In your ESLint config file:

// .eslintrc.js
module.exports = {
  root: true, // optional, avoids searching upwards
  extends: ['standardize'],
}

With TypeScript

If you are using TypeScript, install the parser and the eslint plugin

yarn add @typescript-eslint/parser @typescript-eslint/eslint-plugin -D

then add "standardize/typescript" to your eslint config

// .eslintrc.js
module.exports = {
  root: true, // optional, avoids searching upwards
  extends: ['standardize', 'standardize/typescript'],
}

With React or Preact

You don't need to do anything else, the config automatically detects React and Preact.

"standardize/preact" is no longer needed and has been removed.

Included Plugins

• import
• node
• prettierx
• promise
• react
• react-hooks
• unicorn

Differences vs StandardJS

Standardize uses a more strict and opinionated configuration than StandardJS and include the react-hooks and unicorn plugins.

Almost all the code passes with no problems through the StandardJS linter, but has some differences with the default settings of StandardJS/PrettierX. This is the most important:

Multiline Ternary

The formatting of multiline ternary is a mess, although the result seems to be inline with the StandardJS rules. See Known Issues.

Trailing Commas

Although StandardJS avoids trailing commas in all, this is a common practice as it helps to clarify commits.

Standardize leaves everything to 'always', except for the function parameters (Prettier's trailingComma: 'es5' option).

ESLint rule: comma-dangle Prettier: trailingComma

JSX quotes

The React style favors double quotes in properties, and I agree.

ESLint rule: jsx-quotes Prettier: jsxSingleQuote

Quote Props

Both Prettier and StandardJS enclose the properties in quotes "as needed", this looks ugly with syntax highlighting on large JS objects (such as those used in configurations) and is inconsistent at object level. I prefer "consistent".

ESLint rule: quote-props Prettier: quoteProps

eslint-plugin-prettierx

The eslint-plugin-prettierx is used to format the JS code. You don't need install PrettierX.

This plugin is a excellent alternative to the VS Code 'Prettier - Code formatter' extension.

See here to know how to configure it.

Support my Work

I'm a full-stack developer with more than 20 year of experience and I try to share most of my work for free and help others, but this takes a significant amount of time and effort so, if you like my work, please consider...

Of course, feedback, PRs, and stars are also welcome 🙃

Thanks for your support!

License

The MIT License © 2019-2021 Alberto Martínez