README.md

Time Out Market - Linters

Set of linters configs to be used in our JavaScript projects.

All linters configs are based on our Front-end Guideline

Shared linters

• Commitlint
• Prettier
• ESLint
  • React
• Stylelint
  • CSS
  • SCSS
  • Styled Components

Installation

First you need to install peer dependencies:

npm i -D @commitlint/cli @commitlint/config-conventional prettier postcss stylelint stylelint-config-recommended stylelint-order eslint eslint-import-resolver-typescript eslint-import-resolver-babel-plugin-root-import eslint-plugin-import eslint-plugin-sonarjs @typescript-eslint/eslint-plugin @typescript-eslint/parser

npm i @juntossomosmais/atomium-tokens

Then install the linters package:

npm i -D @juntossomosmais/linters

Usage

Commitlint

Create a commitlint file in the root of your project with the following content:

module.exports = {
  extends: ['@juntossomosmais/linters/commitlint.config.js'],
}

Prettier

Create a prettier file in the root of your project with the following content:

module.exports = {
  ...require('@juntossomosmais/linters/prettier.config.js'),
  // Your custom config here
}

ESLint

Create a eslint file in the root of your project with the following content:

const baseConfig = require('@juntossomosmais/linters/eslint.config.js')

module.exports = {
  ...baseConfig,
  rules: {
    ...baseConfig.rules,
    // Your custom rules here
  },
  // Your another custom config here
}

If you are using custom groups of import/order rules, you can use the following configs example:

const baseConfig = require('@juntossomosmais/linters/eslint.config.js')

module.exports = {
  ...baseConfig,
  rules: {
    ...baseConfig.rules,
    'import/order': [
      'error',
      {
        ...baseConfig.rules['import/order'][1],
        pathGroups: [
          {
            pattern: 'react',
            group: 'builtin',
            position: 'before',
          },
          {
            pattern: '~/**',
            group: 'internal',
          },
        ]
      },
    ],
  },
  // Your another custom config here
}

React

Install the following peer dependencies:

npm i -D eslint-plugin-react eslint-plugin-react-hooks

Create a eslint file in the root of your project with the following content:

const baseConfig = require('@juntossomosmais/linters/eslint.config.react.js')

module.exports = {
  ...baseConfig,
  rules: {
    ...baseConfig.rules,
    // Your custom rules here
  },
  // Your another custom config here
}

Stylelint

CSS

Create a stylelint file in the root of your project with the following content:

module.exports = {
  ...require('@juntossomosmais/linters/stylelint.config.js'),
}

SCSS

Install the following peer dependencies:

npm i -D postcss-scss stylelint-config-standard-scss

Create a stylelint file in the root of your project with the following content:

module.exports = {
  ...require('@juntossomosmais/linters/stylelint.config.scss.js'),
}

Styled Components

Install the following peer dependencies:

npm i -D postcss-styled-syntax

Create a stylelint file in the root of your project with the following content:

module.exports = {
  ...require('@juntossomosmais/linters/stylelint.config.styled.js'),
}

If you use VSCode, make sure you have installed the extension vscode-stylelint and add the following configuration in your settings.json file:

"stylelint.validate": ["postcss", "javascript"]