愚直にESLintを導入した話 | メルカリエンジニアリング
こんにちは、エンジニアの@sota1235です。 タイトルの通り、今回は愚直に改善をした話をします。 メルカリのJavaScript メルカリにおけるJavaScriptの活用場面は以下のようなものがあります。 メルカリWeb アプリ内Webview 社内ツール React Native Node.js製のbotやGoogle App Scripts etc… いずれもサービスにとって重要なものであり、サーバサイドエンジニアであってもJavaScriptに触る機会は少なくありません。 かくいう私も普段はサーバサイドエンジニアですが、JavaScriptコードを書いたりレビューする場面が多くあります。 そんな中でWebチームにおいて、JavaScript開発でいくつか問題がありました。 課題その1: JavaScriptのレビューコスト問題 1つ目の課題としてJavaScriptのコードをレ
ESLintのエラールール。日本語ざっくり解説[ベストプラクティス編] - Qiita
※こちらは2015/9/25日の古い記事です。（ESLint v1.5.1 released 22 September 2015） 現時点(2019/9/25)ではESLint v6.4.0です。 最新のドキュメントを読みに行くことを強くオススメします。 (近いうち新たに加筆してこちらに更新する予定です) こんにちは。森田と申します。芸人をしています。今回は ESLintのエラールール。日本語「ざっくりしたの」ないのか、と思ってぐぐしてもなさそうなので自分の勉強のためにも書きました。 こちらの記事は数あるカテゴリーの中の「ベストプラクティス編」です。 他カテゴリーはこちら ESLintのエラールール。日本語ざっくり解説[可能性あるエラー編] ESLintのエラールール。日本語ざっくり解説[スタイル編] ESLintのエラールール。日本語ざっくり解説[ES6編] ESLintが勧める「ベスト
![ESLintのエラールール。日本語ざっくり解説[ベストプラクティス編] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/6126b06a24d68ac6c7146567a1029f46d92663c9/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9RVNMaW50JUUzJTgxJUFFJUUzJTgyJUE4JUUzJTgzJUE5JUUzJTgzJUJDJUUzJTgzJUFCJUUzJTgzJUJDJUUzJTgzJUFCJUUzJTgwJTgyJUU2JTk3JUE1JUU2JTlDJUFDJUU4JUFBJTlFJUUzJTgxJTk2JUUzJTgxJUEzJUUzJTgxJThGJUUzJTgyJThBJUU4JUE3JUEzJUU4JUFBJUFDJTVCJUUzJTgzJTk5JUUzJTgyJUI5JUUzJTgzJTg4JUUzJTgzJTk3JUUzJTgzJUE5JUUzJTgyJUFGJUUzJTgzJTg2JUUzJTgyJUEzJUUzJTgyJUI5JUU3JUI3JUE4JTVEJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz0xNTFkNjA5MDA4Zjc3ODQ1Y2Q0MzU5M2ZjMDRjNWYyZg%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBNLUlTTyZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9ZDdmYWEyZjViNWRmODU3ZDUzYmY5ZDRiNzQyMDA0MTE%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D08a7d69df51c03111c3cab9fe34fefc7)
CSS の Lint ツール対応表 - Qiita
いくつか CSS の Linter を試してみたので、それぞれ自分のチェックしたいことができるのかを記録します。 やりたいこと ユニバーサルセレクタ使わないようにしたい ID にスタイルを適用しないようにしたい js- プレフィクスが付いてる class にはスタイルを適用しないようにしたい 複数のセレクタを指定する場合は , の後で改行したい { の前には半角スペースを一つ入れたい、その後で改行したい インデントは半角スペース 2 つにしたい プロパティの並びはアルファベット順にしたい プロパティの後、スペースを入れずに : その後に半角スペースを 1 つ入れたい 値が 0 の時は単位をつけないようにしたい 0.123 は .123 と、 -0.456 は -.456 と表記したい margin や padding など、ショートハンドを使える場合はショートハンドを使いたい 色の指定は
CSSLintのRulesの超訳
訳注 これは超訳です。 CSSLintは「なんでこんなルールなんだ…」とイラっとすることが多いですけど、それぞれにそれなりに理由があります。まぁ勿論無視するべきなルールとかもあります。例えば見出し要素の再定義禁止とかはHTML5に対するCSSなら無理な話です。そんなわけでどんな理由なのかを簡単に訳しました。無視するかどうかは自分で決めましょう！ この訳はCSSLintと同じライセンスで提供されます。 Possible Errors Beware of box model size 枠線とパディングはwidthやheight等に含まれないので、同時に指定すると多分君が思ってもみない結果になるよ。だから警告するんだ！ Rule ID: box-model Require properties appropriate for display もちろんあるセレクタに対してどんなCSSプロパティを一
ここがすごいぞ！ stylelint！ - Qiita
ESLintのようなconfigでPostCSSプラグインとして動くstylelint。 唐揚げチャーハンのような「美味いものと美味いもの組み合わせたら絶対おいしいじゃん！」みたいなプロダクトが実際とても良かったので色々利点を記載。 導入についての手順などはすでに記事があったので、そちらへリンクしたい CSSのLintをstylelintにする ESLintっぽくて良い所 javascriptのLinterとしてスタンダードになってきたESLintに非常に良く似て作られているので、一度そちらを導入していればstylelintの導入はおそらくすんなり出来る。 また、ESLintの持っていた良い所をそのまま持ってきたような良さがある。 config周りがESLintにすごく近いので覚えることが少なめ 肝となるstylelintのconfigは、だいたいこんな感じで、ESLintにかなり近く作ら
TypeScriptを始める – tscコマンド、Grunt導入、型定義ファイルの使用、tslintで構文チェックなど
TypeScriptが盛り上がってきています。昨年2014年4月2日に正式版となる「TypeScript 1.0」がリリースされてから、現在は「TypeScript 1.4」と順調にバージョンアップもなされてきています。それから、ドットインストールでも、プレミアム版となりますが、ついに「TypeScript入門」が2/23に公開されました。ECMAScript 6の正式リリースも6月と差し迫ってきていることなので、そろそろ自分の開発環境でも使ってもよいかなと思い、今回自分のMacにもTypeScriptを導入することにしました。 TypeScriptとは TypeScriptTypeScriptはCoffeeScrtiptなどと同様に「altJS」と呼ばれるJavaScriptの代替となるプログラミング言語です。JavaScriptの弱い部分を補うように設計されていて、JavaScript
reduxはredux-actionsギプスをつけて養成 - まさたか日記
reactアプリケーション開発においてコンポーネントに引数として渡されるpropsと、スコープの大きな実行時変数としてのcontextに加えて、もっぱらコンポーネント内部の状態管理としてのstateをあれこれ操作するのがデータフローの基本だったのですが、ここ一年ぐらいで様子が一気に変わってしまいました。reactの普及と対象とするアプリケーション規模が大きくなることによる複雑性の課題に応えてFluxが提唱され、その実装バリエーションで淘汰を経たreduxの登場です。それまで標準であったコンポーネントstate管理によって多数散在してしまった複数ステートマシンの連携を否定して、アプリケーションレベルで一つの大きなステートマシンをつくってpropsを通じてのみコンポーネントツリーに反映させるという。たくさんあるものをn:nに対応させていくってのは複雑を、常に抽象から具体へ1:nになる流れに修正
ESLintでReactとES2015の構文チェック(eslint-config-airbnb) - dackdive's blog
ES2015の構文チェックと言えば ESLint ですね。 ESLint は "The pluggable linting utility" というだけあって、Rules と呼ばれる膨大なチェック項目の中から 自分がチェックしたい項目を取捨選択し、最終的に .eslintrc という設定ファイルを用意する必要があります。 ただ、さすがに一から自分でルールを構築するのは面倒なので、通常は Shareable Configs と呼ばれる機能を使い、他の人が大体いい感じにセットアップしたものを共有することができます。 eslint-config-airbnb もこの Shareable Configs の1つで、React に関する lint も含まれているのでとりあえずはここから始めるのが良さそうです。 インストールと設定 （package.json は作成済みとします） eslint-con
DockerfileをLintするにはhadolintが良さそう - tehepero note(・ω<)
2016 - 07 - 08 DockerfileをLintするにはhadolintが良さそう Docker DockerfileもLintしたいなぁという欲がずっとあって調べてみたらこんなのを見つけた。 github.com Haskell で書かれたDockerfileのLintツールのようです。 インストール Mac ならhomebrewでできます。 $ brew install hadolint Lintしてみる サンプルとして提示されていたDockerfileを使ってみます。内容は以下のようなDockerfile。エラー吐きそうなのが一目瞭然ですね。 FROM debian RUN export node_version="0.10" \ && apt-get update && apt-get -y install nodejs="$node_verion" COPY pack
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - gruntjs/grunt-contrib-csslint: Lint CSS files.
https://github.com/stylelint/stylelint/blob/master/docs/user-guide/cli.md
GitHub - validator/grunt-html: Grunt plugin for HTML validation, using the official Nu Html Checker (v.Nu)
https://github.com/palantir/tslint/blob/master/tslint.json
Exclude files and directories · Issue #38 · palantir/grunt-tslint
JSLint,The JavaScript Code Quality Tool