ESLint

ESLint ESLint とは ESlint をコマンドラインで使ってみる ESLint を VSCode で使ってみる Prettier Prettier とは？ Prettier をコマンドラインで使ってみる Prettier を VS Code で使ってみる 参考 ESLint ESLint とは ESLint は、コードの一貫性を高め、バグを回避することを目的としている。ECMAScript/JavaScript コードで見つかったパターンを特定し、報告してくれるツール。 JavaScript はコンパイル不要なので、typoや命名間違いなどがコンパイルエラーとして観測できず、ブラウ…

前提 トランスパイラ利用の有無に関わらず、ES2017 相当の（2021/10 時点でブラウザの対応率が十分に高い）記述がユーザーのブラウザで動くようにする、という方針 トランスパイラを用いても、ECMAScript の全ての記述を変換してくれるわけではないことは薄々気づいていた ESLint を用いても、ECMAScript の全ての記述を解析してくれるわけではないことは薄々気づいていた 目的 ECMAScript を利用した場合に トランスパイラは何を変換し、何を無視するのかを検証する ESLint は何を解析し、何を無視するのかを検証する 検証用の入力 ES6 〜 ESNext の規格に…

こんにちは。フロントエンドエンジニアの片柳です。 先日、トラストバンク内での開発における共通ルールeslint-config-trustbankをリリースしました。 www.npmjs.com もともと、トラストバンクのフロントエンドではリンター兼コードフォーマッターとしてESLintが導入していました。 しかし、細かな管理やメンテナンスを行なっていなかったため形骸化し、多くの問題を抱えながらの運用でした。 新たなルールを作成するにあたり、悩み、解決したいと考えた点を、簡単にではありますが紹介させていただきます。 今更かつ、決してモダンな内容ではありませんが、どうぞお付き合いください。 何のた…

Warning: React version not specified in eslint-plugin-react settings. See https://github.com/jsx-eslint/eslint-plugin-react#configuration . というwarningが出ていたのでその解決方法 blog.freks.jp zenn.dev settings: { react: { version: 'detect', }, }, と.eslintrc.jsに入れれば解決。 この設定の意味なんなのか見てみると、 github.com detectと指定するとインス…

結論 // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore

ESLint@8.0.1でTypeError: this.libOptions.parse is not a functionのエラーが出ました。ESLintのバージョンによっては、intelliJやWebStormで出てしまうようです。 以下を実行することでエラーが解消しました。 ESLintのバージョンを8.22.0にする node_modulesを削除する 再度npm installする $ npm install eslint@8.22.0 --save-exact $ rm -rf node_modules $ npm i 参考 ESLint@8.23: TypeError: thi…

このとおりですが， siderlabs.com siderがサービス終了するらしいです． 今まで個人プロジェクトでも，会社のプロジェクトでも結構お世話になってきました．使い始めた頃は，まだSideCIという名前で，会社名もアクトキャットという名前だった気がしますが，感慨深い． とりあえず使えなくなるので，移行します．

はじめに 最近MSW(MockServiceWorker)の話題をよく見かけるので、自分が関わっているプロダクトで利用できそうか試しに使ってみました。 今回の記事ではMSWを実際に利用するまでの環境構築について記載しています。 MSWとは 名前の通りServiceWorkerを使用しており、クライアントからのAPIリクエストをインターセプトして返してくれるモックAPIです。この図を見ると動作イメージがしやすいかと思います。 ServiceWorker上で返してくれるので、別途モックサーバーを立てることなく、すぐに用意できるところがメリットの1つとして挙げられるようです。実際に簡単にモックAPI…

こんにちは、開発２部の早瀬です。 自分のチームではフロントエンドにReact（Next.js）を採用しており、MUIをベースにしたデザインシステムを構築して開発を行なっています。 そこで今回はデザインシステムの構築に至った背景や、具体的な取り組みを紹介したいと思います！ 背景 MUIとは デザインシステムを構築する目的 デザインと実装の同期 属人性の排除 コミュニケーションコストの削減 具体的な取り組み デフォルトスタイルのオーバーライド カラーコードの集約 Typographyの定義 8倍ルール Atomic Designの不採用 まとめ

こんにちは！小林和樹と申します。Insight Edgeに参画して約4ヶ月が経ちました。 現在、Insight Edgeでソフトウェア品質向上のためのシステム基盤の選定・構築を担当しています。 その中で、静的解析を共通機能として取り入れるため、そのためのツール調査を実施しています。 特に、セキュリティを高め将来的な負債を減らすこと、開発者に負担をかけずに品質確保の仕組みを導入することを目的としました。 様々な静的解析ツールがある中で脆弱性検出の機能がある、GitHub Code Scanning、SonarQube/SonarCloudを導入対象として比較し、共通機能としてどれが適しているか調…

git hubにとあるものをcommitしたところ、こんなエラーが。なんじゃいこれ... eslintでエラーが出てるみたい。 なんかインデントの問題みたいだったので、Shift + Option + F で自動でインデントの調整できる！！！ ちなみに、このコマンドは半角入力じゃないと出来ないのでお気をつけて！！ Error: Insert `········` prettier/prettier

Rome という開発ツールを使ってみた。RomeはRome1つでフォーマットやlintなどができる統合開発ツールを目指していて、2023年1月現在はフォーマッターとLinterがリリースされている。そのフォーマッターとLinterを使ってみた。最近開発しているChrome拡張にPrettierとESLintを入れてなかったので代わりにRomeを導入してみた。 やったこと Romeのインストール Romeの設定 pnpm rome init + インデントスタイルの変更 VSCodeの拡張機能の設定 ワークスペース設定の対応言語のみデフォルトフォーマッターをRomeにした npm scriptの…

YAPC::Kyoto 2023の採択トークが決まったようですね。面白そうなトークが沢山あってすごいですね。 blog.yapcjapan.org 私のトークも採択されました。ありがてぇ！ こういう話をします。 Perl Mongerの皆さんもウェブアプリケーション開発を行う上で切っても切り離せないものの1つがJavaScriptかと思います。皆さんも聞き馴染みがあるであろうESLintやBabelやWebpack、esbuildやPrettierやTypeScriptなどなどあらゆるJavaScript関連のツールは内部的にJavaScriptのASTを操作し、それらを組み合わせることで成果…

序文 Pythonを初めて触ったのは筆者が19歳のとき……プログラミングに目覚め始めた頃、そのときに出会ったRubistの方への反骨精神で使い始めました。 あれから月日が流れ、結婚、出産、育児、マイホーム・マイカー購入といった人生一大イベントたちをことごとく無視して生きてきて、遂にお仕事でPythonを本格的に使う日が来ました（やったー）。 筆者はWebアプリケーションエンジニアとしてはJavaScript/TypeScriptの経験が長いです（といっても2、3年ですが）。 その中でリンターやフォーマッターといった自動でいい感じのコードを書くための技術に触れ、それらのVSCodeでの設定の方法…

はじめに 個人でRuby on RailsのWEBアプリ開発に着手しています。 初めてのCI環境構築で色々調べながら取り組んだので、次回はスッとできるよう、記録を残しておきます。 はじめに やったこと ブランチ運用の設計 CIの設計 CIのチェックに含めるもの やりたいこと ツール CIの設定ファイル（完成版） ワークフローの各部分について 実行のトリガー 依存ライブラリのキャッシュ Nodeのインストール・npm installの実行 Bundlerのインストール・bundle installの実行 lintの実行 テストの実行 CodeQLの設定 指定したチェックをパスしないとPRをマージ…

TL;DR 自分が利用しているNode.jsのバージョンが、actions/node-versionsでまだ対応されていたかったことによるようです。 18系だとキャッシュされました。 状況 個人開発しているプロジェクトのCIを設定するにあたり、Node.jsのインストールが必要だったので、setup-nodeのアクションを利用しました。 # 自分が作成したワークフローファイルより抜粋 name: Install Node.js uses: actions/setup-node@v3 with: node-version: '19.4' github.com ただ、setup-nodeのREAD…

next lint の結果を Reviewdog に食わせて PR にコメントとして出したかったんだけど結構ハマったのでメモ。 普通に next lint を動かしてもだめ "scripts": { "lint": "next lint" } - uses: reviewdog/action-setup@v1 with: reviewdog_version: latest - name: Run reviewdog env: REVIEWDOG_GITHUB_API_TOKEN: ${{ secrets.GITHUB_TOKEN }} run: npm run lint | reviewdog…

明けましておめでとうございます。アプリケーションサービス部 河野です。 Vue2.0 系の LTS 終了が 2023 年 12 月 31 日と通知されており、これから Vue を使用する際は 3.0 系がほとんどだと思います。 v2.vuejs.org そこで今回は、Vite を使用した Vue3 系 × TypeScript の VSCode 開発環境構築についてを記載します。 環境 PC: mac OS Monterey 12.5.1 エディタ: VSCode バージョン 1.74.2 シェル: fish バージョン 3.4.1 Node.js: バージョン 18.0.0 Vite とは？…

ということに next lint を触っていて気づきました。公式ドキュメントにもそう書いてありました。 next lint runs ESLint for all files in the pages, components, and lib directories. It also provides a guided setup to install any required dependencies if ESLint is not already configured in your application. (https://nextjs.org/docs/api-reference/…