Eslint Style Guide

Eslint config for mixed js/ts projects. Will work just fine if project is pure js or pure ts.

This config is meant to be used along with prettier. It disables all the formatting rules that is meant for prettier to handle. We do this because we don't want to clutter the eslint report with formatting issues.

Usage

First install the peer and dev dependencies:

npm install eslint prettier @typescript-eslint/eslint-plugin eslint-plugin-import @rezolveai/eslint-config -D

Then setup your .eslintrc.js file if your project is node/server based (no React)

module.exports = {
	extends: ['@rezolveai/eslint-config'],
	parserOptions: {
		ecmaVersion: 'latest',
		sourceType: 'module',
		project: './tsconfig.json', // Only if you have a TS project
	},
}

For react projects, use

module.exports = {
	extends: ['@rezolveai/eslint-config/react'],
	parserOptions: {
		ecmaVersion: 'latest',
		sourceType: 'module',
		project: './tsconfig.json', // Only if you have a TS project
	},
}

If you're setting this up for an existing project with a lot of formatting and eslint issues, it's worth it to submit a style-only PR and get all the auto-fixable issues out of the way. This way subsequent PRs aren't littered with style fixes that makes it hard to review substantive code change. Use the following commands to either check for errors across the entire project or autoformat/autofix them.

To check only:

npx prettier --check .

npx eslint .

To actually carry out autofix:

npx prettier --write .

npx eslint --fix .

Additional Setup for vsCode

Be sure you have the prettier (esbenp.prettier-vscode) and eslint (dbaeumer.vscode-eslint) plugins installed. Setup the plugins to autoformat/autofix on save. You can do this via the UI or add the following to your settings.json

  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.organizeImports": true,
    "source.addMissingImports": true
  }

If you don't already have a prettier configuration, you can create .prettierrc.json at your project root with the following content. Alternatively, you can add a "prettier" key in your package.json file with this same content as well.

{
  "printWidth": 100,
  "singleQuote": true,
  "semi": false,
  "bracketSameLine": true,
  "arrowParens": "always"
}

Project with existing eslint installation

After following this setup, if you run into errors saying that eslint cannot find certain configurations to extend from, you may have existing installation of older eslint and eslint-related packages. Use npm outdated to find out what they are and install the latest versions.