@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:

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

// prettier.config.js

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

ESLint (Next.js)

// .eslintrc.js

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

ESLint (Vite)

// .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

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)

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)

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',
  },
};