ESLintのローカルルールで独自のコーディング規約を実装する - ドワンゴ教育サービス開発者ブログ
この記事はドワンゴ Advent Calendar 2023 の 22 日目の記事です。 ドワンゴ教育事業Webフロントエンドチームの berlysia です。1 この記事では、オンライン学習サービスN予備校の開発を支えるコーディング規約の考え方に少し触れ、その運用を支えるESLintの活用を紹介します。 この記事の内容は、他社様主催イベントにて発表した内容の再構成です。 speakerdeck.com コーディング規約は実行可能にしたい 教育事業のWebフロントチームには、細かいコーディング規約が書かれた文書は存在しません。コーディング規約はESLintをはじめとする各種ツールによって、自動で検出・修正可能な形になっています。 文書という形でなく、各種ツールのコンフィグファイルとそのコメントとしてまとまっている、と言い換えてもよいかもしれません。ドキュメンテーションは重要な仕事ですが、そ
ESLint v8.56.0 の `reportUnusedDisableDirectives` とは何か？
この記事は Cybozu Frontend Advent Calendar 2023 の 24 日目の記事です。 先日リリースされた ESLint v8.56.0 でオプション reportUnusedDisableDirectives が改善された話です。 元々どういうオプションだった？ // eslint-disable-line みたいなルール無効化ディレクティブを書いたけど、しばらくして何かしらのコード修正の影響でもうそのルール違反は発生しなくなって、でも無効化ディレクティブは消し忘れて無駄に残っている、みたいな状態は起こりがちです。 例えば以下のように non null assertion (!) が一時的に必要になって disable したけど、
Prettierを使わない理由
この記事はPrettierを使用している人を非難したり、脱Prettierを推奨する事を目的としていません。 こういった考え方もあるということをひとつの意見としてご覧いただければ幸いです。 勘違いしている人が多そうなので追記します。 Prettierを使わないというのは私が独断で決めた事ではないです。 チームが発足する際の技術選定で合意は取れていますし、私が関与していない別のチームでも同様にPrettier無しで開発しています。 私達のチームはメンバー同士を互いに信頼していますし、細いスタイルで喧嘩を始めるようなメンバーは居ないので安心してください。 はじめに Prettierはコードフォーマッターとして広く使われているツールです。 コードスタイルに関する議論をなくすことを目的としており、ESLintとは異なりデフォルト設定のままですぐに使えるのが特徴です。 さらに、PrettierはJS
フロントエンドのLinterやCIを改善した話
この記事は 株式会社エス・エム・エス Advent Calendar 2023 の21日目の記事です。 介護事業者向けの経営支援サービス「カイポケ」のリニューアルプロジェクトでフロントエンド開発をしている @hush_in です。 今年の4月にエス・エム・エスに入社しました。 入社してからフロントエンドのLinterやCIを改善した話をします。 忙しい人向けまとめ ESLint の recommended 系 extends を追加 全般 eslint:recommended plugin:import/recommended TypeScript plugin:@typescript-eslint/recommended-type-checked plugin:@typescript-eslint/stylistic-type-checked plugin:import/typescri
【Typescript】baseUrlでの絶対パスインポートが「import/no-unresolved」で怒られる場合の対応 - Qiita
【Typescript】baseUrlでの絶対パスインポートが「import/no-unresolved」で怒られる場合の対応TypeScriptESLint Typescriptではtsconfig.jsonのbaseUrlを指定すれば絶対パスでインポートができる。 しかし、eslintのimport/no-unresolvedルールに怒られてしまったので、そのときの対応を記載する。 1. eslint-import-resolver-typescriptをインストールする tsのインポート問題を解決してくれるライブラリらしい。
importの順番をルール化して自動で整列させるeslint-plugin-import
typescript-eslint の no-unused-vars を off にする eslint/no-unused-vars をTS用に拡張したもの。 eslint-plugin-unused-imports と重複して no-unused-vars のエラーが報告されてしまう 'Hogehoge' is defined but never used. eslint (unused-imports/no-unused-imports) 'Hogehoge' is defined but never used. eslint (@typescript-eslint/no-unused-vars)
ESLintでimportの整列・追加・削除を自動化する - Qiita
概要 ESLintのプラグインとVS Codeの設定でimportの追加・削除・整列を自動化して幸せになれる記事です。 こんな人におすすめ チーム間でimportの順番などのルールが決まっておらず。人によってフォーマットがバラバラなのが実は気になっている。 未使用のimportを消すのを忘れがち。 コンポーネントやライブラリの関数を書いたら勝手にimportしてくれたら嬉しい。 import周りを触るのがシンプルにめんどい。 使用するプラグインと設定 VS Codeの設定 source.addMissingImports importの自動追加に使用する VS Codeで設定する ESLintのプラグイン eslint-plugin-import importの整列に使用するプラグイン eslint-plugin-unused-imports 未使用のimportを削除に使用するプラグイン
TypeScript / JavaScript の import を自動でソートする - Sansan Tech Blog
こんにちは。Eight でエンジニアをしている鳥山（@pvcresin）です。 マイブームはコンビニで買える GODIVA のベルギーダークチョコレート（アイス）を食べることです。 濃厚で甘すぎず、量も多すぎないところが気に入っています。 今回は TypeScript や JavaScript の import を自動でソートする話をしたいと思います。 といっても、TypeScript でソートがうまく行けば JavaScript でも大抵うまくいくので、主に TypeScript にフォーカスした話になるかと思います。 背景 import をソートしようと思ったきっかけは、チームのメンバーが出した 1 つの PR（プルリクエスト）でした。 新規作成したファイルの import が、ライブラリからの import とその他のファイルからの import でそれぞれまとめられており、見やすい
ESLint v5.3.0 - Qiita
前 v5.2.0 | 次 v5.4.0 ESLint v5.3.0 has been released: https://t.co/qu3OgY0CDK — ESLint (@geteslint) 2018年8月4日 ESLint 5.3.0 がリリースされました。 小さな機能追加とバグ修正が行われました。 正規表現に関する2つのルールと非同期処理に関する2つのルールが追加されています。 質問やバグ報告等ありましたら、お気軽にこちらまでお寄せください。 🏢 日本語 Issue 管理リポジトリ 👫 日本語サポート チャット 🏢 本家リポジトリ 👫 本家サポート チャット 🚀 本体への機能追加 特になし。 💡 新しいルール #10511: no-misleading-character-class 複数のコードポイントから構成される文字を文字クラス構文 (例: /[👍🏻]/u)
セミコロンに関する ESLint ルール - Qiita
まえがき ESLint seems like the light saber of the ASI Wars these days. — Nicholas C. Zakas (@slicknet) 2018年1月12日 JavaScript の言語仕様に ASI 利用に関する警告を追加しようという動きがあって、セミコロン スタイルに関する議論が再燃しているようです。その中で「スタイルに関わらず避けられない落とし穴はあるので Linter ツールを利用すべき」というお話もあったので、セミコロンに関する ESLint ルールをまとめました。 ASI とは Automatic Semicolon Insertion (自動セミコロン挿入) の略。改行のある場所で構文エラーが検出されたときに自動的にセミコロンを挿入して再解釈する JavaScript の言語機能のこと。 セミコロン関連ルール 書式
JavaScript Standard Styleのススメ - Qiita
みなさんは、JavaScriptのコードを書くときに文字列は何で囲みますか？シングルクォート？ダブルクォート？ インデントに使用する文字はスペース？それともタブ？ JavaScript Standard Styleは、そのように千差万別なコーディングスタイルを統一するためのスタイルガイドの一つです。1 JavaScript Standard Styleのルール JavaScript Standard Styleには、次のようなルールがあります。 インデントはスペース2個 文字列はシングルクォートで囲む 未使用の変数は禁止 文末のセミコロンは禁止 キーワードの後にスペースを入れる 関数名の後にスペースを入れる 値の比較に==ではなく===を使用 ただしobj == nullはnull || undefinedをチェックするために許容される 常にNode.jsのerr引数をハンドル ファイルの
脱TSLintして、ESLint TypeScript Plugin に移行する - Qiita
なぜ脱 TSLint するのか いままで TypeScript の Linter として TSLint を使っていました。 ですが、TSLint は開発コミュニティが活発とはいえないことが以前から指摘されていました。 TSLint is dead - Klaus Meinhardt - Medium そんな中で、TSLint 開発チームは ESLint のプラグインとして TSLint の機能を統合していく typescript-eslint プロジェクトを開始し、TSLint は 2019年中に非推奨となる予定である ことが発表されました。 Roadmap: TSLint -> ESLint · Issue #4534 · palantir/tslint typescript-eslint/typescript-eslint: Monorepo for all the tooling w
JavaScript Standard Style
JavaScript Standard Style English • Español (Latinoamérica) • Français • Bahasa Indonesia • Italiano (Italian) • 日本語 (Japanese) • 한국어 (Korean) • Português (Brasil) • 简体中文 (Simplified Chinese) • 繁體中文 (Taiwanese Mandarin) これは、standardなJavaScriptのルールの概要です。 standardを学ぶための最も良い方法は、ただインストールしてあなたのコードで試してみることです。 ルール インデントには2個のスペースを使用する。 eslint: indent function hello (name) { console.log('hi', name) } エスケープ
Step by Stepで始めるESLint - Qiita
ESLintはJavaScriptを静的に検証するツールです。 わかりやすく言えば、チームメンバー間で統一された美しいコードを生成するためのツールです。 設定ファイルを書いておけば自動で変換することも可能です。 ESLintを始めよう！ JavaScriptのLintツールにはjslint, jshint, JSCSなどがあります。 2016/11 時点で npm trendsで比較した結果が以下の画像です。 http://www.npmtrends.com/jslint-vs-jshint-vs-jscs-vs-eslint 半年前はjshintと並んでいましたが、わずか半年の間にダブルスコアをつけています。 jshintは開発が鈍化しています。 またJSCSの開発チームはESlintに移行することを決めました。 以下に記載した有名ライブラリは開発時にESLintを使っています。 jQu
Laravel + React環境にESlintとPrettierを導入する - Qiita
始めに 以下はLaravel + Reactの構成で、EslintとPrettierを導入する流れをメモした記事となります。 bladeを使わずに、ReactやVueを利用するプロジェクトも増えてきてると聞いて、では、ESlintやPrettierを導入する時の手順はどうするんだろう？という事で、ちょっと試してみました。 Laravelのバージョンは、5.7です。 Laravel + Reactの構成で、Linterを導入したい人は、多少参考になるのではないかと思います。 そもそもESlintって？ ESlintとは、JavaScriptのための静的解析ツールで、シングルクォートやスペースの記法のルールを統一したり、単純な構文エラーを検出してくれたりします。 ルールは細かく設定できるので、各プロジェクトによって固有のコーディング規約を定義することもできるので便利です。 詳しくは公式を...
LaravelにESLintとPrettierを導入する時にやったことの全て - Qiita
はじめに この記事ではLaravel5.8にESLintとPrettierを導入します。 LaravelのMVCモデルでは、Viewの部分は *.blade.phpファイルによって書くことが一般的です。 しかし最近では、JavaScriptの描画技術の幅やページの描画スピードの速さなどを理由として、bladeは完全に捨ててVue.jsにフロントエンドの全てを任せる構成をとるプロジェクトが多いと感じています。 今回、ESLintを導入する対象となったLaravel5.8のプロジェクトは僕がPMをしているプロジェクトです。 このプロジェクトでも、Laravelのbladeはほとんど使用しておらず、画面描画は resourses/js/に置かれているVue.jsによって行っています。 今回の記事の対象者は、LaravelでVue.jsを使っているor使いたい方全てです。 なぜESLintとPre
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ESLintカスタムルールの作り方
Error: "prettier/@typescript-eslint" has been merged into "prettier" in eslint-config-prettier 8.0.0. - Qiita
ESLint Code Checks
JS(React)でコード整形 (ESlint+Prettier) - Qiita
