スプシの翻訳情報を用いた型付けと段階的i18n対応のためのカスタムESLint ### 内容 ・@nuxt/i18nのt関数にパッチを当ててスプシから生成された翻訳情報で型を付ける ・段階的なi18n対応のために特定ファイルから参照されるコードのみに翻訳漏れを検証するカスタムESLint
はじめに 相変わらず、TODOアプリを作りながら React の勉強をしています。 JavaScript に lint ツールがあるのを知らずにコーディングしていたのですが、ESLint を使ってみて便利だったので手順をまとめておきます。 eslint.org これで、 セミコロンのつけ忘れ console.log 残したままだった〜 なんていうこととはおさらばです! 環境 OS X 10.10.5 ESLint 2.3.0 ESLintの導入 npm から ESLint をインストールします。 $ npm install --save-dev eslint $ node_modules/.bin/eslint -v v2.3.0 設定ファイルの作成方法 ESLint の最大の魅力は、検証項目を自由に設定出来ることです。 逆に、検証項目が多すぎて導入が大変となっては元も子もありません。 初
ツール本体の改善 #5679: 多数のファイルを Linting するときの性能が改善された これは、先日の Google I/O で行われた 性能改善ツールの実演 (YouTube) で送られた Pull Request を元に行われた改善です。 Thanks Google! #6240: eslint:all が追加された これは、全ルールを ON にする組込み共有設定です。 新しいルールが追加される度に追加されたルールも自動的に ON になるため、"eslint:all" を利用すると minor リリースの度に CI ビルドが壊れてしまうかもしれません。そのためこの提案は棄却されていたのですが、要望が多かったために追加された次第です。 注意してご利用ください。 #6244: Semantic Versioning ポリシーが明記された ESLint は Semantic Versi
ESlint is a pluggable linting utility for JavaScript and JSX. On a today’s real world JavaScript web app, the complexity tends to grow, refactors will be needed, and although you probably know what you are doing, linting your code can save you a lot of headaches. Besides styling, 2 spaces vs 4 spaces vs tabs, semicolon vs no semicolon, and so on, with just this configuration, you can catch the mos
前 v2.0.0 | 次 v2.4.0 ESLint v2.3.0 released: https://t.co/4tRvrg5UGM — ESLint (@geteslint) 2016年3月5日 v2.1.0とv2.2.0では、v2.0.0リリースに入ってしまった誤検出やクラッシュのバグ修正が行われました。v2.3.0から通常の隔週リリースに復帰しています。 質問やバグ報告等ありましたら、お気軽にこちらまでお寄せください。 日本語の Issue 管理リポジトリ: https://github.com/eslint/eslint-jp チャット: https://gitter.im/eslint/eslint-jp ピックアップ: ECMAScript 2016 (ES7) をサポートしました。 設定ファイル.eslintrcの中で、0, 1, 2の代わりに"error", "warn"
はじめに ESLint の魅力の1つに、自分のプロダクトに合わせた独自ルールを作成することができるという点があります。 これから数回に分けて独自ルールの作り方・使い方を解析していきます。 この記事では、簡単なルールを作りながら、ESLint のルールの基本的な仕組みを解説します。 ここでは ESLint の基本的な使い方は扱いません。 ESLint の基本についてはESLint 最初の一歩等を御覧ください。 no-literal-call この記事では、最初の目標としてリテラルを関数呼び出ししている場合に警告するルールを作っていきます。 その過程で必要な知識を解説していくつもりです。 今回題材にするソースコードはこちら。 これは有効な JavaScript コードですが、実行すると必ず TypeError になります。 文字列を関数呼び出ししているので、当然ですね。 しかし ESLint
前 v4.8.0 | 次 v4.10.0 ESLint v4.9.0 has been released: https://t.co/ldgGclfMJw — ESLint (@geteslint) 2017年10月14日 ESLint 4.9.0 がリリースされました。 小さな機能追加とバグ修正が行われています。 質問やバグ報告等ありましたら、お気軽にこちらまでお寄せください。 🏢 日本語 Issue 管理リポジトリ 👫 日本語サポート チャット 🏢 本家リポジトリ 👫 本家サポート チャット 🚀 本体への機能追加 #9073: --fix-dry-run CLI オプション エディタ連携等の開発者向けです。 この CLI オプションは、--fixと同様にソースコードの自動修正を実行しますが、ソースコード ファイルを修正せず、デフォルトではどこにも表示しません。--fix-dr
3行 MSのTSチームがESLintを推進させ始めた まだ完璧ではないがだいぶ安定してきてそろそろTSでも現実的にESLintできるようになってきた気がする やってみましょう 手っ取り早く動かす設定だけみたい人は 💁🏻♀️ My airbnb based ESLint config for "typescript-eslint" with React & prettier · GitHub なぜTSでESLint? Q. TSLintあるんだしTSLintじゃダメなの? A1. ESLintにある便利なルールがTSLintにない(あるいは実現できない)ことがある 例えばReactのルールをやってるeslint-plugin-reactには(react/no-array-index-key)というルールがあって、配列のindex値をコンポーネントのkeypropsに使うと怒ってくれるも
Version 1.84 is now available! Read about the new features and fixes from October. November 2016 (version 1.8) 1.8.1 Recovery Build We are releasing a 1.8.1 recovery build to address a handful of key issues before the end of year. Thank you for helping us find them quickly! Fixed scrolling in large minified files (#17208) Resolved an issue with Copy command in certain contexts (#17232) Fixed an is
Transcript Ϡό ͍ E S L i n t / T S L i n t ϧ ʔϧ ࡞ ͬ ͪ Ό ͬ ͨ ͔ ͠ Ε ͳ ͍ 2 0 1 8 . 4 . 2 4 R o p p o n g i . j s # 2 P ro f i l e • ϑϩϯτΤϯυΤϯδχΞ at PERSOL • GitHub: boiyaa Twitter: boiyaaaaaa Ͳ Μ ͳ ϧ ʔϧ ͔ return จΛېࢭͯ͠Έͨ eslint-plugin-no-return tslint-no-return ݩʑଞͷؔܕݴޠνοΫͳจ๏Λਅࣅ͔ͨͬͨ ˍؔͷॻ͖ํΛἧ͔͑ͨͬͨతͳಈػɻ // Error function foo(bar) { const baz = bar ** 2; return baz; } // Error const foo = function
ESLint ルール を一通り日本語訳して一覧化してみました。 記載はできるだけ「デフォルトがどのような状態か」という内容で記載しています。 なお、最新情報および詳細情報は ESLint - Rules を参照してください。
As ESLint has continued to grow, we've started to outgrow the GitHub ecosystem. Team members spend hours each day triaging issues, many of which have incomplete information or are otherwise unclear. As such, we spend a lot of time just asking for more information ("what do you mean?", "what version are you using?", etc.). This has become increasingly frustrating for everyone on the team and ultima
すでにこちらの方の解説ブログもありますが、ESLint と Prettier を組み合わせる場合の推奨方法が変わりました。 Prettier と ESLint の組み合わせの公式推奨が変わり plugin が不要になった 本稿では リポジトリに適用してみて Before/After を具体的に見ていきます。 TL;DR エディタが ESLint にも Prettier にも対応しているならば ESLint から eslint-plugin-prettier を除外し、ESLint と Prettier が個別に実行されるようにする。 コンテンツ 推奨がどう変わったか どこをどう変更すればよいか Intellij IDEA / WebStorm の場合、どの設定を変更すればよいか 推奨がどう変わったか Prettier はもともと ESLint のプラグインとしても使うことができました。多く
March 5, 2015A Comparison of JavaScript Linting Tools A linting tool helps me avoid silly mistakes when writing JavaScript. Despite my many years of experience, I still type variable names incorrectly, make syntax errors and forget to handle my errors properly. A good linting tool, or a linter, will tell me about this before I waste my time—or worse, my client’s time. A good linting tool can also
Using ESLint and Prettier in a TypeScript Projectpublished on February 10, 2019 When it comes to linting TypeScript code, there are two major linting options to choose from: TSLint and ESLint. TSLint is a linter that can only be used for TypeScript, while ESLint supports both JavaScript and TypeScript. In the TypeScript 2019 Roadmap, the TypeScript core team explains that ESLint has a more perform
勢いで前の記事書いてみたけどちゃんと触るとちょいちょいハマりどころもあったのでメモ程度に細かいことを。 Editorの設定すると捗る。 このへん見ると良い http://eslint.org/docs/integrations/ 僕はatom推しなのでこいつらでさくっと入れれた。ちゃんと.eslintrc読んでくれるし今のところいい感じ。 https://atom.io/packages/linter-eslint https://atom.io/packages/linter .eslintignoreでlintしたくないものを設定 lintしないファイルの指定。gitignoreとかと一緒の形式 このあたりが鉄板か。testを含めるかどうかは趣味によるところかも bowerとか使わずDLしたファイルをどこから持ってきているような場合だとそいつらも含めるべきだろう。 { "env": {
前 v2.6.0 | 次 v2.9.0 ESLint v2.8.0 released: https://t.co/DnXHJH72rF — ESLint (@geteslint) April 15, 2016 小さな機能改善といくつかのバグ修正が行われました。 質問やバグ報告等ありましたら、お気軽にこちらまでお寄せください。 日本語の Issue 管理リポジトリ: https://github.com/eslint/eslint-jp チャット: https://gitter.im/eslint/eslint-jp 今回は機能改善等よりも、JSCS チームが ESLint チームに合流したことのほうが大きなニュースですね。 Welcoming JSCS to ESLint! https://t.co/UIMmL3jsQn — ESLint (@geteslint) April 14, 20
※こちらは2015/9/25日の古い記事です。(ESLint v1.5.1 released 22 September 2015) 現時点(2019/9/25)ではESLint v6.4.0です。 最新のドキュメントを読みに行くことを強くオススメします。 (近いうち新たに加筆してこちらに更新する予定です) こんにちは。森田と申します。芸人をしています。今回は ESLintのエラールール。日本語「ざっくりしたの」ないのか、と思ってぐぐしてもなさそうなので書きました。 よろしくお願いします。 ※使い方はこちら ※ここに載っているのが「ESlintのルール全て」ではありません。 他にこちら書きました ESLintのエラールール。日本語ざっくり解説[可能性あるエラー編] ESLintのエラールール。日本語ざっくり解説[ベストプラクティス編] ESLintのエラールール。日本語ざっくり解説[スタイル
eslint-plugin-react-hooks4.6.0 • Public • Published a year ago This ESLint plugin enforces the Rules of Hooks. It is a part of the Hooks API for React. Installation Note: If you're using Create React App, please use react-scripts >= 3 instead of adding it directly. Assuming you already have ESLint installed, run:
I’ve believed for a while that once an open source project reaches a certain level of ubiquity, the maintainers have a responsibility to ensure its survival for the good of the community. Over the past couple of years, I watched as important projects hit roadblocks: YUI abruptly shut down, Node.js splintered before merging back together, and Express was left in a state of disarray. Communities wer
フロントエンドエンジニアの渡辺です。 業務委託で働いてる身ですが記事書くことになりました。懐深い。 先日「ESLintのルール設定を全て確認して設定をする」ということをしました。 (ESLintはv4.0.0時点で240以上の設定項目があります。) 普段はルール設定が膨大なので必要な項目しか見ないのですが、 全てに目を通してみると得られた知見が多くあったので共有します。 設定方針 まず、ESLintの膨大なルール設定をどう設定するかを決めます。 やり方は大体3パターンに分類できます。 緩いルール設定(eslint:recommendedなど)を元に、設定を足して厳しくする。 厳しいルール設定(airbnbなど)を元に、設定を引いて緩くする。 既存のソースコードを解析し、ESLintの機能でルール設定を自動生成する。 今回は「入れたいルールに絞って設定したい」という思いがあり、 eslint
なぜ脱 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
こんにちは。 ESLint のメンテナ1や npm-run-all 等 npm-scripts 向け CLI ツールの開発をしている @mysticatea です。 今回は Node.js アドベント カレンダーということで、eslint-plugin-node を紹介したいと思います。 eslint-plugin-node は、Node.js 向けに特化した ESLint の追加ルールを定義しているプラグインです。 ESLint 本体に付属しているルール群 (通称コアルール) にも Node.js に特化したものがありますが、このプラグインのルールは諸事情2によりコアに入れなかったルールたちです。 ESLint 自体についてはこちらの記事をご覧ください。 ESLint 最初の一歩 インストール ESLint プラグインですので、npm を利用してインストールします。 ESLint をグロ
[[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 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 の言語機能のこと。 セミコロン関連ルール 書式
はじめに VSCodeのsettings.jsonを見直している中でフォーマッタの設定についてEslint、Prettierのドキュメントを見ていたらPrettierの公式ドキュメントで↓のページを見つけた。 Integrating with Linters#Notes When searching for both Prettier and your linter on the Internet you’ll probably find more related projects. These are generally not recommended, but can be useful in certain circumstances. First, we have plugins that let you run Prettier as if it was a linter rul
The release of ESLint v9.0.0 brought with it the rollout of the new configuration system, but also a series of changes to the rules API. These changes are necessary in order to prepare ESLint for implementing language plugins, which will give ESLint the ability to natively lint languages other than JavaScript. As a result, plugin authors needed to update their rules to work with v9.0.0, and unfort
4日朝に Vue.js #1 アドベント カレンダーを見たら3日のぶんが空いていたので急遽書きました。 私は .vue ファイルを静的検証するための ESLint Plugin を開発しています。 eslint-plugin-vue ( ESLint についてはこちら: ESLint 最初の一歩 ) このプラグインを使うと、.vueファイルのテンプレート部分について、リアルタイムで構文エラーを検出したり、v-bind 等のディレクティブの使い方が間違っていたときに指摘してくれたりします。また、公式の Vue.js スタイルガイド に沿うように自動成形することもできます。 🏃 試してみる eslint-plugin-vue を簡単に試してみるために、オンライン デモがあります (1度アクセスすれば、以後はオフラインでも使えます)。ここでコードを入力して、どのようなエラーが出るのか、どのよう
Configuring emacs to use eslint and babel with flycheck for javascript and React.js JSX ES6 and JSX are awesome, but because they are relatively new, there is little documentation on how to set them up with your environment. After spending time tracking down all the pieces and configuring for use with emacs, I created this article to help those that will follow. It enables realtime linting of JS a
prettier は JavaScript のコードフォーマッター。 そして prettier-eslint-cli を使うと勝手に .eslintrc の設定見つつフォーマットしてくれるので最高に便利だった。 そんなわけで ❤️ My Favorite Editor ❤️ である Visual Studio Code での快適なコードフォーマット環境を作るためにいろいろ調べたことをメモしました。 やったこと まずは普通にprettier使ってみる Visual Studio Code で保存時に自動フォーマット チーム開発のための git commit 時の自動フォーマット って感じ。 まずは普通にprettier使ってみる 必要なのは prettier-eslint-cli くらい。 あとは別途 eslint の設定を作っておく必要があるけどそこはまあお好きに。余談だけれど個人的に @
node アプリ + HTML/CSS/JavaScript のリポジトリを Dockernize したときの話。最近 Docker の機運が高まっているのはたまたまです。 同じプロジェクトのバックエンドのリポジトリ(ただし別言語)が Dockerfile 内で依存解決をしていたので、おもむろに RUN cd /src && npm i && npm run build 的な処理を記述したら時間がかかりすぎて爆死しました。 予想はしてましたが node_modules 以下の依存ツリーが肥大化しているのが原因です。 $ du -k -d 1 node_modules | sort -nr 466792 node_modules 85224 node_modules/sc5-styleguide 60400 node_modules/gulp-svg-sprite 32844 node_mo
ESLintとは JavaScriptのコードが正しいかチェックするツール。 以下の手順で簡単にインストールして使用可能。 バージョンは6.8.0のものなので使用バージョンによっては質問内容が異なる場合がある。 1. npmをインストールする https://nodejs.org/ 2. ターミナルを開く ターミナル(コマンドプロンプト)でESLintをインストールするディレクトリに移動 cd ディレクトリのパス 3. ESLintをインストールする npm i -g eslint または sudo npm i -g eslint 4. ESLintの初期設定を行う eslint --init How would you like to configure ESLint? と表示されるので「To check syntax, find problems, and enforce code s
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く