Logo
    ExpoにESLintとPrettierの導入する

    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

    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でプロダクトを作っています

    image

    ©ゆとりちゃれんじ

    GitHubXInstagram
    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',
    },
  },
};