I feel this config is a bit outdated. I haven't gotten around to updating this based on the new stuff I'm using so please use with caution.
I start new projects often, and I'm obsessive about doing them the right way. ESLint, Prettier, the works. Even if it's a single page Next.js site, every project needs to have all the bells and whistles, so things are perfectly consistent across all my code ever written.
This collection is still a work in progress while I tinker with things.
Let's get started.
Prettier
I love Prettier . It's opinionated and gives me a fantastic base to get started. I use a pre-commit hook alongside Prettier to make sure anything missed gets formatted.
Before installing Husky, make sure you've created a Git repository first, or installing Git hooks will fail.
Install dependencies
yarn add --dev prettier \
husky \
pretty-quick
yarn add --dev prettier \
husky \
pretty-quick
Prettier config — prettier.config.js
module . exports = {
arrowParens: 'always' ,
bracketSameLine: true ,
bracketSpacing: true ,
semi: false ,
singleQuote: true ,
trailingComma: 'none'
}
module . exports = {
arrowParens: 'always' ,
bracketSameLine: true ,
bracketSpacing: true ,
semi: false ,
singleQuote: true ,
trailingComma: 'none'
}
Setup Husky
npm set-script prepare "husky install"
yarn prepare
npm set-script prepare "husky install"
yarn prepare
Precommit hook — .husky/pre-commit
yarn husky add .husky/pre-commit "yarn pretty-quick --staged"
yarn husky add .husky/pre-commit "yarn pretty-quick --staged"
ESLint
I rely on a lot of ESLint plugins to help lint my code. I'm obsessive about standards and consistency. Other than Prettier and standard ESLint / TypeScript rules, here are the things I need.
Imports should be grouped and sorted
Object (including destructured) keys should be sorted alphabetically
Component props should be sorted alphabetically
By using these rules, I can be certain that code across repositories will be consistent. But different types of projects require different rules and configurations. Let's break it down.
Node.js
Dependencies
yarn add --dev @typescript-eslint/eslint-plugin \
@typescript-eslint/parser \
eslint \
eslint-config-prettier \
eslint-plugin-prettier \
eslint-plugin-simple-import-sort \
eslint-plugin-sort-destructure-keys \
eslint-plugin-sort-keys-fix
yarn add --dev @typescript-eslint/eslint-plugin \
@typescript-eslint/parser \
eslint \
eslint-config-prettier \
eslint-plugin-prettier \
eslint-plugin-simple-import-sort \
eslint-plugin-sort-destructure-keys \
eslint-plugin-sort-keys-fix
Script — package.json
Configuration — .eslintrc.json
{
"extends" : [
"plugin:@typescript-eslint/recommended" ,
"plugin:prettier/recommended"
],
"parser" : "@typescript-eslint/parser" ,
"plugins" : [
"@typescript-eslint" ,
"sort-keys-fix" ,
"sort-destructure-keys" ,
"simple-import-sort" ,
"prettier"
],
"rules" : {
"prettier/prettier" : "error" ,
"simple-import-sort/exports" : "error" ,
"simple-import-sort/imports" : "error" ,
"sort-destructure-keys/sort-destructure-keys" : "error" ,
"sort-keys-fix/sort-keys-fix" : "error"
}
}
{
"extends" : [
"plugin:@typescript-eslint/recommended" ,
"plugin:prettier/recommended"
],
"parser" : "@typescript-eslint/parser" ,
"plugins" : [
"@typescript-eslint" ,
"sort-keys-fix" ,
"sort-destructure-keys" ,
"simple-import-sort" ,
"prettier"
],
"rules" : {
"prettier/prettier" : "error" ,
"simple-import-sort/exports" : "error" ,
"simple-import-sort/imports" : "error" ,
"sort-destructure-keys/sort-destructure-keys" : "error" ,
"sort-keys-fix/sort-keys-fix" : "error"
}
}
Next.js
Dependencies
Next.js 12 only supports ESLint 7 for now.
yarn add --dev @typescript-eslint/eslint-plugin \
@typescript-eslint/parser \
eslint@7 \
eslint-config-next \
eslint-config-prettier \
eslint-plugin-prettier \
eslint-plugin-simple-import-sort \
eslint-plugin-sort-destructure-keys \
eslint-plugin-sort-keys-fix
yarn add --dev @typescript-eslint/eslint-plugin \
@typescript-eslint/parser \
eslint@7 \
eslint-config-next \
eslint-config-prettier \
eslint-plugin-prettier \
eslint-plugin-simple-import-sort \
eslint-plugin-sort-destructure-keys \
eslint-plugin-sort-keys-fix
Script — package.json
Configuration — .eslintrc.json
{
"env" : {
"browser" : true ,
"node" : true
},
"extends" : [
"next/core-web-vitals" ,
"eslint:recommended" ,
"plugin:@typescript-eslint/eslint-recommended" ,
"plugin:@typescript-eslint/recommended" ,
"plugin:prettier/recommended"
],
"overrides" : [
{
"files" : [ "*.js" ],
"rules" : {
"@typescript-eslint/no-var-requires" : "off"
}
}
],
"parser" : "@typescript-eslint/parser" ,
"plugins" : [
"@typescript-eslint" ,
"sort-keys-fix" ,
"sort-destructure-keys" ,
"simple-import-sort" ,
"prettier"
],
"rules" : {
"@typescript-eslint/explicit-function-return-type" : "off" ,
"prettier/prettier" : "error" ,
"react/jsx-sort-props" : "error" ,
"react/prop-types" : "off" ,
"simple-import-sort/exports" : "error" ,
"simple-import-sort/imports" : "error" ,
"sort-destructure-keys/sort-destructure-keys" : "error" ,
"sort-keys-fix/sort-keys-fix" : "error"
},
"settings" : {
"react" : {
"version" : "detect"
}
}
}
{
"env" : {
"browser" : true ,
"node" : true
},
"extends" : [
"next/core-web-vitals" ,
"eslint:recommended" ,
"plugin:@typescript-eslint/eslint-recommended" ,
"plugin:@typescript-eslint/recommended" ,
"plugin:prettier/recommended"
],
"overrides" : [
{
"files" : [ "*.js" ],
"rules" : {
"@typescript-eslint/no-var-requires" : "off"
}
}
],
"parser" : "@typescript-eslint/parser" ,
"plugins" : [
"@typescript-eslint" ,
"sort-keys-fix" ,
"sort-destructure-keys" ,
"simple-import-sort" ,
"prettier"
],
"rules" : {
"@typescript-eslint/explicit-function-return-type" : "off" ,
"prettier/prettier" : "error" ,
"react/jsx-sort-props" : "error" ,
"react/prop-types" : "off" ,
"simple-import-sort/exports" : "error" ,
"simple-import-sort/imports" : "error" ,
"sort-destructure-keys/sort-destructure-keys" : "error" ,
"sort-keys-fix/sort-keys-fix" : "error"
},
"settings" : {
"react" : {
"version" : "detect"
}
}
}
React Native
Dependencies
yarn add --dev @react-native-community/eslint-config \
@react-native-community/eslint-plugin \
@typescript-eslint/eslint-plugin \
@typescript-eslint/parser \
eslint \
eslint-config-prettier \
eslint-plugin-prettier \
eslint-plugin-react \
eslint-plugin-react-hooks \
eslint-plugin-react-native \
eslint-plugin-simple-import-sort \
eslint-plugin-sort-destructure-keys \
eslint-plugin-sort-keys-fix
yarn add --dev @react-native-community/eslint-config \
@react-native-community/eslint-plugin \
@typescript-eslint/eslint-plugin \
@typescript-eslint/parser \
eslint \
eslint-config-prettier \
eslint-plugin-prettier \
eslint-plugin-react \
eslint-plugin-react-hooks \
eslint-plugin-react-native \
eslint-plugin-simple-import-sort \
eslint-plugin-sort-destructure-keys \
eslint-plugin-sort-keys-fix
Script — package.json
Configuration — .eslintrc.json
{
"extends" : [
"@react-native-community" ,
"plugin:@typescript-eslint/eslint-recommended" ,
"plugin:@typescript-eslint/recommended" ,
"plugin:react-hooks/recommended" ,
"plugin:prettier/recommended"
],
"parser" : "@typescript-eslint/parser" ,
"plugins" : [
"@typescript-eslint" ,
"react-hooks" ,
"react-native" ,
"react" ,
"simple-import-sort" ,
"sort-destructure-keys" ,
"sort-keys-fix" ,
"prettier"
],
"rules" : {
"@typescript-eslint/explicit-member-accessibility" : "off" ,
"@typescript-eslint/explicit-module-boundary-types" : "error" ,
"@typescript-eslint/no-use-before-define" : [
"error" ,
{
"variables" : false
}
],
"prettier/prettier" : "error" ,
"react-hooks/exhaustive-deps" : "error" ,
"react-hooks/rules-of-hooks" : "error" ,
"react-native/no-inline-styles" : "error" ,
"react-native/no-raw-text" : "error" ,
"react-native/no-unused-styles" : "error" ,
"react-native/split-platform-components" : "error" ,
"react/jsx-sort-props" : "error" ,
"simple-import-sort/exports" : "error" ,
"simple-import-sort/imports" : "error" ,
"sort-destructure-keys/sort-destructure-keys" : "error" ,
"sort-keys-fix/sort-keys-fix" : "error"
}
}
{
"extends" : [
"@react-native-community" ,
"plugin:@typescript-eslint/eslint-recommended" ,
"plugin:@typescript-eslint/recommended" ,
"plugin:react-hooks/recommended" ,
"plugin:prettier/recommended"
],
"parser" : "@typescript-eslint/parser" ,
"plugins" : [
"@typescript-eslint" ,
"react-hooks" ,
"react-native" ,
"react" ,
"simple-import-sort" ,
"sort-destructure-keys" ,
"sort-keys-fix" ,
"prettier"
],
"rules" : {
"@typescript-eslint/explicit-member-accessibility" : "off" ,
"@typescript-eslint/explicit-module-boundary-types" : "error" ,
"@typescript-eslint/no-use-before-define" : [
"error" ,
{
"variables" : false
}
],
"prettier/prettier" : "error" ,
"react-hooks/exhaustive-deps" : "error" ,
"react-hooks/rules-of-hooks" : "error" ,
"react-native/no-inline-styles" : "error" ,
"react-native/no-raw-text" : "error" ,
"react-native/no-unused-styles" : "error" ,
"react-native/split-platform-components" : "error" ,
"react/jsx-sort-props" : "error" ,
"simple-import-sort/exports" : "error" ,
"simple-import-sort/imports" : "error" ,
"sort-destructure-keys/sort-destructure-keys" : "error" ,
"sort-keys-fix/sort-keys-fix" : "error"
}
}
I'll keep updating this as I discover more useful stuff or remove redundant or incorrect stuff. If you have any suggestions, hit me up on Twitter .
