@ae-studio/eslint-config

ESLint Config (@ae-studio/eslint-config)

---

Installation

Using NPM:

npm i -D @ae-studio/eslint-config

Using Yarn:

yarn add -D @ae-studio/eslint-config

Usage

By default, this config will lint for ES6+. To use it, add the following to your .eslintrc.* file:

{
  "extends": "@ae-studio/eslint-config"
}

To add typescript support, add the following to your .eslintrc.* file instead:

{
  "extends": "@ae-studio/eslint-config/typescript"
}

Note: You will need to install @typescript-eslint/eslint-plugin and @typescript-eslint/parser as well.

yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser

Format Rules

This config includes the following rules for formatting:

{
  'max-len': [
      'error',
      {
        code: 120,
        ignoreComments: true,
        ignoreTrailingComments: true,
        ignoreUrls: true,
        ignoreStrings: true,
        ignoreTemplateLiterals: true,
      },
  ],
  'semi': ['error', 'always'],
  'quotes': ['error', 'single'],
  'comma-dangle': ['error', 'always-multiline'],
  'quote-props': ['error', 'consistent-as-needed'],
  'arrow-parens': ['error', 'always'],
  'object-curly-spacing': ['error', 'always'],
  'indent': ['error', 2, { SwitchCase: 1, offsetTernaryExpressions: true }],
  'linebreak-style': [1, 'unix'],
}

Prettier Support

This config also includes support for Prettier. To use it, add the following to your .eslintrc.* file:

{
  "extends": ["@ae-studio/eslint-config/prettier"]
}

And for Typescript support:

{
  "extends": [
    "@ae-studio/eslint-config/typescript",
    "@ae-studio/eslint-config/prettier"
  ]
}

❗ When you run eslint --fix, it will run the prettier plugin first, then the ESLint plugin, so don't use prettier . --write!

This means that you don't need to set up two separate commands to run prettier and eslint. Just run eslint --fix and it will do both.

This also means that you should only install / use the ESLint extension in your editor, not the prettier extension. On save, the ESLint extension will run prettier first, then ESLint.

When using the prettier eslint config, it is not necessary to create a .prettierrc file. However, if you do, the ESLint prettier config will take precedence over the .prettierrc config, so only create a .prettierrc if you want to use plugins not already included.

The following rules are included in the ESLint Prettier config:

Note: The prettier plugin disables conflicting format ESLint rules from above.

{
  bracketSpacing: true,
  endOfLine: 'lf',
  printWidth: 120,
  semi: true,
  singleQuote: true,
  quoteProps: 'consistent',
  tabWidth: 2,
  trailingComma: 'all',
  useTabs: false,
  arrowParens: 'always',
  importOrder: [
    '<BUILT_IN_MODULES>',
    '',
    '^dotenv/(.*)$',
    '@config',
    '<THIRD_PARTY_MODULES>',
    '',
    '^[@](?!types)',
    '^[.]',
    '',
    '<TYPES>',
    '<TYPES>^[.]',
  ],
  importOrderSeparation: true,
  importOrderSortSpecifiers: true,
  plugins: ['prettier-plugin-tailwindcss', '@ianvs/prettier-plugin-sort-imports'],
}

Note: You will need to install prettier, eslint-plugin-prettier, eslint-config-prettier, prettier-plugin-tailwindcss, and @ianvs/prettier-plugin-sort-imports as well.

yarn add -D eslint-plugin-prettier eslint-config-prettier prettier prettier-plugin-tailwindcss @ianvs/prettier-plugin-sort-imports

Other Configs

TailwindCSS support:

Note: Useful if you are not using Prettier.

{
  "extends": ["@ae-studio/eslint-config/tailwind"]
}

With Typescript:

{
  "extends": [
    "@ae-studio/eslint-config/typescript",
    "@ae-studio/eslint-config/tailwind"
  ]
}

Note: You will need to install eslint-plugin-tailwindcss as well.

yarn add -D eslint-plugin-tailwindcss

Next.js Support

If you are using Next.js, first extend the Next config and then extend the other configs you want to use:

Note: next/core-web-vitals extends next, so both are not required.

{
  "extends": [
    "next/core-web-vitals",
    "@ae-studio/eslint-config/typescript",
    "@ae-studio/eslint-config/prettier"
  ]
}

IDE Support

VSCode

Install the ESLint extension

Add the following to .vscode/settings.json

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

JetBrains (WebStorm, IntelliJ IDEA, etc.)

Navigate to Preferences > Languages & Frameworks > JavaScript > Code Quality Tools > ESLint

Check Automatic ESLint configuration and Run eslint --fix on save

Dependencies

@ae-studio/eslint-config/typescript requires the following dependencies:

• @typescript-eslint/eslint-plugin
• @typescript-eslint/parser

@ae-studio/eslint-config/tailwind requires the following dependencies:

• eslint-plugin-tailwindcss

@ae-studio/eslint-config/prettier requires the following dependencies:

• eslint-plugin-prettier
• eslint-config-prettier
• prettier
• prettier-plugin-tailwindcss
• @ianvs/prettier-plugin-sort-imports

If not automatically installed, install each by running:

Using NPM:

npm i -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-tailwindcss eslint-plugin-prettier eslint-config-prettier prettier prettier-plugin-tailwindcss @ianvs/prettier-plugin-sort-imports

Using Yarn:

yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-tailwindcss eslint-plugin-prettier eslint-config-prettier prettier prettier-plugin-tailwindcss @ianvs/prettier-plugin-sort-imports