My Brain
My Brain

Eslint

My Own Packages

  • Install
yarn add eslint prettier -D
npx install-peerdeps --dev @gbrachetta/eslint-config
  • Add to package.json
"eslintConfig": {
  "extends": "@gbrachetta/eslint-config"
},
"prettier": "@gbrachetta/prettier-config"
  • To extend or overwrite configuration, add
// .eslintrc.json
{
  "extends": "@gbrachetta/eslint-config",
  "rules": {
    // you can edit this configuration as usual
  }
}

// .prettierrc.json
{
  "@gbrachetta/prettier-config"
}

Previous Configuration

// package.json
{
  "devDependencies": {
    "babel-eslint": "^10.1.0",
    "eslint": "^7.24.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-prettier": "^8.2.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^3.4.0",
    "eslint-plugin-react": "^7.23.2",
    "eslint-plugin-react-hooks": "^4.2.0"
  }
}
yarn add -D babel-eslint eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks
// .eslintrc.json
{
    "env": {
        "browser": true,
        "commonjs": true,
        "es2021": true,
        "node": true
    },
    "parser": "babel-eslint",
    "extends": [
        "eslint:recommended",
        "airbnb",
        "airbnb/hooks",
        "plugin:react/recommended",
        "plugin:import/errors",
        "plugin:import/warnings",
        "plugin:jsx-a11y/recommended",
        "plugin:react-hooks/recommended",
        "prettier"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 11,
        "sourceType": "module"
    },
    "settings": {
        "react": {
            "version": "detect"
        }
    },
    "plugins": [
        "react",
        "react-hooks"
    ],
    "rules": {
        "import/order": [
            "error",
            {
                "groups": [
                    "builtin",
                    "external",
                    "parent",
                    "sibling",
                    "index"
                ],
                "newlines-between": "always",
                "alphabetize": {
                    "order": "asc",
                    "caseInsensitive": true
                }
            }
        ],
        "sort-imports": [
            "error",
            {
                "ignoreCase": false,
                "ignoreDeclarationSort": false,
                "ignoreMemberSort": false,
                "memberSyntaxSortOrder": [
                    "all",
                    "multiple",
                    "single",
                    "none"
                ],
                "allowSeparatedGroups": true
            }
        ],
        "react/no-unescaped-entities": 0,
        "react/react-in-jsx-scope": 0,
        "react/jsx-filename-extension": [
            1,
            {
                "extensions": [
                    ".js",
                    ".jsx"
                ]
            }
        ],
        "react/display-name": 1
    }
}
// .prettierrc.json
{
  "arrowParens": "always",
  "bracketSpacing": true,
  "endOfLine": "lf",
  "jsxBracketSameLine": false,
  "jsxSingleQuote": false,
  "parser": "babel",
  "printWidth": 80,
  "requirePragma": false,
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "all"
}

Backlinks