More than 5 years have passed since last update.

[React Native]VSCodeでPrettierを入れる

Last updated at 2018-02-28Posted at 2017-12-25

背景

この記事を読んでprettierを入れてみたくなった

前提

React開発向けの内容

手順メモ

必要なモジュールをインストール

npmの人

npm i --save-dev eslint babel-eslint eslint-config-airbnb eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-import prettier-eslint prettier-eslint-cli eslint-plugin-jest

yarnの人

yarn add -D eslint babel-eslint eslint-config-airbnb eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-import prettier-eslint prettier-eslint-cli eslint-plugin-jest

VSCodeでPrettierの拡張機能を追加

ファイル保存時にフォーマッターがかかるように設定追加

以下のようにするとeslintの設定と平仄がとれるようになる


{
    "editor.formatOnSave": true,
    "javascript.format.enable": false,
    "prettier.eslintIntegration": true
}

eslintの設定ファイルは最小限だとこれくらい？

.eslintrc

{
  "extends": "airbnb",
  "parser": "babel-eslint"
}

これで保存時にフォーマッタがかかるようになる

参考記事

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up