$npm install --save-dev eslint @babel/eslint-parser eslint-plugin-react eslint-plugin-react-native ... // AUTOMATIC CONFIG FILE $npm init @eslint/config //GLOBAL INSTALLATION AND USE $npm i -g eslint $eslint --init // PACKAGE.JSON { //..., "devDependencies": { "@babel/eslint-parser": "^7.18.9", "@trivago/prettier-plugin-sort-imports": "^3.3.0", "@typescript-eslint/eslint-plugin": "^5.32.0", "@typescript-eslint/parser": "^5.32.0", "eslint": "^8.21.0", "eslint-config-airbnb": "^19.0.4", "eslint-config-prettier": "^8.5.0", "eslint-plugin-import": "^2.26.0", "eslint-plugin-jsx-a11y": "^6.6.1", "eslint-plugin-react": "^7.30.1", "eslint-plugin-react-hooks": "^4.6.0" }, //... } // TSCONFIG.JSON { "compilerOptions": { "target": "es6", "lib": [ "dom", "dom.iterable", "esnext" ], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "noImplicitAny": false, "strictNullChecks": true, "forceConsistentCasingInFileNames": true, "noFallthroughCasesInSwitch": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "jsx": "react-jsx" }, "include": [ "src/**/*" ] } // .ESLINTRC { "globals": { "module": true }, "env": { "browser": true, "es2021": true }, "extends": [ "airbnb", "airbnb/hooks", "eslint:recommended", "plugin:react/recommended", "plugin:@typescript-eslint/recommended", "prettier" ], "parser": "@typescript-eslint/parser", "parserOptions": { "ecmaFeatures": { "jsx": true }, "ecmaVersion": "latest", "sourceType": "module" }, "plugins": [ "react", "@typescript-eslint" ], "rules": { "@typescript-eslint/explicit-function-return-type": 0, "@typescript-eslint/explicit-module-boundary-types": 0, "react/react-in-jsx-scope": 0, "quotes": [ "error", "double" ], "import/extensions": 0, "import/no-unresolved": 0, "linebreak-style": [ "error", "windows" ], "operator-linebreak": "off", "react/jsx-filename-extension": 0, "no-shadow": "off", "jsx-a11y/label-has-associated-control": 0, "react/jsx-no-bind": 0, "no-unused-expressions": [ "warn", { "allowShortCircuit": true, "allowTernary": true } ] } } // .PRETTIERRC { "trailingComma": "all", "importOrder": [ "^(next/(.*)$)|^(next$)", "<THIRD_PARTY_MODULES>", "next-seo.config", "^components/(.*)$", "^utils/(.*)$", "^assets/(.*)$", "^@fontsource/(.*)$", "^[./]" ], "importOrderSeparation": true, "importOrderSortSpecifiers": true }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter