React Native

ESLintとPrettierの導入【React Native & TypeScript】

投稿日:2020年9月27日 更新日:

React NativeとTypeScriptで開発する場合の便利なツールを知りたい。
ESLintやPrettierをプロジェクトやVSCodeに導入する方法が知りたい。

このような疑問に答えます。

開発するにあたり、開発を効率的に進めれるための便利なツールが多数存在します。

その中で、ReactNativeとTypeScriptプロジェクトの開発で私が普段使っている、ESLintとPrettierの導入方法を紹介します。

この記事の内容

 

※この記事は、TypeScriptが導入されてるReact Nativeプロジェクトが作成されていること、VSCodeがインストールされていることを前提としています。

・プロジェクトの作成に関しては「React Nativeの環境構築の手順【Windows版】」と「React NativeプロジェクトにTypeScriptを導入する手順」をご覧ください。
・VSCodeのインストールに関しては「Visual Studio Codeのインストールと日本語化の手順【Windows版】」をご覧ください。

<スポンサーリンク>

ESLintをReact Native & TypeScriptプロジェクトに導入する手順

ESLintとは

ESLintはJavaScriptのための静的コード分析ツールです。

コードの不具合を見つけたり、括弧やスペースの使い方などのスタイルを統一するために使われています。

ESLintを導入することで、修正箇所の位置がはっきりとするので、開発の時短につながります。

プロジェクトにESLintの導入

React Native & TypeScriptプロジェクトESLintを導入します。

① コマンドプロンプト、またはPowerShellでESlintを導入したいプロジェクトフォルダ直下へ移動します。

② 以下のコマンドを実行します。

npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-prettier eslint-plugin-prettier eslint-plugin-react @react-native-community/eslint-config eslint-plugin-jest

③ .eslintrc.jsファイルを開き、以下を追加します。

module.exports = {
  root: true,
  extends: ['@react-native-community', 'prettier', 'prettier/@typescript-eslint'],
};

以上でプロジェクへのESLintの導入が出来ました。

VSCodeにESLintの導入

VSCodeにESLintを導入します。
すでに導入済みの方は、このステップは不要です。

① VSCodeを起動して、左サイドバーの四角4つのアイコンを選択します。

② 検索欄に「eslint」と入力し、「ESLint」を選択し、「install」をクリックします。

ESLint-settings-001

③ サイドバー下側の歯車(管理)ボタンを選択し、「設定」をクリックします。

④ 右上のファイルアイコンを選択します。

ESLint-settings-002

⑤ 開かれたファイルに以下を追加します。

{
  "eslint.validate":[
    "typescript",
    "typescriptreact"
  ]
}

以上でVSCodeへのESLintの導入ができました。

ESLintが導入できたことを確認

プロジェクト内のTypeScriptファイルを開き、連続でスペースを入れたり、連続で改行してみてください。

スペースの部分や改行の部分に赤い警告線が引かれて、フォーカスしたときにESLintの警告文が表示されたら無事ESLintが導入できています。

反映されていない場合は、一度VSCodeを再起動してみてください。

 

PrettierをReact Native & TypeScriptプロジェクトに導入する手順

Prettierとは

Prettierは、Node.js上で動作するコードフォーマッターです。
ソースコードを自動で整形してくれます。

Prettierを使うことにより、細かいスペースや改行などを気にせずにコードを書いても、自動で整形してくれるので、作業効率の向上につながります。

プロジェクトにPrettierの導入

① コマンドプロンプト、またはPowerShellでPrettierを導入したいプロジェクトフォルダ直下へ移動します。

② 以下のコマンドを実行します。

npm install --save-dev prettier

③ .prettierrc.jsファイルを開き、お好みの設定を追加します。

参考までに、私が使用してる設定を載せます。

module.exports = {
  arrowParens: 'avoid',
  bracketSpacing: true,
  endOfLine: 'lf',
  jsxBracketSameLine: false,
  jsxSingleQuote: false,
  printWidth: 120,
  quoteProps: 'as-needed',
  semi: true,
  singleQuote: true,
  tabWidth: 2,
  trailingComma: 'all',
  useTabs: false,
};

以上でプロジェクへのPrettierの導入が出来ました。

VSCodeにPrettierの導入

VSCodeにPrettierを導入します。
すでに導入済みの方は、このステップは不要です。

① VSCodeを起動して、左サイドバーの四角4つのアイコンを選択します。

② 検索欄に「prettier」と入力し、「Prettier」を選択し、「install」をクリックします。

Prettier-settings-001

③ 「表示」→「コマンドパレット」と進み、コマンドパレットに「open workspace settings (JSON)」と記入してEnterを押します。

④  開かれたファイルに以下を追加します。

{
   "editor.formatOnSave": true
}

以上でVSCodeへのPrettierの導入ができました。

Prettierが導入できたことを確認

プロジェクト内のTypeScriptファイルを開き、連続でスペースを入れたり、連続で改行してみてください。

ファイルを保存したときに、自動でファイルが整形されれば、無事Prettierが導入できています。

反映されていない場合は、一度VSCodeを再起動してみてください。

<スポンサーリンク>

最後に

以上がReact Native&TypeScriptプロジェクトにESLintとPrettierを導入する方法になります。

ぜひ導入して、効率的に開発を進めてください。

 

React Native&TypeScriptプロジェクトの開発にあたり、とても参考になる本があります。

興味のある方は、React NativeとTypeScriptの開発におすすめな本もぜひご覧ください。

広告

<スポンサーリンク>

広告

<スポンサーリンク>

-React Native
-

執筆者:

関連記事

React Nativeでclassをfunctionに変換する10ステップ

React Native のclassをfunctionに変換したい。 このような疑問に答えます。 React Nativeでモバイルアプリ開発をするとき、functionで作りたくても、多くの資料は…

もっと見る

React NativeとTypeScriptの開発におすすめな本

React NativeとTypeScriptのおすすめな本を知りたい。 このような疑問に答えます。 React NativeとTypeScriptの日本語の情報はまだ少なく、中々見つかりません。 そ…

もっと見る

React Nativeの環境構築の手順【Windows版】

WindowsでReact Nativeの開発環境を構築する方法を知りたい。 このような疑問に答えます。 React Nativeの環境構築の方法にはRect Native Cliを使用する方法とEx…

もっと見る

React Nativeの環境構築の手順【MacOS版/M1対応】

MacOSでReact Nativeの開発環境を構築する方法を知りたい。 iOS、Android、それぞれの開発に必要なツールが知りたい。 このような疑問に答えます。 この記事では、MacOSでRea…

もっと見る

React Nativeのおすすめの勉強法と進め方【環境構築から学習まで】

React Nativeの学習方法が知りたい。 このような疑問に答えます。 私がReact Nativeを習得した経験を踏まえた上で、React Nativeのおすすめの学習方法をまとめました。 ※こ…

もっと見る


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

プロフィール

プロフィール

海外経験14年の帰国子女。
未経験からエンジニアに転職。
開発を中心にPLとして活動中。

詳しいプロフィールはこちらから。

広告

<スポンサーリンク>