ESLint's new config system, Part 2: Introduction to flat config - ESLint - Pluggable JavaScript Linter
In my previous post, I talked about how the eslintrc config system had grown to be more complex than necessary through a series of small, incremental changes. The flat config system, on the other hand, was designed from the start to be simpler in a number of ways. We took all of the learnings from the previous six years of ESLint development to come up with a holistic approach to configuration tha
Angular v11.0.0のリリースとともに、Angularの開発ロードマップも更新された。 この記事では開発ロードマップから “Migrate To ESLint” が消えたことと、Lintingに関するAngular CLIの動きについて簡単にまとめる。 TL;DR要点だけ知りたい人は次のことだけ持ち帰って欲しい。 TSLintからESLintへの移行はサードパーティのangular-eslintの利用を公式に推奨している Angular CLIのデフォルトLinter(TSLint)はv12で非推奨になる angular-eslintAngularチームがTSLintからESLintへの移行を考え始める以前から、angular-eslintプロジェクトはTSLint+Codelyzerの機能をESLintで再現するツールを開発してきた。 近々angular-eslintのリリース
はじめに ある日、クリーンアーキテクチャで定義した各レイヤーの依存関係が正しいかどうかを ESLint がチェックしてくれると楽だよねという話が出た(今のプロジェクトではこのような構成を取り入れております) ESLint に追加したいルールの要件を整理してみるとわざわざ plugin として公開するほど汎用的なものでもないと思い、プロジェクト内で完結する ESLint の独自ルールを作ってみたというお話 ゴール 下記に示すディレクトリ構成で以下の条件をチェックしたい domains配下のファイルはinfrastructures、adapters, usecases, view-modelsを import しない usecase配下のファイルはinfrastructures、adaptersを import しない view-models配下のファイルはinfrastructures、ad
module.exports = { plugins: [ "vue" ], extends: [ 'eslint:recommended', 'plugin:vue/recommended' ], rules: { // タグの最後で改行しないで "vue/html-closing-bracket-newline": [2, {"multiline": "never"}], // 不要なカッコは消す "no-extra-parens": 1, // 無駄なスペースは削除 "no-multi-spaces": 2, // 不要な空白行は削除。2行開けてたらエラー "no-multiple-empty-lines": [2, {"max": 1}], // 関数とカッコはあけない(function hoge() {/** */}) "func-call-spacing": [2, "neve
We've talked quite a bit about linting in the past two posts of this series, so I thought it's time to give eslint the proper limelight it deserves. Overall eslint is so flexible, that you can even swap out the parser for a completely different one. That's not a rare scenario either as with the rise of JSX and TypeScript that is frequently done. Enriched by a healthy ecosystem of plugins and prese
現代ではESLintを使って、チーム内でのコーディングルールの定義や自動修正をするのは当たり前になってきています。 しかし、ESLintのルールにないチーム独自のコーディングルールの場合はどうしていますか？ 人力でやっていると 毎回PRで個別に指摘していて、非効率 人がチェックするので、漏れてしまうことがある などの問題が起きてきます。 そんな時にESLintのルールを自分達で作ることができると一気にこれらの問題を解決することができます。 そこで本記事ではESLintルールの作り方をハンズオン形式で紹介します。 テンプレートも用意しているので、実際に手を動かしながら読んでみてください。 【実装編】の今回はルールの作成までを行います。 次の【導入編】でパッケージ化し、プロジェクトに導入するところをやっていく予定です。 ではいってみましょう！ 今回作成するルール あなたは架空の会社キャットテク
ESLint v7.2.0 - Qiita
前 v7.1.0 | 次 v7.3.0 ESLint v7.2.0 has been released!https://t.co/8dSO0Hc5X7 — ESLint (@geteslint) June 6, 2020 ESLint 7.2.0 がリリースされました。小さな機能追加とバグ修正が含まれています。 また、日本語のサポートチャットが Gitter から Discord に移動しました。 質問やバグ報告等ありましたら、お気軽にこちらまでお寄せください。 🏢 日本語 Issue 管理リポジトリ 👫 日本語サポート チャット (招待リンク) 🏢 本家リポジトリ 👫 本家サポート チャット (招待リンク) [PR] ESLint は開発リソースを確保するための寄付を募っています。 応援してくださると嬉しいです。 ESLint の GitHub Sponsors 私個人の Git
{ "extends": ["plugin:@typescript-eslint/recommended", "next/core-web-vitals", "prettier"], "rules": { "import/no-duplicates": "error", "no-restricted-imports": [ "error", { "paths": ["next/link"], } ] }, "overrides": [ { "files": ["src/components/Link.tsx"], "rules": { "no-restricted-imports": "off" } } ] } shareable confisとして読み込んでいるのは3つです。 plugin:@typescript-eslint/recommended next/core-web-vita
Announcing the ESLint Community GitHub organization - ESLint - Pluggable JavaScript Linter
In our 2022 year in review, we briefly mentioned a couple of project kickoffs, and we’re excited to now announce the official eslint-community GitHub organization. The strength of ESLint is in its ecosystem, and we continue to investigate different ways of further supporting that community. We began by donating to community projects, to ensure that high-value projects were receiving the funds they
Accelerating development with type safety / 🌎Web 🎉TypeScript ⚛️React 🏝Kotlin / 📝http://zenn.dev/t_keshi / 💼 @SansanTech
GitHub - davidjbradshaw/eslint-config-auto: Automatically configure ESLint based on project dependencies
Automatically configure ESLint based on project dependencies This project got created because I got tired of managing eslint in multiple different projects and trying to keep them all vaguely in sync. It will automatically configure the most appropriate version of the airbnb eslint rules and a curated selection of plugins based on the contents of your project's package.json file each time you run
更新履歴 2024年3月31日 → npm scriptsについて追記しました。 動機 リンター周りの設定で理解が曖昧な箇所があったので、 クリアにして諸々の設定を見直したい と考えたからです。 リンターや、フォーマッターで他人の設定をコピペして設定している人も多いかと思います。 それだと応用が効かなかったり、古い設定をそのまま使用することになってしまいます。 方針 最小限の設定から足りないものを足していくスタイル 魔改造しない これはやっといた方がいいものだけに絞る 一個一個噛み砕いて、設定していく 成果物 こちらに成果物のリポジトリを用意しました。 記事を読むのは面倒な人はこちらからどうぞ。 commitは記事の順番にそっているので、記事の流れに沿って設定できます。 (1)Next.jsをインストール
![[2023年]Next.js + eslint周りの設定](https://cdn-ak-scissors.b.st-hatena.com/image/square/3d357d05e01bd7fccb69a7c021836ee78f09ac70/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--dVtQfZD3--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255B2023%2525E5%2525B9%2525B4%25255DNext.js%252520%25252B%252520eslint%2525E5%252591%2525A8%2525E3%252582%25258A%2525E3%252581%2525AE%2525E8%2525A8%2525AD%2525E5%2525AE%25259A%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3AHTMLGO%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EtL0FPaDE0R2hqc01qa3F3b0kycWV0ZTJVTHJPVDZva3hXWFV3NzlPNTJWemZlSGc9czI1MC1j%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
📈 Tracking: ESLint v9 support · Issue #18391 · eslint/eslint
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
JavaScriptのコード品質をさらに高めるeslint-plugin-unicornのススメ - Qiita
JavaScriptのコードを書く際、ESLintによって静的解析をするのはデファクトスタンダードであると言ってもいいでしょう。 eslint-config-standardやeslint-config-airbnbなどのShareable Configsを使うことが多いかと思いますが、それらにくわえてeslint-plugin-unicornも併用すると、コード品質のさらなる向上が期待できます。 導入方法 eslint-plugin-unicornをインストールします。
JSer.info #688 - zx 8.0.0がリリースされました。 Release 8.0.0 · google/zx パッケージサイズの削減、$.syncの追加、inputオプションの追加、AbortControllerのサポート、killメソッドの追加などが行われています。 そのほかには、$.verboseのデフォルト値をfalseに変更、ssh APIの削除などの変更も含まれています ESLint 9.0.0がリリースされました。 ESLint v9.0.0 released - ESLint - Pluggable JavaScript Linter Node.js 18.18未満のサポート終了、Flat Configをデフォルト化、ビルトインのformatterの一部をパッケージに移動、JSDocのルールを削除、eslint:recommendeddの更新などの変更が行われ
ESLint Stylistic
ESLint StylisticStylistic Formatting for ESLint Formatting and Linting in one go, with fully customizable rules
What's coming in ESLint v9.0.0 - ESLint - Pluggable JavaScript Linter
Last month, the Technical Steering Committee (TSC) met to finalize the features for ESLint v9.0.0. This post outlines our plans for v9.0.0. You can keep up to date everything that is planned for v9.0.0 on our project board. Development plan Due to the large number of breaking changes planned for v9.0.0, we have decided to develop this release in two phases: Alpha. The alpha release will be compris
ESLint のススメ
まとめ ESLint とは 「どっちでも書ける記述方法のうちこっちにして」と決めたルールセットとそれに違反しているかどうかを自動検出(リント)・訂正(フォーマット)するツール。 つまり、いわゆる静的解析ツール、またの名をリンター。フォーマッターも兼ねられ プラグイン方式でチェックできることを増やすことができる。 ESLint の良いところ 人によってバラバラになってしまいがちな記述方式に一定の統一感を出せる。コードを読む速度が上がる。 どっちでもいい時に迷わなくて済む。時短。 変更合戦になりにくくなる。これも時短。 ルールの追加などをプラグイン方式で行うので、チームで好きにルールの厳しさを決められる。 プラグインはルールセットなんだけど、その中でも個別にオンオフできるし、全部オンとか、react/recommended などおすすめルールセットもある。 みんな使ってる。（情報少ないとかでは
JSer.info #695 - Vitest v2.0.0-beta.5がリリースされました。 Release v2.0.0-beta.5 · vitest-dev/vitest --merge-reportsがカバレッジをサポート、Promiseベースのmockに対するAssertionの追加、ブラウザモードの改善などが含まれています。 VitestのBrowser Modeは、jsdomやhappy-domを置き換える形で、コンポーネントテストのための仕組みとして作られています。 開発中のVitest 2.0ではCommands APIとmodule mockingが追加されています。 次のIssueに、VitestのBrowser Modeの目的や方向性についての解説が書かれています。 Vitest Browser Mode · vitest-dev/vitest · Discus
JavaScriptを書いていて保存を押しても一瞬修正されてすぐに戻ってしまう....こんな経験ありませんか？ PrettierとESLintのフォーマッターがコンフリクトしている状態です🥺 今まで自分は起きるたびに色々いじってたらなんか直ってしまい、しばらくしてまた遭遇するということを繰り返し、毎回イライラしていました。 そこで、本記事では 【概念編】でなぜコンフリクトが起きるのかを理解する 【実践編】で実際に手を動かしてコンフリクトを再現し、解決する。 の流れでコンフリクトを完全理解していきます。 これを読めば今後PrettierとLinterのコンフリクトでイライラすることはなくなるでしょう！ ではいってみましょう！ 【概念編】なぜコンフリクトが起きるのか コーディングルールにおける2つのカテゴリ PrettierやESLintの話にいく前にコーディングルールの2つのカテゴリについ
【古い情報】Vue+TypeScriptをESLint+Prettierでなるべくコンパクトな設定でLint+整形する - Qiita
警告 この記事の情報は現時点では古くなっています。 ESLintとPrettierを組み合わせる場合、別の記事を参考にしてください。 例： Prettierの導入とESLintとの併用について 経緯については以下を参考にしてください。 Prettier と ESLint の組み合わせの公式推奨が変わり plugin が不要になった Vue+TypeScriptを使用したソースコードに対しESLintとPrettierを適用するにあたり、ESLint関連のパッケージそれぞれがどのような役割を持っているか調べてみると思ったよりもコンパクトな内容(plugins,parser,parserOptionsなどは指定しなくても大丈夫)でLint+整形が出来ることを確認できたため、最終的に確認できた設定と調べた内容を共有します。 動作確認はVSCodeで行っています。 事前に準備が必要なもの Vue3
VisualStudioCodeでESLint拡張機能が動かない気がする時に確認したこと | キリウ君が読まないノート
タグ Node.js の新しい記事Node.js http-serverをhttpsで動かす (2023-02-12)TypeScriptでJSON Web Tokenの作成と検証を行う (2021-11-06)WSL2 + Docker + VSCode で動く PHP 7.2 + Node.js 14 + MariaDB 10.5 + Nginx の開発環境 (2021-10-12)WSLのUbuntu18で Node.js 13.12 の開発環境作るメモ (2020-04-05)Node.jsで色んなパスを取得 (2020-04-03)
何を説明するか下記は、TypeScript を使った React アプリ実装用に用意した ESLint 設定ファイル (.eslint.yml) の例です。 トップレベルのプロパティとして、env や extends などがありますが、これらが何を意味しているかをざっと説明します。 .eslint.yml（例） root: true env: browser: true es2021: true parser: '@typescript-eslint/parser' parserOptions: ecmaVersion: 2021 project: ./tsconfig.json plugins: - react - react-hooks - '@typescript-eslint' extends: - eslint:recommended - plugin:react/recomme
TypeScript: ESLintで`_`を変数に含めた時に`no-unused-vars`のルールを無効化する方法MEMO - Madogiwa Blog
Vue.jsのsetupのprops等、引数を使わないけど型定義だけ設定しときたい場合等、no-unused-varsを無効化したいケースがあります。 github.com 毎回eslint-disable-lineを使うのも手間なので、他の静的解析のツールの慣習に従って_始まりの場合は許容したかったのですが意外と簡単にできたのでメモ やり方 やり方は簡単で以下のような設定を入れるだけです。 "rules": { "@typescript-eslint/no-unused-vars": [ "warn", { "argsIgnorePattern": "^_", "varsIgnorePattern": "^_", "caughtErrorsIgnorePattern": "^_", "destructuredArrayIgnorePattern": "^_" } ] }, argsIgn
Nuxt v2.9.2でTypeScript, eslint, Prettier環境構築 + VSCodeの設定(20190921tailwind.css導入追記) - Qiita
Nuxt v2.9.2でTypeScript, eslint, Prettier環境構築 + VSCodeの設定(20190921tailwind.css導入追記)JavaScriptVue.jsESLintVSCodeNuxt 20190921 tailwind.css導入追記 20190921 plugin:nuxt/recommendedについて追記 はじめに 今までNuxtは使ってきたものNuxt+TypeScriptは導入したことがなかったので導入してみました。 意外と環境構築で手間取ったので、備忘録として残しておきたいと思います。 想定 Nuxtは使っていたけど、TypeScriptは入れてなかった人 Nuxt以外でTypaScriptは使っていて、TypeScript自体は書いている人 開発環境 Nuxt 2.9.2 node 12.6.0 TypeScript 3.5.3
Start a clean Next.js project with TypeScript, ESLint and Prettier
Start a clean Next.js project with TypeScript, ESLint and PrettierLast updated: December 13, 2021, 11:00 AM TypeScript is awesome. So is Prettier. In this post, we will learn how to configure ESLint to make it work with Prettier within a Next.js app, and finally how to integrate this tooling with Visual Studio Code. Let's do it! Note: you can have a look at the end result here: github.com/paulintr
ESLint の Legacy Config と Flat Config における Plugin 構造の違いと両対応 Plugin の構造
概要 ESLint v9 への対応を進めていると、いくつか Flat Config に対応していない Plugin や Config に遭遇することがあります。その際に、Legacy Config のみ対応している Plugin と、Flat Config も対応している Plugin の両方の構造の違いを知っておくと、Flat Config に向けた対応をすすめる上で便利だったため、その違いを俯瞰するための資料としてまとめました。 前提 以下で例示する Plugin は、パッケージ名を eslint-plugin-example として、いくつかのカスタムルールと、カスタム Processor を持つものを想定しています。 Plugin の実装方法や API の解説はしない。 ESLint v9 では、v8 で廃止予定となった API が削除されているため、Plugin を作成したり、E
Published 31 Aug, 2020 under Release Notes ESLint v7.8.0 released We just pushed ESLint v7.8.0, which is a minor release upgrade of ESLint. This release adds some new features and fixes several bugs found in the previous release. Highlights Support for logical assignment operators and numeric separators has landed in ESLint! To enable linting this syntax, please set ecmaVersion to 2021: { "parserO
Writing custom TypeScript ESLint rules: How I learned to love the AST
Writing custom TypeScript ESLint rules: How I learned to love the AST In this blog post, we’re going to learn how to write a custom ESLint plugin to help you with otherwise manual tasks that would take you days. The task? An eslint rule that adds generic to enzyme shallow calls, so we avoid type errors about our components during tests. Let’s dive into the world of ASTs: They’re not as scary as th
webpack5の設定方法 - EJS、TypeScript、Dart SassとAutoprefixer、ESLint、Prettierを自動化する
webpack5の設定方法 - EJS、TypeScript、Dart SassとAutoprefixer、ESLint、Prettierを自動化する 今回はwebpack5でTypeScriptとDart Sass、Autoprefixer、EJS、ESLintとPrettierなどの設定方法について説明します。 設定する内容は以下です。 EJSDart SassCSSのAutoprefixerの設定TypeScriptAirbnbでESLintのルールを強化ESLintとPrettierの設定開発サーバーの立ち上げ、ホットリロードライセンス情報をjsファイルの中に含める 説明する環境は以下です。 macOS Catalina v10.15.5Visual Studio Code v1.57.0webpack v 5.50.0node.js v16.13.1
GitHub - mizdra/eslint-interactive: The CLI tool to fix huge number of ESLint errors
The default ESLint output contains a lot of useful messages for developers, such as the source of the error and hints for fixing it. While this works for many use cases, it does not work well in situations where many messages are reported. For example, when introducing ESLint into a project, or when making big changes to the .eslintrc of a project. In these situations, the output of ESLint can be
GitHub - coderaiser/putout: 🐊 Pluggable and configurable JavaScript Linter, code transformer and formatter, drop-in ESLint superpower replacement 💪 with built-in support for js, jsx typescript, flow, markdown, yaml and json. Write declarative codemods i
Perfection is finally attained not when there is no longer anything to add, but when there is no longer anything to take away. (c) Antoine de Saint Exupéry 🐊Putout is a JavaScript Linter, pluggable and configurable code transformer, drop-in ESLint replacement with built-in code printer. It has a lot of transformations that keeps your codebase in a clean state, removing any code smell and making c
Published 09 Oct, 2021 under Release Notes ESLint v8.0.0 released We just pushed ESLint v8.0.0, which is a major release upgrade of ESLint. This release adds some new features and fixes several bugs found in the previous release. This release also has some breaking changes, so please read the following closely. Highlights There are several breaking changes in v8.0.0. We’ve created a migration guid
Vue3 + TypeScript + Prettier に対応した ESLint Flat Config の最小構成
タイトルの構成を Flat Config で実現しようと思ったら、若干ハマったので雑に書きました。 TL; DR 別途必要なライブラリはインストールしてください。 import globals from "globals"; import pluginJs from "@eslint/js"; import tseslint from "typescript-eslint"; import pluginVue from "eslint-plugin-vue"; import vueParser from "vue-eslint-parser"; import eslintConfigPrettier from "eslint-config-prettier"; export default [ { languageOptions: { globals: globals.browser }
Microsoft donates $10,000 to ESLint as first FOSS Fund recipient - ESLint - Pluggable JavaScript Linter
Published 13 Aug, 2020 under Sponsorships Microsoft donates $10,000 to ESLint as first FOSS Fund recipient We are happy to announce that Microsoft has donated $10,000 to ESLint, as part of their FOSS Contributor Fund. It is an honor to be supported by Microsoft and to be their first recipient. We are grateful to the software engineers, Jan Pilzer and Steve Faulkner, for nominating ESLint, and the
ESLintのルールを全部読む
全部読んで、使うのか使わないのか、使うならどういう設定にするか、を全部考える。 airbnb-base を使いがちだったが自社のルールセット作るうえでは通ったほうが良い道なのではと思ったので、やる。 array-callback-return ArrayやArray.prototypeに生えている関数(Arrany.fromやArray.prototype.everyなど)が引数にcallbackを取る場合に、callbackで必ずreturnを書くことを強要するルール。 // だめな例 /*eslint array-callback-return: "error"*/ var indexMap = myArray.reduce(function(memo, item, index) { memo[item] = index; // returnがない }, {}); var foo =
eslintを最大限活用してTypeScriptの型安全を少しずつ高める方法 - ITANDI Engineer Blog
はじめに あけましておめでとうございます！ OHEYAGOの開発の田渕です。 OHEYAGOではTypeScriptを導入し、少しでもバグが発生しにくい状態を心がけています。 しかし、リリース直後(昨年9月末)にはTypeScriptの良さを活かしきれていない状態でした。具体的には、 型を明示していない箇所が多かった any型が横行していた という状態でした。 そこで、リリース後に追加開発をこなしながら、コツコツTypeScriptの型システムの恩恵を受けやすいようリファクタリングを進めたので、その記録を書き留めておきます。 実際にTypeScriptを使っているけれどあまり秩序が保てていない、という方や、これからTypeScriptのプロジェクトを始めるけれど、eslintの設定をどうしようと思っている方などの参考になれば嬉しいです。 方針 typescript-eslintを活用して、
typescript-eslint is the tooling that enables standard JavaScript tools such as ESLint and Prettier to support TypeScript code. We've been working on a set of breaking changes and general features that we're excited to get in released! 🎉 We'd previously blogged about v6 in Announcing typescript-eslint v6 Beta. This blog post contains much of the same information as that one, but updated for chang
Help us understand the problem. What is going on with this article?
やること Github Actionsを使って、PRが作成されたタイミングでテストや構文解析を実行するというものです。 説明しないこと Github Actionsとは？ それぞれの導入方法 細かい部分 Github Actionsを使用する時のポイント Marketplaceを探すとかなり豊富に色々な開発者が開発をしたActionが利用出来るようになっているので、まずそちらを見てみるといいかもしれません。 Github Actionsの導入方法 Github Actionsを導入したいgithubで管理されているrepoに以下のようにworkflow定義用のmain.ymlを作成します。 上記でmain.ymlとしていますが、ここのファイル名は自由です。 かつ、複数のymlファイルを配置して、actionを分割することも可能です。 $ cd path/to/myrepo $ mkdir
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Angular: ESLintサポートの現状 2020 Autumn | Marginalia
プロジェクト内で完結するESLintのローカルルールを作りたい
もうprettierで消耗したくない人へのvueでのeslint設定 - Qiita
Speeding up the JavaScript ecosystem - eslint
【実装編】手を動かしながら学ぶESLintルールの作り方
eslintをflat configで書き換える - すな.dev
ESLint Flat Configで誰もが簡単に Lintを設定できる時代へ | ドクセル
[2023年]Next.js + eslint周りの設定
2024-04-11のJS: zx 8.0.0、ESLint 9.0.0、Flowの`component`構文
2024-06-03のJS: vitest v2.0.0-beta.5(browser mode)、Rspack v0.7、ESLint Migrator
PrettierとESLintのコンフリクトの原因を理解する、解決する
ESLint の設定ファイル (.eslintrc) の各プロパティの意味を理解する
ESLint v7.8.0 released - ESLint - Pluggable JavaScript Linter
ESLint v8.0.0 released - ESLint - Pluggable JavaScript Linter
Announcing typescript-eslint v6 | typescript-eslint
【Nuxt.js】ESLintの設定とVSCodeで保存時に自動整形する方法 - Qiita
Github ActionsでeslintとJestを実行するworkflow - Qiita