aMarCruzeslint-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-standardizeIn 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 -Dthen 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
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