React×Firebaseでちゃんと開発するときの環境構築手順と解説
はじめに ReactとFirebaseを用いてフロントエンド開発するにあたって、追加で入れておきたい各種パッケージや設定を組み込んだ環境構築手順です。 この記事で構築する環境は以下の通りです。 ローカルで開発した内容をGitHubにpushすると、構文チェック→テスト→ビルド→デプロイされます。 また、mainブランチにpushしたらFirebaseの本番環境にデプロイされ、developブランチにpushしたらFirebaseの開発環境にデプロイされます。 事前準備 環境構築をするにあたって、以下は事前に準備してください。 VS Codeのインストール GitHubのアカウント登録 Node.jsのインストール 今回はv16.14.0を利用します Firebaseのプロジェクト作成 GitHubリポジトリの作成 GitHubのリポジトリを作成します。 公開範囲はPublic,Privat
ESLint, Prettier, VS Code, npm scripts の設定: 2021春
eslint-plugin-prettier 時代の設定をずっと使っていたので、重い腰を上げてアップデートした作業メモ。 背景 Prettier 公式ドキュメントによれば、現在 eslint-plugin-prettier は以下の問題があるとして推奨していない。 エディタが真っ赤になる（人間が気にする必要のない問題なのに！） 直接実行するより遅い（同様に prettier-eslint も遅い） ESLint と Prettier の間に間接レイヤーを追加するので、壊れやすい なるほど正しい。 一方、別々に実行することで以下のような問題も出てくるので、解決していく。 CLI とエディタを個別に設定する必要がある エディタで ESLint と Prettier の協調動作が必要 CLI (npm scripts) で ESLint と Prettier の対象ファイルが別管理になる 上記の
自分流 Next.js + TypeScript + ESLint + Prettier + VSCode (+Dockerfile) 初期設定 - Qiita
自分流 Next.js + TypeScript + ESLint + Prettier + VSCode (+Dockerfile) 初期設定TypeScriptDockerESLintNext.jsprettier 最近Next.jsを書くようになって、自分なりのコーディングスタイルが固まってきたので今後パパっとセットアップができるようにメモっておきます。 この記事では以下のことができるようになります。 Next.jsをTypeScript / TSX で書く ESLintとPrettierとVSCodeを組み合わせ、保存時自動フォーマット importを相対パスではなく絶対パスで書く ServerをExpressで動かす 開発時は.envで、本番は環境変数によるアプリケーション設定値を扱う 【発展編】Kubernetesを見据えてDockerで動かす Next.jsをTypeScri
ESLint と Prettier の共存設定とその根拠について
注意 この記事は 2020 年 09 月 24 日現在、古い情報となりました。 eslint-plugin-prettier の利用は非推奨であると公式がアナウンスを出しています。 そのことについては Prettier と ESLint の組み合わせの公式推奨が変わった にてまとめましたので、こちらもご覧ください。 また eslint-plugin-prettier は公式推奨ではなくなりましたが、それは Editor などの外部環境の進化によるものでこのプラグイン自体に何か問題が起きたわけではありません。 そして eslint-plugin-prettier を利用した設定方法、特に eslint-plugin-prettier と eslint-config-prettier が何を解決していたかを知らないと、prettier-eslint が何をどう解決したかを理解できないはずなので
ESLint(あるいはTSLint)とPrettierを併用する - ひと夏の技術
[追記:] TypeScriptでESLintを使う方法も書きました tech-1natsu.hatenablog.com TSLintではなくESLintを使いたい方はこちらもあとで読んでみてください。 なお JS with ESLint TS with TSLint この構成をお求めの方は当記事(下記)です。 Prettier導入するにあたって色々絡み合うものがあるので調べたりしたことをまとめておく。 基本的にリントとフォーマッタのどちらか片方しか使わないという場面は、リリースを意識したプロジェクトではあまりないと思うので、実質この組み合わせは必須のようになってくる気がしている。 それで、Prettierとはなんぞや…JSのコードフォーマッタで、、というPrettierの概要についてはググればめっちゃ出てくるので省略。 この記事は導入したいけどなにをどうすればいいんやという人向け。 と
Modern JavaScript概観、そしてElectronへ | さにあらず
この一か月分の学習成果を整理したリポジトリを作ったので、その成果についてまとめておく。 作ったサンプルプロジェクトだけを手軽に欲しければ、このリポジトリを clone してほしい。 taichi/js-boilerplatemaster ブランチには、ミニマムな JavaScript 開発環境がサンプルコード付きで入っているfrontend ブランチには、React/Redux/webpackなウェブアプリケーション用の開発環境が入っているデフォルトブランチにしてある electron ブランチには、frontend ブランチの内容に加えてElectronでアプリケーションを開発するための環境が入っているはじめに#最近の JavaScript について#僕は仕事として JavaScript を書いている訳ではないけども、この半年くらいの間にちょっとしたツールならいくつか作った。どちらも便利
ESLint で ES6で書かれたReact のコードを検証する - Qiita
やりたいこと ES6で書かれた、Reactのコードを静的に検証したい。 この記事では、ESLint を使った例を紹介します。 以下の例は全てESLint v3.1.1 で実行しました。 インストール eslint, eslint-plugin-react モジュールを、local にインストールします。 設定ファイル(.eslintrc)を作成する 手動で設定ファイルを作成してもOKですが、eslint には設定ファイルを自動生成するコマンドがあるので、今回はこれを使います。 プロジェクトのルートディレクトリで node node_modules/eslint/bin/eslint --init を実行すると、例1が表示されます。 例1 $ node node_modules/eslint/bin/eslint --init ? How would you like to configur
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
