@pexel/code-config v1.0.1

Pexel Code Config

Code style configurations for Pexel projects.

Installation and usage

Install package:

npm install --save-dev @pexel/code-config

Install peer dependencies:

npx install-peerdeps --dev @pexel/code-config

Prettier

Create a .prettierrc.js file in the project's root directory with the following contents:

module.exports = require('@pexel/code-config/prettier')

ESLint

ESLint requires sharable config packages to contain eslint-config- in their name. Until this project is converted into a monorepo this isn't an option. As a workaround you can simply use the full path to the ESLint config parts that come with this package as shown in the examples below.

Create .eslintrc.js file in project root:

module.exports = {
  extends: ['./node_modules/@pexel/code-config/eslint/base'],
}

Order of configs

1. base
2. browser
3. node
4. react
5. typescript
6. prettier

Overrides

Override settings by simply adding them to the .eslintrc.js object like so:

module.exports = {
  extends: ['./node_modules/@pexel/code-config/eslint/base'],
  rules: {
    'no-console': 'error',
  },
}

The plugin eslint-plugin-import is set to consider paths starting with a tilde-simbol ~ as internal aliases. If internal path aliases start with an at-symbol @, you can override this like so:

module.exports = {
  extends: ['./node_modules/@pexel/code-config/eslint/base'],
  settings: {
    'import/internal-regex': '@~',
  },
}

ESLint configuration examples

Node JavaScript

module.exports = {
  extends: [
    './node_modules/@pexel/code-config/eslint/base',
    './node_modules/@pexel/code-config/eslint/node',
    './node_modules/@pexel/code-config/eslint/prettier',
  ],
}

Node TypeScript

module.exports = {
  extends: [
    './node_modules/@pexel/code-config/eslint/base',
    './node_modules/@pexel/code-config/eslint/node',
    './node_modules/@pexel/code-config/eslint/typescript',
    './node_modules/@pexel/code-config/eslint/prettier',
  ],
}

Browser JavaScript React

module.exports = {
  extends: [
    './node_modules/@pexel/code-config/eslint/base',
    './node_modules/@pexel/code-config/eslint/browser',
    './node_modules/@pexel/code-config/eslint/react',
    './node_modules/@pexel/code-config/eslint/prettier',
  ],
}

Browser TypeScript React

module.exports = {
  extends: [
    './node_modules/@pexel/code-config/eslint/base',
    './node_modules/@pexel/code-config/eslint/browser',
    './node_modules/@pexel/code-config/eslint/react',
    './node_modules/@pexel/code-config/eslint/typescript',
    './node_modules/@pexel/code-config/eslint/prettier',
  ],
}