React+TSプロジェクトで便利だったLint/Format設定紹介
こんにちは、よしこです。 この記事は 2020年に立ち上げたWebフロントエンド構成の振り返り の「linter/formatter」項の詳細記事です。単体でも読めますが、よければ元記事もあわせてどうぞ！ この記事では、今わたしが 株式会社ナレッジワーク というスタートアップで開発・運用しているプロジェクトにおいて便利だったLint/Format関連の設定についてご紹介していきます。 使っているのは、TSのlintのためにESLint, CSSのlintのためにStylelint, 主なファイルのformatのためにPrettierです。 ESLint pluginsとextendsだけどんなもの入れてるか載せておきます。 "plugins": [ "strict-dependencies", // 後述 "unused-imports", // 後述 ], "extends": [ "a
Next.jsに専用のESLintが追加された！
Next.js11がついに発表されましたね。 next/script、Next.js Liveなど、興味深い機能が色々ですが、自分が地味に嬉しかったのはNext.js専用のESLint設定がデフォルトでサポートされたことです。 create-next-appでESLint設定済みのNext.jsプロジェクトが作成できる ReactやNext.jsのプロジェクトを立ち上げる際、結構面倒くさい難しいのがESLintの設定です。 .eslintrcファイルの記述とか、extendsの記述順によって優先されるルールとかも変わってくるので、慣れないうちはなかなか難しい作業でしょう。（自分はいまだに試行錯誤してます…） しかし、今ではcreate-next-appを使うと、専用のESLintが設定済みのNext.jsプロジェクトを作成してくれます。 実際にコマンドを実行した結果を見ていきましょう。 $
GitHub上でSwaggerをプレビューできるChrome拡張機能を作った - Qiita
概要 GitHub 上で、Swagger の yaml | yml | json を Swagger-UI に変換できる Chrome 拡張機能を作った。 その紹介。 「Swagger とは？」という話は、下記等を参照のこと。 Swaggerの概要をまとめてみた。 - Qiita Demo クリックするだけ。簡単に変換できる。 全展開・全折り畳みができて便利。 インストール Chrome Web Store からインストールできる。 swagger-viewer - Chrome ウェブストア 特徴 簡単 1クリックで変換できる 依存なし この拡張機能のみで動作する Web の Swagger Editor を開いたり、ドキュメント生成サーバーを起動する必要なし セキュア（たぶん） 外部ネットワークへの送受信はないため、業務でも使用できる ※自己責任でお願いします たぶん Chrome の
全力で大きくなるReactのコードをスタイルガイドに沿って見直したら、大変勉強になりました | Wantedly Engineer Blog
Wantedlyでは今年に入って、Reactの導入や、webpackの導入によるビルドプロセスの変更、CoffeeScriptからJavaScriptへの変更など、フロントエンドの開発環境が大幅に変更されました。このあたりの話は高松の記事に詳しく書かれていますが、よりリッチなUIを効率的にチーム開発できるようになり、とてもいい変化でした。 コードの質にばらつきがReact導入時は、一つのチームだけReactの開発を行っていたのですが、複数チームが独立して開発するようになると、同じReactのコードでもチームごとに雰囲気の違うコードが出来上がっていました。 ここは括弧を付けるべきなのか、このインデントは好ましいのか、ここはSyntac Sugerを使ったほうがいいんじゃないかなど、疑問点がある度にチーム間で確認をとるのは大きなコストになるため、どこまで指摘するかはチームのレビュアーに依存して
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
