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の環境構築の手順【MacOS版/M1対応】

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

もっと見る

react-native-calendarsの日本語化とカスタム方法

React Nativeでカレンダーを実装したい。 react-native-calendarsの使い方やカスタム方法が知りたい。 このような疑問に答えます。 〇この記事の内容 react-nativ…

もっと見る

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

React NativeプロジェクトをTypeScriptで作成したい。 プロジェクトをTypeScriptに変更したい。 このような疑問に答えます。 TypeScriptはJavaScriptから派…

もっと見る

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

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

もっと見る

【React Native】classとfunction、どちらを使うのか

classとfunctionの違いを知りたい。 どちらを使ったらいいのかわからない。 このような疑問に答えます。 React Nativeには、classとfunctionがあり、どちらを中心に使えば…

もっと見る


comment

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

プロフィール

プロフィール

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

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

広告

<スポンサーリンク>