{"id":21124656,"url":"https://github.com/marlosirapuan/example-react-eslint-standard","last_synced_at":"2026-05-11T03:52:09.654Z","repository":{"id":39465732,"uuid":"197403028","full_name":"marlosirapuan/example-react-eslint-standard","owner":"marlosirapuan","description":"Project example in React with eslint/standardjs/babel-plugin-root-import/react-app-rewired on VScode","archived":false,"fork":false,"pushed_at":"2022-12-10T22:44:53.000Z","size":3409,"stargazers_count":1,"open_issues_count":19,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-14T11:29:37.570Z","etag":null,"topics":["babel-plugin-import","babel-plugin-root-import","eslint","eslint-config","eslint-standard","react","react-app-rewired","standard-js"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/marlosirapuan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-07-17T14:14:26.000Z","updated_at":"2020-07-31T12:24:51.000Z","dependencies_parsed_at":"2022-08-29T03:22:54.624Z","dependency_job_id":null,"html_url":"https://github.com/marlosirapuan/example-react-eslint-standard","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/marlosirapuan/example-react-eslint-standard","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marlosirapuan%2Fexample-react-eslint-standard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marlosirapuan%2Fexample-react-eslint-standard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marlosirapuan%2Fexample-react-eslint-standard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marlosirapuan%2Fexample-react-eslint-standard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marlosirapuan","download_url":"https://codeload.github.com/marlosirapuan/example-react-eslint-standard/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marlosirapuan%2Fexample-react-eslint-standard/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32880788,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-10T13:40:02.631Z","status":"online","status_checked_at":"2026-05-11T02:00:05.975Z","response_time":120,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babel-plugin-import","babel-plugin-root-import","eslint","eslint-config","eslint-standard","react","react-app-rewired","standard-js"],"created_at":"2024-11-20T04:17:17.574Z","updated_at":"2026-05-11T03:52:09.641Z","avatar_url":"https://github.com/marlosirapuan.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Project example in React with eslint/standardjs/babel-plugin-root-import on VScode\n\nHow to configure VSCode to work with eslint, standardjs and babel-plugin-root-import and react-app-rewired.\n\n### Requisites\n```\nyarn 1.16.0+\nnode 10.16+\ncreate-react-app\n```\n\nTo install **create-react-app cli**:\n```\nyarn global add create-react-app\n```\n\n### Essential Extensions\n\n* [Prettier-Standard](https://marketplace.visualstudio.com/items?itemName=numso.prettier-standard-vscode)\n* [Beautify](https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify)\n* [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)\n\n### Useful Extensions\n\n* [indent-rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)\n* [Import Cost](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost)\n* [Bracket Pair Colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer)\n\n\n### Steps\n\n```\nyarn add eslint -D\nyarn eslint --init\n\n[x] To check syntax, find problems, and enforce code style\n[x] JavaScript modules (import/export)\n[x] React\n[x] Browser\n[x] Use a popular style guide\n[x] Standard\n[x] JavaScript\n```\n\nConfirm with `\"Y\"`\n\nNow, remove `package-lock.json` and run `yarn install` again.\n\nInstall these libs as devDependecies:\n```\nyarn add eslint-plugin-react-hooks eslint-plugin-jsx-a11y eslint-import-resolver-babel-plugin-root-import babel-plugin-root-import customize-cra react-app-rewired -D\n```\n\nCreate `config-overrides.js` file on root project and add this code:\n\n```\nconst { override, addBabelPlugins } = require('customize-cra')\n\nmodule.exports = override(\n  ...addBabelPlugins([\n    'babel-plugin-root-import',\n    {\n      rootPathPrefix: '~',\n      rootPathSuffix: 'src'\n    }\n  ])\n)\n```\n\nCreate `jsconfig.json` file on root project and add this code:\n```\n{\n  \"compilerOptions\": {\n    \"allowSyntheticDefaultImports\": true,\n    \"baseUrl\": \"src\",\n    \"paths\": {\n      \"~/*\": [\n        \"./*\"\n      ]\n    }\n  }\n}\n```\n\nCreate `.env` file on root project and add:\n```\nSKIP_PREFLIGHT_CHECK=true\n```\nThis avoids ESLint error:\n\n```\nThe react-scripts package provided by Create React App requires a dependency:\n\n  \"eslint\": \"^5.16.0\"\n```\n\nAnd change `.eslintrc.js` to this:\n\n```\nmodule.exports = {\n  env: {\n    browser: true,\n    jest: true,\n    es6: true\n  },\n  extends: ['standard'],\n  globals: {\n    Atomics: 'readonly',\n    SharedArrayBuffer: 'readonly',\n    __DEV__: true\n  },\n  parserOptions: {\n    ecmaFeatures: {\n      jsx: true\n    },\n    ecmaVersion: 2018,\n    sourceType: 'module'\n  },\n  plugins: ['react', 'jsx-a11y', 'import', 'react-hooks'],\n  rules: {\n    'import/prefer-default-export': 'off',\n    'global-require': 'off',\n    'no-unused-vars': ['error', { argsIgnorePattern: '^_' }],\n    'no-console': ['error', { allow: ['tron'] }],\n    'no-param-reassign': 'off',\n    'no-underscore-dangle': 'off',\n    'no-duplicate-imports': ['error', { includeExports: true }],\n    'react/jsx-uses-react': 1,\n    'react/jsx-filename-extension': ['error', { extensions: ['.js', '.jsx'] }],\n    'react/jsx-one-expression-per-line': 'off',\n    'react/prop-types': 'off',\n    'react-hooks/rules-of-hooks': 'error',\n    'react-hooks/exhaustive-deps': 'warn',\n    'react/jsx-uses-react': 'error',\n    'react/jsx-uses-vars': 'error'\n  },\n  settings: {\n    'import/resolver': {\n      'babel-plugin-root-import': {\n        rootPathSuffix: 'src'\n      }\n    }\n  }\n}\n```\n\nChange `scripts` on `package.json` to this (**start**, **build** and **test** only!):\n\n```\n  \"scripts\": {\n    \"start\": \"react-app-rewired start\",\n    \"build\": \"react-app-rewired build\",\n    \"test\": \"react-app-rewired test\",\n    \"eject\": \"react-scripts eject\"\n  },\n```\n\nSave, restart VSCode and run your project `yarn start`. See in the `app.js` file how to import a file.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarlosirapuan%2Fexample-react-eslint-standard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarlosirapuan%2Fexample-react-eslint-standard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarlosirapuan%2Fexample-react-eslint-standard/lists"}