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 の Plugin と Extend の違い
ESLint の Plugin と Extend の違いを説明できますか？ 違いを知っている人からすれば（というかそもそも全然違うものなので）、「え、それ悩む？」となるところなのですが、ユーザー向けドキュメントには Plugin の定義が書かれておらず、Extend の説明も不十分で、さらに Plugin の設定をする Extend なんてものがあるお陰で、慣れないうちは混乱すると思います。 特に最後の事象は個人的には印象的で、「Plugin の設定をしていないのに Plugin が設定されている。Plugin って何？」といった混乱の原因になっていました。 この混乱は ESLint の全体感を掴むと混乱しなくなるのでそういう話を書きたいと思います。 実際に混乱してた人も多そうです（6/24 更新) 結論を言うと、Extend は Extend です。設定を Extend する役割を持って
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 が何をどう解決したかを理解できないはずなので
ESLint(あるいはTSLint)とPrettierを併用する - ひと夏の技術
[追記:] TypeScriptでESLintを使う方法も書きました tech-1natsu.hatenablog.com TSLintではなくESLintを使いたい方はこちらもあとで読んでみてください。 なお JS with ESLint TS with TSLint この構成をお求めの方は当記事(下記)です。 Prettier導入するにあたって色々絡み合うものがあるので調べたりしたことをまとめておく。 基本的にリントとフォーマッタのどちらか片方しか使わないという場面は、リリースを意識したプロジェクトではあまりないと思うので、実質この組み合わせは必須のようになってくる気がしている。 それで、Prettierとはなんぞや…JSのコードフォーマッタで、、というPrettierの概要についてはググればめっちゃ出てくるので省略。 この記事は導入したいけどなにをどうすればいいんやという人向け。 と
VimでESLintをグローバルインストールせずに、Syntastic+ESLintでES2015の構文チェックをする - dackdive's blog
（2016/10/24追記） しばらく Syntastic を使ってましたが、Neomake というより快適なプラグインが見つかったので今はそちらを使ってます。 （追記ここまで） はじめに vim で ES2015 を書いていると、構文チェックもコーディングと並行して行いたいと感じるようになります。 Syntastic はそのための vim のプラグインで、JavaScript に限らず様々な言語の構文チェックを行うことが可能です。 参考：以前 Python 用に設定した時の記事 今回は JavaScript の代表的な linter (syntax checker) である ESLint を使い、vim で ES2015 を書くときの構文チェック環境を構築してみます。 よく見る設定 「vim es6 syntastic」とかでググってよく見るのは以下のように、ESLint をグローバルイ
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
ESLintについての細かいあれこれ - Qiita
勢いで前の記事書いてみたけどちゃんと触るとちょいちょいハマりどころもあったのでメモ程度に細かいことを。 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": {
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
