Edited at

[React Native]VSCodeでPrettierを入れる

More than 1 year has passed since last update.


背景



  • この記事を読んで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"
}


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


参考記事