https://github.com/instantcommerce/eslint-config-instant

Shareable config for eslint with prettier integrated
https://github.com/instantcommerce/eslint-config-instant

eslint

Last synced: about 2 months ago
JSON representation

Shareable config for eslint with prettier integrated

• Host: GitHub
• URL: https://github.com/instantcommerce/eslint-config-instant
• Owner: instantcommerce
• License: mit
• Created: 2020-08-03T21:26:37.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-07-20T14:16:02.000Z (over 1 year ago)
• Last Synced: 2024-11-13T17:45:53.998Z (2 months ago)
• Topics: eslint
• Language: JavaScript
• Homepage:
• Size: 857 KB
• Stars: 8
• Watchers: 6
• Forks: 0
• Open Issues: 6
• Metadata Files:
  • Readme: README.MD
  • License: LICENSE

Awesome Lists containing this project

• jimsghstars - instantcommerce/eslint-config-instant - Shareable config for eslint with prettier integrated (JavaScript)

README

        
# ⚙️ eslint-config-instant

A shareable eslint config used in projects created by Instant Commerce. The eslint config relies on several eslint plugins and implements prettier as a rule set.

## Installation

Start by removing any .eslintrc or .prettierrc files in your project. (**Note that eslintignore and prettierignore are still needed per project**)

Once done, drop the following line in your favorite terminal:

For frontend:

```bash

yarn add -D eslint-config-instant eslint eslint-config-prettier eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react eslint-plugin-import eslint-import-resolver-alias eslint-plugin-react-hooks eslint-plugin-mdx prettier

```

For backend:

```bash

yarn add -D eslint eslint-config-prettier eslint-import-resolver-alias eslint-plugin-import eslint-plugin-prettier

```

Finally add this to your package.json

Various available packages are:

- instant

For libraries/packages/etc where /react or /backend is overkill

```js

"eslintConfig": {

  "extends": [

    "instant"

  ]

},

```

- instant/react

For all things frontend

```js

"eslintConfig": {

  "extends": [

    "instant/react"

  ]

},

```

- instant/backend

For all things backend

```js

"eslintConfig": {

  "extends": [

    "instant/backend"

  ]

},

```

## formatOnSave With VS Code

Once you have installed the eslint-config, you probably want your editor to lint and fix for you.

Here are the instructions for VS Code:

1. Install the [ESLint package](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

2. Now we need to setup some VS Code settings via `Code/File` → `Preferences` → `Settings`. It's easier to enter these settings while editing the `settings.json` file, so click the `{}` icon in the top right corner:

```js

// These are all my auto-save configs

"editor.formatOnSave": true,

// turn it off for JS and JSX, we will do this via eslint

"[javascript]": {

"editor.formatOnSave": false

},

"[javascriptreact]": {

"editor.formatOnSave": false

},

// tell the ESLint plugin to run on save

"editor.codeActionsOnSave": {

"source.fixAll": true

},

// Optional BUT IMPORTANT: If you have the prettier extension enabled for other languages like CSS and HTML, turn it off for JS since we are doing it through Eslint already

"prettier.disableLanguages": ["javascript", "javascriptreact"],

```