create-react-appのESLint or TSLint ＋ Prettier設定とファイル保存時のPrettier＋Lint自動実行設定2018/4/20 · permalink reactフロントエンドjavascriptIntellij IDEAVisualStudioCode もう使わない設定がネット上に散見されていたり、両者で微妙な違いがあったりする罠があるので、少しだけまとめてみます。 最近のjsではprettierの設定が一般的になってきているので、create-react-appと組み合わせる方法について、少しだけまとめてみます。 ※ 本記事はmacを前提としているので、windowsの方は適宜読み替えて下さい。 BabelかTypescriptか Babel版：eslint + prettierの設定 create-react-appをグローバルにインストール
こんにちは、一般ノーマルエンジニアのgeta6です。社内ではpixiv SketchというサービスでJavaScriptを書く仕事をしています。今日はPrettierの話をします。 JavaScriptを書くのが大好きな皆さま各位におかれましては、きっと酒のつまみにコードを書くこともあるでしょう。しかし酔っ払いながらコードを書くと、往々にして上記のような書き散らかしをしてしまうことがあります。 このコードは動きます。動きますが、思わず目を背けたくなる汚さです。この世に存在することが許されるべきか疑うレベルです。ESLint先生も思わずブチギレです。当然ですね。 CIにLintを仕込んでいた場合は当然通りませんし、gitのprecommit hookにLintを仕込んでいた場合はgit commitすら許されません。堅牢なシステムは酔っ払いにコードをコミットする権利すら与えてくれないのです。
重い腰を上げてESLintを使い始めた。そろそろv1.0.0になるらしい。これは良いなと思ったところを簡単にまとめておく。ついでに引っかかって対処にちょっと悩んだところも。既にすごく好感触なので、このまま素直に乗り換えられると良いな。 package.jsonに設定が書ける 外部設定ファイルとしては.eslinrcの他にもpackage.jsonに混ぜ込むこともできる。フィールド名はeslintConfigで、それ以下は同じ。 { "eslintConfig": { "env": { "node": true } } } 通常のnpmパッケージでは別にした方が良さそうだが、依存解決にnpmを使うだけとかコマンド作るためだけのようなプライベートなケースでは特に気にせず混ぜてしまって良さそう。 no-multi-spaces 複数の連続した空白が検出できる。 var a = 1; これで警告出
JSHint JSHintとは、Javascript用構文チェッカーです。 構文チェッカーとしては、かなり厳しめのチェックをしてくれるJSLintがありますが、 これをforkして融通効くようにしたものがJSHintです。 詳しい経緯はここに。 とりあえずどんなチェックをしてくれるか知りたい場合、 このサイトでJavascriptのコード入力すれば、 どのようなチェックをしてくれるかわかります。 今回はコマンドラインからJSHintを使ってみたり、Sublime Text2から使ってみましょう。 環境構築方法 今回使用した動作環境は以下のとおりです。 OS : MacOS X 10.7.4 Node.js : v0.10.0 npm : 1.2.14 Grunt : 0.4 npmを使用してJSHintをインストールします。 このモジュールはグローバルオプションをつけてインストールしましょ
http://d.hatena.ne.jp/Craftworks/20100908/1283941430 Vim からこのようなツールを利用する場合にはコンパイラプラグインを書くとより便利． 以下のプラグインはかなり手抜きだけど，まぁ最低限の機能は提供できていると思う． if exists("current_compiler") finish endif let current_compiler = "gjslint" if exists(":CompilerSet") != 2 command -nargs=* CompilerSet setlocal <args> endif CompilerSet makeprg=gjslint\ % CompilerSet errorformat= \%+P-----\ FILE\ \ :\ \ %f\ -----, \Line\ %l\\,\ %
Google が先日 JavaScript のコーディングスタイルガイド Google JavaScript Style Guide (邦訳) を発表しましたが、今度はその文法に沿ってチェックをしてくれる Lint ツール Closure Linter を公開したようです。 (via. 「Google JavaScript Style Guide」に沿ってチェックしてくれる、グーグル製JavaScript文法チェッカー) 早速インストールして開発効率を上げるべく、開発環境に導入してみたいと思います。 Closure Linter は python 製なので、easy_install でインストールできます。easy_install が入ってなければ、下記コマンドでインストールしましょう。 curl http://peak.telecommunity.com/dist/ez_setup.py
「Google JavaScript Style Guide」に沿ってチェックしてくれる、グーグル製JavaScript文法チェッカー グーグルはJavaScriptコードのスタイルガイド「Google JavaScript Style Guide」を公開しており、同社自身もこのスタイルに従って開発を行っているとされています（スタイルガイドの日本語訳の例）。 このスタイルガイドに従った開発を支援してくれるツールがグーグルからオープンソースとして公開されました。同社のClosure Tools Blogのエントリ「Introducing Closure Linter」で紹介された文法チェックツールのClosure Linterです。 Closure LinterはPythonで書かれたツールで、コマンドラインから利用します。上記のエントリによると、次のようなJavaScriptをチェックに書
先日、Emacsのgrepモードの説明をしました。これの応用として、JavaScriptの構文チェッカーであるJSLintをEmacsから使ってみます。 Windows上のMeadow3での話ですが、Windows特有の部分は、他のOSでは問題にならないゴタゴタのところ（例：危険な^Z）だけです。 内容： Emacsのjavascriptモード JSLint Rhino とりあえず動かしてみる JSLintソースの修正 EmacsからJSLintを使う MakefileからJSLintを使う ●Emacsのjavascriptモード [追記] javascriptモードは推奨できません。「EmacsでJavaScriptソースを快適に読むために：js2-modeとエグズーベラントCtags」 をご覧ください。 [/追記] http://www.brgeight.se/ （2008-04時点
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
