@j0hnm4r5/eslint-config

About

This ESLint config is built on top of Airbnb's config and Unicorn. It includes Prettier to automatically format code.

Instructions

1. Install eslint and this config in your project with yarn add -D eslint @j0hnm4r5/eslint-config

2. In your .eslintrc file, add one of the following to the extends array:

| | | |---|---| | Vanilla (default): | "@j0hnm4r5/eslint-config" | | TypeScript without React : | "@j0hnm4r5/eslint-config/configs/ts" | | React: | "@j0hnm4r5/eslint-config/configs/react" | | TypeScript with React: | "@j0hnm4r5/eslint-config/configs/ts-react" |

That's it! All of the extended configs, Prettier, and some extra rule changes should just work out of the box.

Example Usage

This should change depending on the project, but here's what I like to use as a baseline:

.eslintrc

// .eslintrc
{
  "env": {
    "node": true,
    "browser": true,
    "es2020": true,
  },
  "extends": [
    "@j0hnm4r5/eslint-config"
  ],
}

Typescript

If you're using TypeScript, add this to your .eslintrc too:

// inside .eslintrc root object
"parserOptions": {
	"project": "./tsconfig.json"
}

As well as a tsconfig.json file at the root of the project:

Node

// tsconfig.json
{
  "compilerOptions": {
    "lib": ["es2020"],
    "module": "commonjs",
    "target": "es2020",

    "sourceMap": true,
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "exclude": [
    "node_modules"
  ]
}

Browser

// tsconfig.json
{
  "compilerOptions": {
    "lib": ["es2020", "dom"],
    "module": "commonjs",
    "target": "es6",
    
    "jsx": "react",
    
    "sourceMap": true,
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "exclude": [
    "node_modules"
  ]
}

Prettier

And don't forget your Prettier configs! Here's what I use:

.prettierrc

// .prettierrc
{
  "printWidth": 62, // perfect size for my vscode window
  "tabWidth": 2,
  "useTabs": true,
  "semicolons": true,
  "singleQuote": false,
  "quoteProps": "consistent",
  "jsxSingleQuote": false,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "always"
}

.prettierignore

# .prettierignore
package.json
package-lock.json
yarn.lock
node_modules
public
.cache