zackey推し

IT系のこと書くぞい

typescript-eslint + prettier を併用する際は member-delimiter-style の設定に気をつける

"Prettier" でググった記事を参考に、雰囲気で導入していたPrettier、


公式ドキュメントを読んでみると、きちんと腹落ち&導入することができましたが、typescript-eslintprettierの設定が競合する状態となってしまいました。

この記事では、その競合を解決したときの方法について、メモしていきたいと思います。

  • はじめに
    • typescript-eslint とは? 🤔
    • prettierとは? 🤔
  • 本題
    • prettier「semi」と typescript-eslint「member-delimiter-style」が競合した
      • 設定内容
      • 発生した競合内容
    • 解決方法
      • 設定内容
  • おわり
続きを読む

Next.js x tailwindcss で静的サイトを生成する

技書博のサイトがNext.jsで作成されており、何か自分も開発に携われないかな...と思いつつコードを見てみました。

github.com

が、そもそも自分、Reactもチュートリアルをお遊び程度に触った程度のため、どこから手をつければいいかわからん状態でしたorz

ということで、勉強目的で、Next.jsを用いてポートフォリオPodcastポータルサイトを作りはじめました。

この記事では、Next.js x tailwindcssで静的サイトを出力するまでの手順をメモしておきます。

  • 環境
    • Next.jsとは? 🤔
    • tailwindcssとは? 🤔
  • 手順
    • 1.Next.js x TypeScriptの環境を構築
    • 2.tailwindの導入
    • 3.静的サイトとして出力する
  • おわり
続きを読む

Gridsome を 0.6→0.7 にバージョンアップしたら「The field Query.metaData is deprecated. Use Query.metadata instead.」の警告が出た

Gridsome作成したサイトに新機能を追加するため、Gridsomeのプラグインを検索しようとしたところ、いつのまにかv0.7にバージョンアップしていました。

「新機能を追加する前にバージョンアップするか...」と思い、

  • yarn upgrade gridsome --latest
  • gridsome develop

でバージョンアップ&ローカル環境で実行したところ、
The field Query.metaData is deprecated. Use Query.metadata instead.
の警告が発生していました。

この記事では、上記が発生した原因と対処方法をメモとして書いておきたいと思います。

続きを読む

はじめて「もくもく&成果発表会」を主催してみての反省

本日(2019/09/29)、はじめて外部の方を巻き込んだ形の勉強会(もくもく会)を主催しました。

lanchester-tech.connpass.com

社内勉強会に社外の方を招いたり、connpass等で開催する勉強会のスタッフ参加したことはあるのですが、1から自分で社外の勉強会を主催したのは、はじめてでした。

この記事では、主催をやってみて、気づいた点/反省点を忘れないようにメモしておきたいと思います。

  • なぜ勉強会をやったのか
    • 個人
      • 自宅では怠けてしまうため、長い時間もくもくできる場所が欲しい
      • 全員が成果発表を行い、お互いにフィードバックを行いたい
    • 会社
      • エンジニアの方に、会社を認知してもらいたい
  • 結果
    • 自己紹介スライドがなかった
    • 自社紹介スライドがなかった
    • オンラインコミュニケーションの場がなかった
  • おわり
    • 「もくもく&成果発表会」に興味 or 参加してみたい方
続きを読む

【eslint】 JavaScript (*.js) と TypeScript (*.ts) が混同しているプロジェクトに typescript-eslint を導入した際のメモ

f:id:kic-yuuki:20190921235247p:plain

最近、実践TypeScriptという本を読み切りました。 (全てものにできたかというと...orz また何かを作りながら読み返す必要がありそう...)


勉強しながら検証コードを書いていたところで、typescript-eslintというeslint系のライブラリの存在を知りました。

typescript-eslintを jsファイル(JavaScript) / tsファイル(TypeScript)が混同したリポジトリに導入しようとした際、typescript-eslintがjsファイルにも適用、大量のエラー / 警告が発生してしまいました。

この記事では、上記の現象を解決した際のメモを書き留めておきたいと思います。

  • typescript-eslintとtslintについて
    • tslintの設定を使い続けたいという方(2019/09頃時点)
  • 本編
    • 解決手順
  • おわり
    • 参考文献
続きを読む