{"id":1327,"date":"2021-05-17T19:00:00","date_gmt":"2021-05-17T10:00:00","guid":{"rendered":"https:\/\/ito-u-oti.com\/?p=1327"},"modified":"2021-05-17T16:28:29","modified_gmt":"2021-05-17T07:28:29","slug":"react-eslint-setup","status":"publish","type":"post","link":"https:\/\/ito-u-oti.com\/?p=1327","title":{"rendered":"[React.js]create-react-app\u306elint\u304b\u3089ESLint\u3078\u79fb\u884c\u3059\u308b"},"content":{"rendered":"\n

create-react-app\u306b\u3082\u30c7\u30d5\u30a9\u30eb\u30c8\u3067eslint\u304c\u5165\u3063\u3066\u3044\u3066\u3001eslint\u30b3\u30de\u30f3\u30c9\u3082\u4f7f\u3048\u308b\u306e\u3067\u3059\u304c\u3001
react-scripts\u3067\u306e\u8d77\u52d5\u304b\u3089\u5909\u3048\u308b\u6642\u306bESLint\u3092\u6539\u3081\u3066\u5c0e\u5165\u3057\u3066\u4f7f\u3048\u308b\u3088\u3046\u306b\u3057\u305f\u306e\u3067\u305d\u306e\u307e\u3068\u3081\u3067\u3059\u3002<\/p>\n\n\n\n

monorepo\u74b0\u5883\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u5b9f\u884c\u65b9\u6cd5\u3092react-app-rewired\u306b\u5909\u3048\u305f\u308a\u3001
\u30c6\u30b9\u30c8\u306e\u5b9f\u884c\u65b9\u6cd5\u3092jest\u306b\u5909\u3048\u305f\u308a\u3057\u3066\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3057\u305f\u4e00\u74b0\u3067\u3059\u3002<\/p>\n\n\n\n

\u30d7\u30e9\u30b0\u30a4\u30f3\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/h2>\n\n\n
\nyarn add --dev eslint @typescript-eslint\/eslint-plugin @typescript-eslint\/parser eslint-config-prettier eslint-plugin-jest eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks prettier\n<\/pre><\/div>\n\n\n
eslint \u3067\u89e3\u6790\u5bfe\u8c61\u304b\u3089\u9664\u5916\u3057\u305f\u3044\u3082\u306e\u3092\u6307\u5b9a<\/h2>\n\n\n\n
package.json\u306beslintIgnore\u9805\u76ee\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n\n\n
\n{\n  ...\n  "eslintIgnore": [\n    "**\/build\/**\/*.js",\n    "**\/coverage\/**\/*.js",\n    "**\/*.test.ts",\n    "**\/*.test.tsx",\n    "**\/*.stories.tsx"\n  ]\n  ...\n}\n<\/pre><\/div>\n\n\n
script \u306e\u8ffd\u52a0<\/h2>\n\n\n\n
package.json\u306bESLint\u306e\u5b9f\u884c\u30b3\u30de\u30f3\u30c9\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n\n\n
\n{\n  ...\n  "script": {\n    "lint_check": "yarn eslint --ext .js,.jsx,.ts,.tsx .",\n    "lint": "yarn eslint --ext .js,.jsx,.ts,.tsx -f json -o .\/report\/eslint-report.json"\n  }\n  ...\n}\n<\/pre><\/div>\n\n\n
\u30dd\u30a4\u30f3\u30c8\u3068\u3057\u3066\u306f\u3001\u305f\u3060\u306eeslint\u30b3\u30de\u30f3\u30c9\u306e\u5b9f\u884c\u3060\u3068\u89e3\u6790\u5bfe\u8c61\u306e\u30d5\u30a1\u30a4\u30eb\u306fjs\u3060\u3051\u3068\u306a\u308a\u3001typescript\u3092\u8a8d\u8b58\u3057\u3066\u304f\u308c\u307e\u305b\u3093\u3002<\/p>\n\n\n\n
\u306a\u306e\u3067\u3001 --ext<\/code> \u30aa\u30d7\u30b7\u30e7\u30f3\u3092\u4f7f\u3063\u3066typescript\u306e\u30d5\u30a1\u30a4\u30eb\u3082lint\u5bfe\u8c61\u306b\u8a2d\u5b9a\u3057\u3066\u307e\u3059\u3002<\/p>\n\n\n\n
\u305d\u3057\u3066-f<\/code>\u30aa\u30d7\u30b7\u30e7\u30f3\u3068-o<\/code>\u30aa\u30d7\u30b7\u30e7\u30f3\u3092\u4f7f\u3044\u3001json\u5f62\u5f0f\u3067\u30ec\u30dd\u30fc\u30c8\u30d5\u30a1\u30a4\u30eb\u3092\u51fa\u529b\u3059\u308b\u3088\u3046\u306b\u8a2d\u5b9a\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n
.eslintrc.yml <\/code>\u306e\u4f5c\u6210<\/h2>\n\n\n
\nenv:\n  es2020: true\n  jest\/globals: true\nparser: '@typescript-eslint\/parser'\nparserOptions:\n  project: .\/tsconfig.json\n  ecmaFeatures:\n    jsx: true\nplugins:\n  - react\n  - jest\n  - '@typescript-eslint'\nsettings:\n  react:\n    version: detect\n  jest:\n    version: 26\nextends:\n  - eslint:recommended\n  - plugin:@typescript-eslint\/eslint-recommended\n  - plugin:@typescript-eslint\/recommended\n  - plugin:jest\/recommended\n  - prettier\nrules:\n  '@typescript-eslint\/explicit-function-return-type': off\n  '@typescript-eslint\/ban-types': off\n  '@typescript-eslint\/explicit-module-boundary-types': off\n  '@typescript-eslint\/no-explicit-any': off\n  'jest\/no-conditional-expect': off\n  'jest\/no-try-expect': off\n  'jest\/no-jasmine-globals': off\n<\/pre><\/div>\n\n\n
\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u305f\u30d7\u30e9\u30b0\u30a4\u30f3\u3068\u8a2d\u5b9a\u30d5\u30a1\u30a4\u30eb\u306e\u30de\u30c3\u30d4\u30f3\u30b0<\/p>\n\n\n\n
yarn add\u3057\u305f\u30d1\u30c3\u30b1\u30fc\u30b8<\/th>.eslintrc.yml\u306e\u8a2d\u5b9a<\/th><\/tr><\/thead>
eslint<\/td><\/td><\/tr>
@typescript-eslint\/eslint-plugin<\/td>extends
    – plugin:@typescript-eslint\/eslint-recommended<\/td><\/tr>
@typescript-eslint\/parser<\/td>parser: ‘@typescript-eslint\/parser’<\/td><\/tr>
eslint-config-prettier<\/td>extends
    – prettier<\/td><\/tr>
eslint-plugin-jest<\/td>plugins
    – ‘jest’<\/td><\/tr>
eslint-plugin-jsx-a11y<\/td>plugins
    – ‘jsx-a11y’<\/td><\/tr>
eslint-plugin-react<\/td>extends:<\/code>
    - eslint:recommended<\/code>
    - plugin:react\/recommended<\/code><\/td><\/tr>
eslint-plugin-react-hooks<\/td>extends
    – plugin:react-hooks\/recommended<\/td><\/tr>
prettier<\/td><\/td><\/tr>
<\/td><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
jest\u306e\u30d0\u30fc\u30b8\u30e7\u30f3\u6307\u5b9a\u306b\u3064\u3044\u3066<\/h3>\n\n\n
\n  jest:\n    version: 26\n<\/pre><\/div>\n\n\n
vscode\u3067\u958b\u767a\u3057\u3066\u3044\u308b\u5834\u5408\u3001vscode\u306elint\u6a5f\u80fd\u3068project\u306eESLint\u304c\u565b\u307f\u5408\u308f\u305avscode\u4e0a\u3067\u30a8\u30e9\u30fc\u30e1\u30c3\u30bb\u30fc\u30b8\u304c\u983b\u7e41\u306b\u8868\u793a\u3055\u308c\u308b\u5834\u5408\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
\u305d\u306e\u969b\u306e\u56de\u907f\u7b56\u3068\u3057\u3066ESLint\u306e\u8a2d\u5b9a\u4e0a\u3067jest\u306e\u30d0\u30fc\u30b8\u30e7\u30f3\u3092\u6307\u5b9a\u3059\u308b\u3068\u89e3\u6d88\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n
\u53c2\u8003\uff1aUnable to detect Jest version in create-react-app project<\/a><\/p>\n\n\n\n
(Option) vscode \u306e settings.json \u3092\u4f5c\u6210<\/h2>\n\n\n\n
vscode\u3067\u958b\u767a\u3057\u3066\u3044\u308b\u5834\u5408\u3001vscode\u4e0a\u3067\u306e\u8a2d\u5b9a\u3092\u8ffd\u52a0\u3057\u3066\u304a\u304d\u307e\u3059\u3002<\/p>\n\n\n\n
[rootProject]\/.vscode\/settings.json<\/p>\n\n\n
\n{\n  "files.autoSave": "afterDelay",\n  "prettier.jsxBracketSameLine": true,\n  "prettier.jsxSingleQuote": true,\n  "prettier.packageManager": "yarn",\n  "prettier.printWidth": 140,\n  "prettier.singleQuote": true,\n  "eslint.packageManager": "yarn",\n  "eslint.validate": ["typescript", "typescriptreact"],\n  "eslint.enable": true\n}\n<\/pre><\/div>\n\n\n
\u95a2\u9023<\/h2>\n\n\n\n
[React.js]monorepo\u74b0\u5883\u3092\u69cb\u7bc9\u3059\u308b+typescript<\/a><\/p>\n\n\n\n
[React.js]dotenv\u3092\u5229\u7528\u3057\u3066\u74b0\u5883\u5dee\u5206\u3092\u5438\u53ce\u3059\u308b<\/a><\/p>\n\n\n\n
[React.js]jest\u3068jest-html-reporters\u306e\u5c0e\u5165<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
create-react-app\u306b\u3082\u30c7\u30d5\u30a9\u30eb\u30c8\u3067eslint\u304c\u5165\u3063\u3066\u3044\u3066\u3001eslint\u30b3\u30de\u30f3\u30c9\u3082\u4f7f\u3048 […]<\/p>\n","protected":false},"author":1,"featured_media":1314,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[298],"tags":[301,295,296],"class_list":["post-1327","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-js","tag-eslint","tag-react-js","tag-typescript"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t