pandora

Opinionated set of eslint and prettier rules

Installation

Notice that all the @dreipol/pandora peer dependencies should be installed manually. For this reason we need to explicitly define their major version.

# Install the linting tools
npm i -D eslint@8 prettier@2

# Install the plugins used in @dreipol/pandora
npm i -D eslint-config-airbnb-base@15 eslint-plugin-prettier@4 eslint-config-prettier@8 eslint-plugin-fp@2 eslint-plugin-import@2

# Install @dreipol/pandora
npm i -D @dreipol/pandora

For Typescript support

npm i -D typescript@4 @typescript-eslint/eslint-plugin@5 @typescript-eslint/parser@5

These plugins assume a tsconfig.json file in your project root (Docs).

Optional IDE Configuration

• Install eslint in your IDE
• Install prettier in your IDE

Eslint Setup

Set up your eslint config (.eslintrc.js) file as follows to enable the @dreipol/pandora eslint rules in your project

const { eslint } = require('@dreipol/pandora')

module.exports = {
  extends: [eslint.base],
}

To enable Typescript support, simply add the eslint.typescript settings to the extension list

const { eslint } = require('@dreipol/pandora')

module.exports = {
  extends: [eslint.base, eslint.typescript],
}

Prettier Setup

Set up your prettier config (.prettierrc.js) file as follows to enable the @dreipol/pandora prettier rules in your project

const { prettier } = require('@dreipol/pandora')

module.exports = prettier.base

Vue Setup

Installation

For Vue Project we need to install one additional plugin eslint-plugin-vue

npm i -D eslint-plugin-vue@8

Eslint Setup

To enable the Vue.js linting you should add the following extension to your eslint config (.eslintrc.js) file:

const { eslint } = require('@dreipol/pandora')

module.exports = {
  extends: [eslint.base, eslint.vue],
}

If you need Typescript support in your Vue components, you can add the following ESLint plugin

npm i -D @vue/eslint-config-typescript@7

Now, enable Vue Typescript support in your eslint config

const { eslint } = require('@dreipol/pandora')

module.exports = {
  extends: [
    api.eslint.base,
    api.eslint.typescript,
    api.eslint.vue,
    api.eslint.vueTypescript,
  ]
}

Prettier Setup

To let prettier format your Vue.js files you can simply setup your prettier config (.prettierrc.js) file as follows

const { prettier } = require('@dreipol/pandora')

module.exports = prettier.vue

React Setup

Installation

For React projects we need to install the following two dependencies:

npm i -D eslint-plugin-react@7 eslint-plugin-react-hooks@4

Eslint Setup

To enable linting for React/JSX files, you should add the following extension to your eslint config (.eslintrc.js) file:

const { eslint } = require('@dreipol/pandora')

module.exports = {
  extends: [eslint.base, eslint.react],
}

You don't need any specific plugins for Typescript support with React, just enable both configs in your .eslintrc.js.

const { eslint } = require('@dreipol/pandora')

module.exports = {
  extends: [eslint.base, eslint.react, eslint.typescript],
}

Stylelint Setup

Stylelint Installation

Make sure to have Stylelint installed in your project before proceeding with the following steps

npm i stylelint@14 stylelint-prettier@2 stylelint-config-prettier@9

Stylelint Basic Rules Config

To use only the basic pandora stylelint rules in your project you can set up your .stylelintrc.js file as follows

const { stylelint } = require('@dreipol/pandora')

module.exports = {
  extends: [stylelint.base],
}

Stylelint SCSS Config

Does your project use SCSS files? No problems... you can enable the pandora stylelint rules for scss. First you need to install the stylelint-scss dependency

npm i stylelint-scss@4 postcss-scss@4 postcss@8

You can then update your .stylelintrc.js file as follows

const { stylelint } = require('@dreipol/pandora')

module.exports = {
  extends: [
    stylelint.base,
+   stylelint.scss,
  ],
}

Stylelint BEM Patterns Config

To make sure your classes will be properly named according to BEM, you might enable the pandora bem pattern plugin. First you need to install stylelint-selector-bem-pattern

npm i stylelint-selector-bem-pattern@2

You can then update your .stylelintrc.js file as follows

const { stylelint } = require('@dreipol/pandora')

module.exports = {
  extends: [
    stylelint.base,
    stylelint.scss,
+   stylelint.bemPattern,
  ],
}

Stylelint Order Config

Do you care about the order of your css properties? In that case the pandora stylelint/config-order is what you are looking for. First install stylelint-order

npm i stylelint-order@5

Then update your .stylelintrc.js file as follows

const { stylelint } = require('@dreipol/pandora')

module.exports = {
  extends: [
    stylelint.base,
    stylelint.scss,
    stylelint.bemPattern,
+   stylelint.order,
  ],
}