Upgrade to Pro — share decks privately, control downloads, hide ads and more …

コードを整えよう

akatsuki1910
June 27, 2023
8

 コードを整えよう

akatsuki1910

June 27, 2023
Tweet

Transcript

  1. ESlintの欠点 • JSのバージョンが上がったらルールを見直す必要がある ◦ 年に1回程度なので、そこまで気にしなくていい • ルールの数が尋常じゃないぐらい多いからいちいち見てられない ◦ とりあえず”eslint:recommended”を入れておけば問題ない ◦

    最近はフレームワークの構築時に一緒に入っている • ルールが厳しいと、よしなになコードが書けない ◦ 一般的なルールは、大体その書き方は良いとされていないものを防ぐ目的なので、それでひっかか る方が悪い ◦ recommendedしかいれてないのにひっかかるのであればなおさら
  2. ESlintでどんなことができるの? if(color == “red”)だと、color = “red”って書いてもエラーがでない でも、if(”red” == color)だと、”red” =

    colorって書いた時にエラーがでるよね だから普段からそういう書き方にしようぜ(意訳) ちなみに、no-cond-assignっていうルールでカッコ内の代入を止めれます
  3. 他には? • require-await ◦ 非同期な関数を呼び出す際、 awaitをちゃんと付けてないと怒られる • eqeqeq ◦ ==を許さない(===にする)

    • no-console ◦ console.xxxを許さない • @typescript-eslint/no-explicit-any ◦ anyを許さない • import/order ◦ importの順番をソートしてくれる (アルファベット順とか ) コード以外にもファイル名の付け方から 1ファイル当たりの行数も指定できる
  4. Stylelintのデカい欠点 css-in-jsに対応しなくなった 色んな書き方があるため、追いきれないことが原因らしい We've also deprecated the postcss-css-in-js custom syntax.

    It was not possible to maintain a monolithic custom syntax that attempted to support every CSS-in-JS library and syntax, as there are so many of them and each with variations in syntax. https://stylelint.io/migration-guide/to-15/
  5. 他には? • block-no-empty ◦ セレクタ指定内にプロパティがない場合にエラー • color-no-invalid-hex ◦ 16進数があっているかチェック •

    declaration-block-no-duplicate-properties ◦ プロパティが重複している場合エラー • no-duplicate-at-import-rules ◦ importで読み込むファイルが同じだとエラー • unit-disallowed-list ◦ 許可しない単位を指定 ◦ svhとかまだ使えないので、何も知らずに使うことを予め止めれる CSSでやりがちなミスは基本的に全部これで解決できる