Closed18

ReactNativeにESlintとPrettierを入れる

Yuma KimuraYuma Kimura
➜  react-native-shop-app git:(master) ✗ yarn eslint --init
yarn run v1.22.19
$ /Users/kimura_yuma/develop/sandbox/react-native-shop-app/node_modules/.bin/eslint --init
You can also run this command directly using 'npm init @eslint/config'.
✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · react
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ How would you like to define a style for your project? · prompt
✔ What format do you want your config file to be in? · JavaScript
✔ What style of indentation do you use? · 4
✔ What quotes do you use for strings? · single
✔ What line endings do you use? · unix
✔ Do you require semicolons? · No / Yes
The config that you've selected requires the following dependencies:

eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
✔ Would you like to install them now? · No / Yes
✔ Which package manager do you want to use? · yarn
Yuma KimuraYuma Kimura
diff --git a/package.json b/package.json
index 8fd3a77..8e7c2ed 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,8 @@
     "start": "expo start",
     "android": "expo start --android",
     "ios": "expo start --ios",
-    "web": "expo start --web"
+    "web": "expo start --web",
+    "lint": "eslint --ext .tsx --ext .ts src/"
   },
Yuma KimuraYuma Kimura
yarn lint --fix --rule 'quotes:[error]'

でエラー出てたやつが修正された。

yarn lint --fix --rule 'quotes:[error, double]'

とかで修正方法を変えられるっぽい

Yuma KimuraYuma Kimura

いや、指定したルール以外も修正されている、、、

Yuma KimuraYuma Kimura

vscodeでprittierのプラグインのインストールと、"editor.formatOnSave": true,の設定だけでは保存時にフォーマットされなかった。

  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

を追記したら保存時にフォーマットされるようになった。

このスクラップは2022/08/29にクローズされました