Eslint config rules
These are my personal configurations for ESLint. They are based on Airbnb’s ESLint configurations.
This repository contains ESLint configurations for the following setups:
They are designed to be used together with Prettier.
Install the required packages:
JavaScript:
yarn add --dev @websublime/eslint-config \
eslint-config-prettier \
eslint-plugin-simple-import-sort \
&& npx install-peerdeps --dev eslint-config-airbnb-base
JavaScript with React:
yarn add --dev @websublime/eslint-config \
eslint-config-prettier \
eslint-plugin-simple-import-sort \
&& npx install-peerdeps --dev eslint-config-airbnb
TypeScript:
yarn add --dev @websublime/eslint-config \
eslint-config-prettier \
@typescript-eslint/eslint-plugin \
@typescript-eslint/parser \
eslint-plugin-simple-import-sort \
&& npx install-peerdeps --dev eslint-config-airbnb-base
TypeScript with React:
yarn add --dev @websublime/eslint-config \
eslint-config-prettier \
@typescript-eslint/eslint-plugin \
@typescript-eslint/parser \
eslint-plugin-simple-import-sort \
&& npx install-peerdeps --dev eslint-config-airbnb
Angular:
yarn add --dev @websublime/eslint-config \
eslint-config-prettier \
@typescript-eslint/eslint-plugin \
@typescript-eslint/parser \
eslint-plugin-simple-import-sort \
&& npx install-peerdeps --dev eslint-config-airbnb
Vuejs:
yarn add --dev @websublime/eslint-config \
eslint-config-prettier \
eslint-plugin-vue \
@typescript-eslint/eslint-plugin \
@typescript-eslint/parser \
vue-eslint-parser \
eslint-plugin-simple-import-sort \
&& npx install-peerdeps --dev eslint-config-airbnb
Create the following entry in your package.json
file:
JavaScript:
{
"eslintConfig": {
"root": true,
"extends": ["@websublime/eslint-config"]
}
}
JavaScript with React:
{
"eslintConfig": {
"root": true,
"extends": ["@websublime/eslint-config/react"]
}
}
TypeScript:
{
"eslintConfig": {
"root": true,
"extends": ["@websublime/eslint-config/typescript"]
}
}
TypeScript with React:
{
"eslintConfig": {
"root": true,
"extends": ["@websublime/eslint-config/typescript-react"]
}
}
Angular:
{
"eslintConfig": {
"root": true,
"extends": ["@websublime/eslint-config/angular"]
}
}
Vuejs:
{
"eslintConfig": {
"root": true,
"extends": ["@websublime/eslint-config/vue"]
}
}
Add a linting script to your package.json
file:
JavaScript:
{
"scripts": {
"lint": "eslint --fix --max-warnings 0 ."
}
}
JavaScript with React:
{
"scripts": {
"lint": "eslint --ext .js,.jsx --fix --max-warnings 0 ."
}
}
TypeScript:
{
"scripts": {
"lint": "eslint --ext .ts --fix --max-warnings 0 ."
}
}
TypeScript with React:
{
"scripts": {
"lint": "eslint --ext .ts,.tsx --fix --max-warnings 0 ."
}
}