npm package: @solarcommerce/config
Description: Solar Commerce configs for various tools such as Prettier, ESLint, Stylelint, etc.
Author: Solar Commerce
Latest version: 0.1.4

# @solarcommerce/config

This package contains configurations for various tools such as **Prettier, ESLint, Stylelint, etc**. These are the configurations we use in our **Solar Commerce team**, which we tried to choose to keep our code consistent and clean.

## Installation

To install our config, just enter:

```console
npm i -D @solarcommerce/config
```

## Usage

We have tried to make importing configurations as simple as possible. Below are examples of how to add our configuration to the project.

### Prettier

```javascript
// prettier.config.js

const config = require('@solarcommerce/config');
module.exports = config.prettier;
```

### ESLint (Next.js)

```javascript
// .eslintrc.js

const config = require('@solarcommerce/config');
module.exports = config.eslint.nextjs;
```

### ESLint (Vite)

```javascript
// .eslintrc.js

const config = require('@solarcommerce/config');
module.exports = config.eslint.vite;
```

## Config files

If you do not want to install our package or need configuration for a single tool, below we provide ready-made files that you can copy straight to your project.

### _prettier.config.js_

```javascript
module.exports = {
  printWidth: 120,
  tabWidth: 2,
  useTabs: false,
  semi: true,
  singleQuote: true,
  quoteProps: 'as-needed',
  jsxSingleQuote: false,
  trailingComma: 'all',
  bracketSpacing: true,
  bracketSameLine: false,
  arrowParens: 'always',
  singleAttributePerLine: false,
};
```

### _.eslintrc.js (Next.js)_

```javascript
module.exports = {
  root: true,
  extends: [
    'airbnb',
    'airbnb-typescript',
    'airbnb/hooks',
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended-type-checked',
    'plugin:@typescript-eslint/stylistic-type-checked',
    'plugin:@next/next/recommended',
    'prettier',
    'plugin:tailwindcss/recommended',
  ],
  settings: {
    'import/resolver': {
      typescript: {},
    },
  },
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: ['./tsconfig.json'],
  },
  plugins: ['@typescript-eslint', 'simple-import-sort', 'unused-imports'],
  rules: {
    'no-void': ['error', { allowAsStatement: true }],
    'import/extensions': [
      'error',
      'never',
      { css: 'always', svg: 'always', png: 'always', jpg: 'always', json: 'always' },
    ],
    '@typescript-eslint/consistent-type-definitions': ['error', 'type'],
    'no-console': ['error', { allow: ['error'] }],
    'react-refresh/only-export-components': 'off',
    'import/prefer-default-export': 'off',
    'react/react-in-jsx-scope': 'off',
    'react/prop-types': 'off',
    'react/require-default-props': 'off',
    'react/jsx-props-no-spreading': 'off',
    'import/order': 'off',
    'sort-imports': 'off',
    'simple-import-sort/imports': 'error',
    'tailwindcss/classnames-order': ['warn', { callees: ['classnames', 'clsx', 'ctl', 'cva', 'tv', 'cn'] }],
    'unused-imports/no-unused-imports': 'error',
    'unused-imports/no-unused-vars': 'off',
  },
};
```

### _.eslintrc.js (Vite)_

```javascript
module.exports = {
  root: true,
  env: {
    browser: true,
    es2020: true,
  },
  extends: [
    'airbnb',
    'airbnb-typescript',
    'airbnb/hooks',
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended-type-checked',
    'plugin:@typescript-eslint/stylistic-type-checked',
    'prettier',
    'plugin:tailwindcss/recommended',
  ],
  ignorePatterns: ['dist', '.eslintrc.cjs'],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: ['./tsconfig.json'],
  },
  plugins: ['@typescript-eslint', 'react-refresh', 'simple-import-sort', 'unused-imports'],
  rules: {
    'no-void': ['error', { allowAsStatement: true }],
    'import/extensions': [
      'error',
      'never',
      { css: 'always', svg: 'always', png: 'always', jpg: 'always', json: 'always' },
    ],
    '@typescript-eslint/consistent-type-definitions': ['error', 'type'],
    'no-console': ['error', { allow: ['error'] }],
    'react-refresh/only-export-components': 'off',
    'import/prefer-default-export': 'off',
    'react/react-in-jsx-scope': 'off',
    'react/prop-types': 'off',
    'react/require-default-props': 'off',
    'react/jsx-props-no-spreading': 'off',
    'import/order': 'off',
    'sort-imports': 'off',
    'simple-import-sort/imports': 'error',
    'tailwindcss/classnames-order': ['warn', { callees: ['classnames', 'clsx', 'ctl', 'cva', 'tv', 'cn'] }],
    'unused-imports/no-unused-imports': 'error',
    'unused-imports/no-unused-vars': 'off',
  },
};
```