@ae-studio/eslint-config v1.0.12
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",
"@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',
plugins: ['prettier-plugin-tailwindcss'],
}
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",
"@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