[B! eslint] f-sugerのブックマーク

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

f-suger 2021/11/13

リンク

Run eslint with reviewdog - GitHub Marketplace

f-suger 2021/01/11

リンク

Prettier と ESLint の組み合わせの公式推奨が変わり plugin が不要になった

前に書いた ESLint と Prettier の共存設定とその根拠についてが公式推奨が変わったことにより一部間違った情報になっているのでその訂正記事です。該当記事に書いた内容は Prettier と ESLint の関係を読み解く上で役立つ情報だと思うので、警告とこのページへのリンクを書いた上でそのまま残しておきます。 (追記) この記事の内容も間違った内容を書いていました。なので一度大幅な訂正をしています。prettier-eslint も推奨ではありません。変更点の要約 Prettier と ESLint の組み合わせについて公式の推奨方法が変わりました。きっといつかこの情報も古くなるので直リンクではなく、ドキュメントの GitHub のリンクを貼っておきます。ドキュメント自体のリンクはこちらです。新しいドキュメントを要約すると、 Linter と Formatter

f-suger 2020/09/25

eslint

リンク

公開されたシンボルにJSDoc/TSDocを書くことをESLintでルール化したい - Sexually Knowing

公開しているライブラリほどじゃないにせよ、チームで開発しているTypeScriptで書いたコードにちらほらドキュメンテーションしていきたい。それESLintでとりあえず今までろくに書いていなかった部分はいまさっき書き足すPull Requestを作ったけれど、今後手を入れる時にもちゃんと書いていってほしい。で、こういうルールの徹底を人間がレビューで「ドキュメントおねがいします」って言うのは不毛。2020年代にやっていいことではない。 TypeScript/JavaScriptでやろうとなったらESLintでどうにかしたい。eslint-plugin-jsdocがJSDocに関連したルールを提供している。 JSDocはTSDocと基本的なフォーマットは同じで細かいタグのセマンティクスは差異がありそう。そしてなんとeslint-plugin-jsdocはTypeScriptもサポートし

f-suger 2020/07/31

リンク

Release v3.0.0 · typescript-eslint/typescript-eslint

This major release has been a long time coming! We've been saving up breaking changes for a while now, waiting for the ESLint v7 release which we knew would deprecate support for node version 8. Due to our weekly release cadence, this major release mostly contains breaking changes! Breaking Changes Dropped support for Node version 8 (#1420) In line with ESLint v7 - we've also dropped explicit supp

f-suger 2020/05/23

リンク

@typescript-eslint ことはじめ - teppeis blog

追記: 2019/05/01 最近の@typescript-eslint/eslint-plugin, Prettierのアップデートによって、正式にTypeScript 3.4対応されました。一通り普通に動いてる感じ。これまで自分で使っていて問題になったのがパフォーマンス。ESLint単体やTSLintに比べて、プロジェクトによるだろうけど2倍以上遅い。体感で結構辛い。 Poor performance on some projects · Issue #389 · typescript-eslint/typescript-eslint これはTypeScriptのパーサーを通す部分の構造上の問題が原因なので、簡単には直せなそうな気配。とりあえず、個人的には型を必要とするルールにそこまでの価値を感じていないので、該当ルールを無効にしてparserOptions > projectを削

f-suger 2019/02/17

リンク

prettierとstylelintを使って、エディタのプラグインで自動フォーマットしてみた。 - Qiita

javascriptだけでなく、sass/cssやmarkdownまでもフォーマットしてくれるprettier。 eslintと使ってみて、「これいいね！」と感動。 stylelintとも連携できると聞いて、 VScode と Atom で保存時に自動フォーマットするときに自動でフォーマットをしてみた。(2018/07/31) 参考にさせて頂いたページ。ありがとうございました。 https://qiita.com/tkiryu/it ems/016aa9ef8a25b631e7e6 https://satoyan419.com/prettier/ prettierの準備詳しい使い方はここでは省略。。。インストールします。

f-suger 2019/01/13

リンク

Prettier 入門～ESLintとの違いを理解して併用する～ - Qiita

お知らせ（2021/05/26 追記）以前はeslint --fixなどで ESLint を実行時に Prettier でコードを整形し、整形したコードに対して構文チェックが実行されるようにすることが推奨されていました。 ESLint で Prettier を実行するためには、ESLint の Plugin が必要でしたが、これを利用することが公式で推奨されなくなりました（詳細はこちら）。そのため、記事を更新して Prettier と ESLint をそれぞれ実行させるような内容に変更しました（ついでに husky のバージョンも上げており、それに関する内容も更新しています）。更新前のコードや記事は以下にありますので、必要に応じてご確認ください。はじめに Prettier（v.2.3.0）に関しての備忘録です。「Prettier の何が便利なのかよくわからない」「ESLint