{"id":15970,"date":"2021-12-26T18:04:43","date_gmt":"2021-12-26T09:04:43","guid":{"rendered":"http:\/\/www.code-magagine.com\/?p=15970"},"modified":"2023-05-27T23:24:46","modified_gmt":"2023-05-27T14:24:46","slug":"%e3%80%90typescript%e3%80%91%e3%80%8ceslint%e3%80%8d%e3%81%ae%e5%88%9d%e6%9c%9f%e8%a8%ad%e5%ae%9a%e3%82%b3%e3%83%9e%e3%83%b3%e3%83%89","status":"publish","type":"post","link":"http:\/\/www.code-magagine.com\/?p=15970","title":{"rendered":"\u3010TypeScript\u3011\u300cESlint\u300d\u306e\u521d\u671f\u8a2d\u5b9a\u30b3\u30de\u30f3\u30c9"},"content":{"rendered":"<h2>\u30b3\u30de\u30f3\u30c9<\/h2>\n<pre class=\"lang:default decode:true \">npx eslint --init<\/pre>\n<h2>ESlint\u3092\u3069\u306e\u3088\u3046\u306b\u4f7f\u3044\u307e\u3059\u304b\uff1f(How would you like to use ESLint?)<\/h2>\n<pre class=\"lang:default decode:true\">  To check syntax only(\u69cb\u6587\u30c1\u30a7\u30c3\u30af\u306e\u307f\uff09\r\n  To check syntax and find problems\uff08\u69cb\u6587\u30c1\u30a7\u30c3\u30af\u3068\u554f\u984c\u306e\u63a2\u7d22\uff09\r\n  To check syntax, find problems, and enforce code style\uff08\u69cb\u6587\u30c1\u30a7\u30c3\u30af\u3068\u554f\u984c\u306e\u63a2\u7d22\u3068\u3001\u30b3\u30fc\u30c9\u30b9\u30bf\u30a4\u30eb\u306e\u9069\u7528\uff09<\/pre>\n<p>\u7279\u306b\u3001\u306a\u3051\u308c\u3070\u300cTo check syntax, find problems, and enforce code style\u300d\u3092\u9078\u3093\u3067\u304a\u3051\u3070\u826f\u3044\u3067\u3057\u3087\u3046\u3002<\/p>\n<h2>\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u4f7f\u3063\u3066\u3044\u308b\u30e2\u30b8\u30e5\u30fc\u30eb\u306e\u7ba1\u7406\u65b9\u6cd5\u306f\uff1f\uff08What type of modules does your project use?\uff09<\/h2>\n<pre class=\"lang:default decode:true\">JavaScript modules (import\/export)\r\nCommonJS (require\/exports)\r\nNone of these<\/pre>\n<p>React\u3092\u4f7f\u3046\u5834\u5408\u306f\u300cJavaScript modules (import\/export)\u300d\u3092\u9078\u3093\u3067\u304a\u3051\u3070\u826f\u3044\u3067\u3057\u3087\u3046\u3002Node.js\u74b0\u5883\u3068\u304b\u3067\u3042\u308c\u3070\u3001\u300cCommonJS (require\/exports)\u300d\u306b\u306a\u308b\u3067\u3057\u3087\u3046\u3002<\/p>\n<h2>\u3069\u306e\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3092\u4f7f\u3063\u3066\u308b\u304b\uff08Which framework does your project use?\uff09<\/h2>\n<pre class=\"lang:default decode:true \">React\r\nVue.js\r\nNone of these<\/pre>\n<p>\u666e\u901a\u306b\u9078\u3073\u307e\u3057\u3087\u3046\u3002<\/p>\n<h2>TypeScript\u3092\u4f7f\u3063\u3066\u308b\u304b\uff1f\uff08Does your project use TypeScript? \u203a No \/ Yes\uff09<\/h2>\n<p>\u4f7f\u3063\u3066\u3044\u308b\u5834\u5408\u306f\u300cYes\u300d\u3067\u554f\u984c\u306a\u3044\u3067\u3059\u3002<\/p>\n<h2>\u30b3\u30fc\u30c9\u306e\u5b9f\u884c\u74b0\u5883\u306f\uff1f\uff08Where does your code run?\uff09<\/h2>\n<pre class=\"lang:default decode:true \">Browser\r\nNode<\/pre>\n<p>React\u3067\u3042\u308c\u3070\u3001\u30d6\u30e9\u30a6\u30b6\u306a\u306e\u3067Browser\u3092\u9078\u3093\u3067\u304a\u3051\u3070\u826f\u3044\u3067\u3057\u3087\u3046\u3002<\/p>\n<h2>\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u4f7f\u3046\u30b9\u30bf\u30a4\u30eb\u306f\u3069\u306e\u3088\u3046\u306b\u5b9a\u7fa9\u3057\u307e\u3059\u304b\uff1f\uff08How would you like to define a style for your project?\uff09<\/h2>\n<pre class=\"lang:default decode:true\">Use a popular style guide\uff08\u4eba\u6c17\u306e\u30b9\u30bf\u30a4\u30eb\u30ac\u30a4\u30c9\uff09\r\nAnswer questions about your style\uff08\u81ea\u5206\u3067\u6c7a\u3081\u308b\uff09\r\nInspect your JavaScript file(s)<\/pre>\n<p>\u7121\u96e3\u306b<span style=\"color: #ff0000;\"><strong>\u300cUse a popular style guide\u300d<\/strong><\/span>\u3092\u9078\u3093\u3067\u304a\u3051\u3070\u826f\u3044\u3067\u3057\u3087\u3046\u3002<\/p>\n<h2>\u3069\u306e\u30b9\u30bf\u30a4\u30eb\u30ac\u30a4\u30c9\u3092\u4f7f\u3044\u307e\u3059\u304b\uff1f\uff08Which style guide do you want to follow?\uff09<\/h2>\n<pre class=\"lang:default decode:true \">Airbnb: https:\/\/github.com\/airbnb\/javascript\r\nStandard: https:\/\/github.com\/standard\/standard\r\nGoogle: https:\/\/github.com\/google\/eslint-config-google\r\nXO: https:\/\/github.com\/xojs\/eslint-config-xo<\/pre>\n<p>\u73fe\u72b6\u3001\u4e00\u756a\u4eba\u6c17\u306a\u306e\u306f<span style=\"color: #ff0000;\"><strong>\u300cAirbnb\u300d<\/strong><\/span>\u3067\u3057\u3087\u3046\u3002<\/p>\n<h2>\u8a2d\u5b9a\u30d5\u30a1\u30a4\u30eb\u3092\u3069\u306e\u5f62\u5f0f\u3067\u4f5c\u6210\u3059\u308b\u304b\uff1f\uff08What format do you want your config file to be in?\uff09<\/h2>\n<pre class=\"lang:default decode:true \">JavaScript\r\nYAML\r\nJSON<\/pre>\n<p>\u7121\u96e3\u306bJSON\u306a\u3069\u3092\u9078\u3093\u3067\u304a\u3051\u3070\u826f\u3044\u3067\u3057\u3087\u3046\u3002<\/p>\n<h2>\u3059\u3050\u30d1\u30c3\u30b1\u30fc\u30b8\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059\u304b\uff1f\uff08Would you like to install them now with npm?\uff09<\/h2>\n<p>\u306f\u3044\u3092\u9078\u3076\u3068\u4ee5\u4e0b\u306e\u30d1\u30c3\u30b1\u30fc\u30b8\u3068eslint\u306e\u8a2d\u5b9a\u30d5\u30a1\u30a4\u30eb\uff08.eslintrc.json\uff09\u304c\u751f\u6210\u3055\u308c\u307e\u3059\u3002<\/p>\n<h3>\u30d1\u30c3\u30b1\u30fc\u30b8<\/h3>\n<pre class=\"lang:default decode:true \">eslint-plugin-react\r\n@typescript-eslint\/eslint-plugin\r\neslint-config-airbnb\r\neslint\r\neslint-plugin-import\r\neslint-plugin-jsx-a11y\r\neslint-plugin-react-hooks\r\n@typescript-eslint\/parser<\/pre>\n<h2>\u8a2d\u5b9a\u5f8c<\/h2>\n<h3>Strings must use singlequote.(quotes)<\/h3>\n<p>\u30b7\u30f3\u30b0\u30eb\u30b3\u30fc\u30c6\u30fc\u30b7\u30e7\u30f3\u3067\u306a\u3044\u3068\u30a8\u30e9\u30fc\u306b\u306a\u308b\u3002pretter\u306e\u6574\u5f62\u306e\u90aa\u9b54\u306b\u306a\u308b\u306e\u3067\u89e3\u9664\u3057\u3066\u304a\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n<pre class=\"lang:default decode:true\">\"quotes\": \"off\"<\/pre>\n<h2>JSX not allowed in files with extension<\/h2>\n<p>\u62e1\u5f35\u5b50\u7cfb\u30a8\u30e9\u30fc\u304c\u51fa\u305f\u3002\u306e\u3067\u4ee5\u4e0b\u306e\u30eb\u30fc\u30eb\u3092\u8ffd\u52a0\u3059\u308b\u3002<\/p>\n<pre class=\"lang:default decode:true\">\"react\/jsx-filename-extension\": [1, { \"extensions\": [\".ts\", \".tsx\"] }]<\/pre>\n<h2>\u305d\u306e\u4ed6<\/h2>\n<p>\u666e\u901a\u306b\u5b9f\u88c5\u3059\u308b\u3068\u3053\u306e\u8fba\u306e\u30a8\u30e9\u30fc\u306b\u5f15\u3063\u304b\u304b\u3063\u305f\u306e\u3067\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u8a2d\u5b9a\u306b\u3057\u3066\u304a\u3044\u305f\u65b9\u304c\u826f\u3055\u305d\u3046\u3002<\/p>\n<pre class=\"lang:default decode:true  \">  \"rules\": {\r\n    \"quotes\": \"off\",\r\n    \"react\/jsx-filename-extension\": [1, { \"extensions\": [\".ts\", \".tsx\"] }],\r\n    \"react\/function-component-definition\": [\r\n      2,\r\n      {\r\n        \"namedComponents\": \"arrow-function\",\r\n        \"unnamedComponents\": \"arrow-function\"\r\n      }\r\n    ],\r\n    \"import\/no-unresolved\": \"off\",\r\n    \"import\/extensions\": [\".js\", \".jsx\", \".json\", \".ts\", \".tsx\"],\r\n    \"trailing-comma\": [\r\n      true,\r\n      {\r\n        \"singleline\": \"never\",\r\n        \"multiline\": {\r\n          \"objects\": \"always\",\r\n          \"arrays\": \"always\",\r\n          \"functions\": \"never\",\r\n          \"typeLiterals\": \"ignore\"\r\n        }\r\n      }\r\n    ]\r\n  }<\/pre>\n","protected":false},"excerpt":{"rendered":"\u30b3\u30de\u30f3\u30c9 npx eslint --init ESlint\u3092\u3069\u306e\u3088\u3046\u306b\u4f7f\u3044\u307e\u3059\u304b\uff1f(How would you like to use ESLint?) To check syntax only(\u69cb\u6587\u30c1\u30a7\u30c3\u30af\u306e\u307f\uff09 To [&hellip;]","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[101],"tags":[],"_links":{"self":[{"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=\/wp\/v2\/posts\/15970"}],"collection":[{"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=15970"}],"version-history":[{"count":7,"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=\/wp\/v2\/posts\/15970\/revisions"}],"predecessor-version":[{"id":20599,"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=\/wp\/v2\/posts\/15970\/revisions\/20599"}],"wp:attachment":[{"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=15970"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=15970"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=15970"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}