LoginSignup
46
45

More than 5 years have passed since last update.

[React Native]VSCodeでPrettierを入れる

Last updated at Posted 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の拡張機能を追加

スクリーンショット 2017-12-26 7.44.13.png

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

スクリーンショット 2017-12-26 7.46.34.png

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

{
    "editor.formatOnSave": true,
    "javascript.format.enable": false,
    "prettier.eslintIntegration": true
}
  • eslintの設定ファイルは最小限だとこれくらい?
.eslintrc
{
  "extends": "airbnb",
  "parser": "babel-eslint"
}
  • これで保存時にフォーマッタがかかるようになる

参考記事

46
45
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
46
45