This repository contains configuration files for several tools commonly used in projects to enforce certain rules improving code quality and style.

Prettier

In order to use shared Prettier configuration, add following entry to your package.json.

{
  "prettier": "@airnauts/style-guide/prettier"
}

Reminder: you still need to install Prettier in your project.

ESLint

The following configurations are available:

• @airnauts/style-guide/eslint/javascript
• @airnauts/style-guide/eslint/react
• @airnauts/style-guide/eslint/typescript (requires additional configuration)
• @airnauts/style-guide/eslint/react-typescript (requires additional configuration)

You need to use require.resolve to replace symbolic names with absolute paths.

In order to set up linting for your React application, open your .eslintrc file and add the following code.

module.exports = {
  extends: [
    require.resolve('@airnauts/style-guide/eslint/javascript'),
    require.resolve('@airnauts/style-guide/eslint/react'),
  ],
};

Reminder: you still need to install ESLint in your project.

Using TypeScript configuration variants

In order to properly apply certain rules ESLint needs to have access to tsconfig.json file. See following code snippet for an example how to provide such information.

const { resolve } = require('path');

const project = resolve(__dirname, 'tsconfig.json');

module.exports = {
  root: true,
  extends: [
    require.resolve('@airnauts/style-guide/eslint/typescript'),
    require.resolve('@airnauts/style-guide/eslint/react-typescript'),
  ],
  parserOptions: {
    project,
  },
};

If you want to know more about this requirement, see: https://typescript-eslint.io/docs/linting/type-linting

Applying certain configuration variant only for selected directory

It's possible to apply a configuration to the selected directory only. It may be useful in the future when we will be exposing additional variants. Following code snippet shows an example of this feature using non-existing variant.

module.exports = {
  extends: [require.resolve('@airnauts/style-guide/eslint/typescript')],
  overrides: [
    {
      files: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
      extends: [require.resolve('@airnauts/style-guide/eslint/jest')],
    },
  ],
};

Overriding TypeScript rules

When using overrides, it's mandatory to provide file extensions as ESLint works on JavaScript files only by default.

module.exports = {
  overrides: [
    {
      files: [`src/**/*.[jt]s?(x)`],
      rules: {
        'some-selected-rule': 'off',
      },
    },
  ],
};

Stylelint

In order to use a shared Stylelint configuration, open your .stylelintrc file and add the following code.

{
  "extends": ["@airnauts/style-guide/stylelint"]
}

In order to enable validation for .css and .scss files inside VSCode

1. install an extension stylelint.vscode-stylelint,
2. add the following rule to your VSCode's settings file settings.json.

{
  "stylelint.validate": ["css", "scss"]
}

In order to enable autofix on save add the following rule to to your VSCode's settings file settings.json.

{
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  }
}

Contributing

Please go through contributing guide before creating a pull request.