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)
Error: "prettier/@typescript-eslint" has been merged into "prettier" in eslint-config-prettier 8.0.0. - Qiita
Error: "prettier/@typescript-eslint" has been merged into "prettier" in eslint-config-prettier 8.0.0.errorESLintprettier Cannot read config file: /hoge/fuga/node_modules/eslint-config-prettier/@typescript-eslint.js Error: "prettier/@typescript-eslint" has been merged into "prettier" in eslint-config-prettier 8.0.0. See: https://github.com/prettier/eslint-config-prettier/blob/main/CHANGELOG.md#vers
セミコロンに関する 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
JS(React)でコード整形 (ESlint+Prettier) - Qiita
いろいろ調べてて疲れたので、とりあえず結論だけまとめる 方針 色々あるけど、以下の方針が良さそう。 いけてる整形ツールのPrettierでコードフォーマットをしつつ、構文チェックもしたいのでES Lint内でチェックする cf. Prettier 入門 ～ESLintとの違いを理解して併用する～ - Qiita VSCodeでも実行できるようにする 入れるものは以下 ES Lint (lintツール) https://github.com/eslint/eslint Prettier (コード整形ツール) https://github.com/prettier/prettier ES Lintのコード整形ルールを全て無効にする https://github.com/prettier/eslint-config-prettier PrettierをES Lint内で実行できるようにする ht
ESLintの力で秩序あるAtomic Designを後世に残す | ryonkmr.com
Retty Advent Calendar 2018 12日目の記事です。 昨日は @yongyu-li さんの Go interfaceの理解しにくいところ でした。 ちょうど現場でGolang触りはじめたばかりの自分には割とタイムリーな話題でした。 TL;DR めちゃくちゃ大げさなタイトルですが、単に Atomic Design を導入しようとした現場で 抜け漏れ 運用忘れて形骸化するリスク 運用メンバーがレビューの権威化する これらの課題を ESLint のルールを作ることで解決しようとした話です 完成した eslint-plugin-atomic-design はこちら これは「このプロジェクトから俺が居なくなったあと、俺のコードは一片も残らなくていいから、秩序だけでも残ってくれ……！駆動」で開発しました。 前提条件: よくある現場の話 Rettyのweb版は2011/6にリリース
2018/07/12 に発生したセキュリティ インシデント (eslint-scope@3.7.2) について - Qiita
2018 年 7 月 12 日に、ESLint 開発チームが管理する npm パッケージに悪意あるコードが挿入されるセキュリティ インシデントがありました。 ESLint からのアナウンス: https://eslint.org/blog/2018/07/postmortem-for-malicious-package-publishes npm からのアナウンス: https://status.npmjs.org/incidents/dn7c1fgrr7ng 以下の場合に npm install を実行したユーザーの npm アカウントへのログイン情報 (アクセストークン) が盗まれた恐れがあります (盗まれたアクセストークンはすでに無効化されています)。 日本時間の 18:49 から 19:25 の約 1 時間のあいだに npm install を実行し、eslint-config-e
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ESLint Code Checks