ExpoにESLintとPrettierの導入する

はじめに

ゆとり世代の中野です。

今回チャレンジした内容は【ESLintとPrettierの導入する】です。

さっそくチャレンジについて書いていきます。

チャレンジする背景

Projectを新規作成した場合は当然ESLintとPrettierもないのでそれらを導入する忘備録を作りたい

チャレンジ内容

ExpoにESLintとPrettierの導入する

前提

新規作成したTypescriptのProject

ESLint

必要なpackageの導入

yarn add -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react-hooks eslint-plugin-react

.eslintrc.jsを追加

yarn eslint --init

module.exports = {
  env: {
    es2021: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: ['react', '@typescript-eslint', 'react-hooks'],
  rules: {
    indent: ['error', 2],
    'linebreak-style': ['error', 'unix'],
    quotes: ['error', 'single'],
    semi: ['error', 'always'],
    'react-hooks/rules-of-hooks': 'error',
    'react-hooks/exhaustive-deps': 'warn',
    'react/display-name': 0,
    'react/prop-types': 0,
  },
  settings: {
    react: {
      version: 'detect',
    },
  },
};

Prettier

必要なpackageの導入

yarn add -D prettier eslint-config-prettier

.prettierrc.jsを追加

module.exports = {
  jsxSingleQuote: true,
  singleQuote: true,
  trailingComma: 'all',
  printWidth: 100,
  endOfLine: 'lf',
};

VSCodeの設定

.vscode/settings.jsonに設定を追加

保存時に自動で整形されるようになります

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

参考元

React Native(Expo + TypeScript)用にEslint,Prettierの設定をする

eslint-plugin-prettier は非推奨のため導入していないです
設定周りを参考にしました

ESLint + Prettierを導入したTypeScript開発環境

パッケージを参考にしました

まとめ

ESLintのpackageと設定を追加
Prettierのpackageと設定を追加
VSCodeの設定を追加

さいごに

これでコードが整形されるようになりました

yutanakano

WEBエンジニア

大阪生まれのゆとり世代です

趣味はバイクでツーリングに行くこと

愛車は Ninja ZX-25R SE KRT EDITION

Expoでプロダクトを作っています