# 🧩 Dotfiles

> Note: Right now we're not publishing this package to NPM, so if you want to use it there's a few steps you'll need to take. Publishing it to NPM is very simple if you need it.

This package provides all the core pieces required for our **ESlint**, **StyleLint**, and **Prettier** configuration under a single package.

## ⚙️ Installation

Install via your package manager

```bash
npm i @ssm/dotfiles -D

    # or

yarn add @ssm/dotfiles -D
```

## 🧑‍💻 Usage

All we've really done is provided an exportable version of some configuration. This allows each application to spread over that object to further customize as needed.

Each set of tools uses the same basic set of steps as seen below.

### [ESLint](https://eslint.org/)

1. Create a .eslintrc.js in the root of the application
1. Paste the code below code into the new .eslintrc.js

```bash
const eslint = require('@ssm/dotfiles/src/.eslintrc');

module.exports = eslint;
```

### [Prettier](https://prettier.io/)

1. Create a .prettierrc.js in the root of the application
1. Paste the code below code into the new .prettierrc.js

```bash
const prettier = require('@ssm/dotfiles/src/.prettierrc');

module.exports = prettier;
```

### [StyleLint](https://stylelint.io/)

1. Create a .stylelintrc.js in the root of the application
1. Paste the code below code into the new .stylelintrc.js

```bash
const stylelint = require('@ssm/dotfiles/src/.stylelintrc');

module.exports = stylelint;
```

<!--
### GraphQL Codegen

1. Add the GRAPHQL_URL to your .env file in the root of the application
2. Add the follow scripts to the package.json

```bash
"generate": "cross-env NODE_OPTIONS=\"-r dotenv/config\" npm run generate:types",
"generate:types": "graphql-codegen --config ./node_modules/@ssm/dotfiles/src/codegen.yml",
```
-->

## 💅 Customization

These configurations are really nothing more than a bit of JSON or JS which means we can easily alter it on a per-application basis.

```js
const eslint = require("@ssm/dotfiles/src/.eslintrc");

module.exports = {
  // Spread over the default configuration
  ...eslint,

  rules: {
    ...eslint.rules,

    // Some rules we need to tweak
    "import/default": "off",
    "import/no-named-as-default": "off",
    "import/no-named-as-default-member": "off",
    "react/react-in-jsx-scope": "off"
  }
};
```