ESlint Config

Submates' shared linting official configuration for Typescript and React.

• Read more about eslint here
• Read more about prettier here

Set up

When initiating a project add @submates/eslint-config as a dev dependency:

npm i -D @submate/eslint-config

And you're good to go! 😚

Overwrite eslint settings in vscode

Create a .vscode directory at the root of your project and add the following lines in a settings.json file:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

Eslint config

module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  },
  settings: {
    react: {
      version: 'detect',
    },
  },
  extends: [
    'eslint:recommended',
    'airbnb-base',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier/@typescript-eslint',
    'plugin:prettier/recommended',
  ],
  rules: {},
};

Prettier config

module.exports = {
  printWidth: 80,
  tabWidth: 2,
  useTabs: false,
  semi: true,
  singleQuote: true,
  quoteProps: 'as-needed',
  bracketSpacing: true,
  trailingComma: 'es6',
  arrowParens: 'always',
  jsxSingleQuote: true,
  jsxBracketSameLine: false,
};

Ignoring eslint

Disable eslint in the next line

// eslint-disable-next-line no-use-before-define
var variableNotTargetedByEslint = 'gang';

Disable eslint in the same line

var variableNotTargetedByEslint = 'gang'; // eslint-disable-line no-use-before-define

Disable eslint for a block of code

/* eslint-disable no-use-before-define */
var variableNotTargetedByEslint = 'gang';
var otherVariableNotTargetedByEslint = 'gang gang';
/* eslint-enable no-use-before-define */

Further information

• Submates' naming conventions
• Submates' gitmojis