Why I don't use Prettier
[[toc]] 中文 Chinese Version I have started writing this post multiple times but never ended up posting it. I wasn't able to figure out a proper way to express my position about Prettier. But this time, I think I should try harder to explain that for future reference. First of all, I am not against Prettier. Actually, I love it. I Love Prettier Prettier is a great tool, and it saved me a lot of time
eslint-plugin-import-accessではじめるディレクトリ単位カプセル化
こんにちは。この記事は筆者が製作した ESLint 向けプラグイン eslint-plugin-import-accessを紹介する記事です。 このプラグインにより TypeScript プログラムに擬似的なpackage-private exportの概念が生まれます。JSDoc で@packageとアノテートされたexport宣言は、そのファイルが属するディレクトリの外からインポートすることができなくなります。 従来、TypeScript で可能なカプセル化の最大の単位は「ファイル」であり、ファイルからエクスポートしない変数はそのファイル（モジュール）の中に閉じている一方で、一旦エクスポートしたものはプロジェクトのどこからでもインポート可能になります。これでは不都合な場合がありました。 最近の具体的な例としてはRecoilが挙げられます。筆者の以前の記事では、Atom や Select
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
ESLint, Prettier, VS Code, npm scripts の設定: 2021春
eslint-plugin-prettier 時代の設定をずっと使っていたので、重い腰を上げてアップデートした作業メモ。 背景 Prettier 公式ドキュメントによれば、現在 eslint-plugin-prettier は以下の問題があるとして推奨していない。 エディタが真っ赤になる（人間が気にする必要のない問題なのに！） 直接実行するより遅い（同様に prettier-eslint も遅い） ESLint と Prettier の間に間接レイヤーを追加するので、壊れやすい なるほど正しい。 一方、別々に実行することで以下のような問題も出てくるので、解決していく。 CLI とエディタを個別に設定する必要がある エディタで ESLint と Prettier の協調動作が必要 CLI (npm scripts) で ESLint と Prettier の対象ファイルが別管理になる 上記の
Prettier と ESLint の組み合わせの公式推奨が変わり plugin が不要になった
前に書いた ESLint と Prettier の共存設定とその根拠について が公式推奨が変わったことにより一部間違った情報になっているのでその訂正記事です。 該当記事に書いた内容は Prettier と ESLint の関係を読み解く上で役立つ情報だと思うので、警告とこのページへのリンクを書いた上でそのまま残しておきます。 (追記) この記事の内容も間違った内容を書いていました。なので一度大幅な訂正をしています。prettier-eslint も推奨ではありません。 変更点の要約 Prettier と ESLint の組み合わせについて公式 の推奨方法が変わりました。 きっといつかこの情報も古くなるので直リンクではなく、ドキュメントの GitHub のリンクを貼っておきます。 ドキュメント自体のリンクはこちらです。 新しいドキュメントを要約すると、 Linter と Formatter
Lint
設定 プロジェクトで lintをするために ESLint を使用しているのであれば、TypeScript ファイルを ESLint で lint する方法は次のとおりです。 必要なことは、@nuxtjs/eslint-config-typescript をインストールすることだけです： すでに @nuxtjs/eslint-config を使用している場合、Nuxt TypeScript ESLint に含まれているので依存関係から削除してください。
ESLint と Prettier の共存設定とその根拠について
注意 この記事は 2020 年 09 月 24 日現在、古い情報となりました。 eslint-plugin-prettier の利用は非推奨であると公式がアナウンスを出しています。 そのことについては Prettier と ESLint の組み合わせの公式推奨が変わった にてまとめましたので、こちらもご覧ください。 また eslint-plugin-prettier は公式推奨ではなくなりましたが、それは Editor などの外部環境の進化によるものでこのプラグイン自体に何か問題が起きたわけではありません。 そして eslint-plugin-prettier を利用した設定方法、特に eslint-plugin-prettier と eslint-config-prettier が何を解決していたかを知らないと、prettier-eslint が何をどう解決したかを理解できないはずなので
JavaScriptで3 > a > 1と書いてしまった話 - sasurau4のブログ
はじめに 仕事でチームメンバーみんなでTypeScriptを書いているのだが、たまにmarkdownの中のJavaScriptをいじることがある。 ある日、ある数字aが3より小さく1より大きいという条件を書く必要があった。 そのときに書いたコードがこれ if (3 > a > 1) { // 省略 } プログラミングをやっていると、こういうときは 論理演算子で2つの式を結合して3 > a && a > 1 と書くように手癖がつくものだが、小学生のときから習ってきた数学的な記法はふとしたときに顔を出す。 特に、現代のエディターによる便利な補完に慣れきってしまっている状態で一切の補完が効かない状態で油断してJSを書くと上記のようなコードが爆誕する。 今回はこれのお話。 3 > a > 1の返り値 ところで、3 > a > 1の式、実はJSのSyntaxErrorにならないのを知っていただろうか
TypeScript on ESLint の未来 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? The future of TypeScript on ESLint:https://t.co/PTCWKWN22s — ESLint (@geteslint) January 18, 2019 ESLint の TypeScript サポートの今後について、公式にアナウンスがありました。 要点をまとめると、 TypeScript チームが TSLint から ESLint に切り替えていくと発表したよ。 ESLint チームと TypeScript チームが協力して開発を進める場として、typescript-eslint プロジェクト
eslint-find-rulesを使いESlintの全ての項目を設定する - Qiita
"find-new-rules": "npm-run-all --parallel find-new-rules:*", "find-new-rules:jest": "eslint-find-rules --unused ./other/test/jest.js", "find-new-rules:flow": "eslint-find-rules --unused ./other/test/flow.js", "find-new-rules:main": "eslint-find-rules --unused ./index.js", "test": "npm run find-new-rules" さらにGreenKeeperやsemantic-releaseなどを組み合わせることで簡単に常に最新のeslint-configを保つことが出来ると思います。 自分はESLintの設定を一
ESLint導入環境にprettierを追加して運用する - Kenta Katoh's Blog
ESLint導入環境にprettierを追加して運用する July 15, 2017 prettierというコードフォーマッタが最近OSSでよく使われていて、OSSに限らず複数人開発しているプロジェクトなどで非常に有用だと感じたので、導入した。以下はその際の覚え書き・注意点など。 prerrierとは Node.js製のコードフォーマッタ。以下のコードに対応している。 JavaScript, including ES2017 JSX Flow TypeScript CSS, LESS, and SCSS JSON GraphQL ESLintとどう違うのか 似たようなツールでESLintが思い出されると思う。prettier公式のドキュメントにも言及があるが、ESLintのリンティングには大きく分けて二種類あって、 Formatting rules Code-quality rules p
ESLint 最初の一歩
We're excited to announce that ESLint v6.0.0 has been released: https://t.co/EO4ZrZIMYM — ESLint (@geteslint) 2019年6月22日 ESLint は JavaScript のための静的検証ツールです。コードを実行する前に明らかなバグを見つけたり、括弧やスペースの使い方などのスタイルを統一したりするのに役立ちます。同様のツールとしては JSLint, JSHint 等があります。 ESLint の特色は、 すべての検証ルールを自由に on/off できる 自分のプロジェクトに合わせたカスタムルールを簡単に作れる 豊富なビルトイン ルール (5.0.0 時点で 260 個) に加えて、たくさんのプラグインが公開されている ECMAScript 2015 (ES6), 2016, 201
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - xojs/xo: ❤️ JavaScript/TypeScript linter (ESLint wrapper) with great defaults
import * as 構文とパフォーマンス最適化 - Qiita
next.js/packages/eslint-config-next/index.js at canary · vercel/next.js
GitHub - google/gts: ☂️ TypeScript style guide, formatter, and linter.
GitHub - francoismassart/eslint-plugin-tailwindcss: ESLint plugin for Tailwind CSS usage
GitHub - jsx-eslint/eslint-plugin-jsx-a11y: Static AST checker for a11y rules on JSX elements.
typescript-eslint/packages/eslint-plugin/ROADMAP.md at main · typescript-eslint/typescript-eslint
GitHub - buzinas/tslint-eslint-rules: Improve your TSLint with the missing ESLint rules
