イイダリョウのブログ。JS以前、フロントエンドの開発環境についていろいろ調べた記事を書きました。その後、Gulp、Babel、Webpackのフロント開発三兄弟を体験しました。今回はESLintを使った構文チェックをやってTRY!それではいきませう。クモのようにコツコツとWeb開発環境まとめqiita.comそもそもLintとは何か「ナントカLint」みたいなツール名はよく見かけるけどそもそもLintって何だろう?翻訳すると「糸くず」という意味のようだ。C言語のソースコードに対し、コンパイラよりも詳細かつ厳密なチェックを行うプログラムである。静的解析ツールとも呼ばれる。コンパイラではチェックされないが、バグの原因になるような曖昧な記述についても警告される。構文(シンタックス)レベルのチェックだけでなく、意味(セマンティクス)レベルのチェックまで実行するものもある。Wikipediaふむ、C言語などのコンパイルしてくれる言語はその時点で構文チェックが行われるが、Lintはさらにチェックに特化したツールのようだ。フロントエンドの場合、JSはコンパイル不要のスクリプト言語なので、ブラウザのデベロッパーツールよりもチェックに特化したツール、という理解でいいかな。Lint導入せずにデベロッパーツールで凌いでいた時代で、フロントエンドのLintツールだけども、自分がコーディングを始めた5年前には確か「JSLint」というのが有名だったように思う。当時の自分は黒い画面アレルギーで導入にハードルを感じていた。そのため「構文チェック?デベロッパーツールでエラーが分かるから使わなくてええやん」みたいな認識だったwエラーコードをググッたりalert()やconsole.log()で挙動を調べて凌いでいた。クモのようにコツコツとデベロッパーツールについてはブレイクポイントとかを使った細かい検証もしたい。MEDIA構文チェック、今はESLintが定番のようだJSLint、JSHint、ESLintなどいろんなツールがあるようだが、今はESLint一択に落ち着いているようだ。QiitaGoogleトレンドで見ても差は歴然。いう事で、これから構文チェックを始めるならESLint!時が来た!それだけだ。ESLintのインストールESLintの導入方法について色々調べたがこちらの記事が初級者にとって分かりやすそうだったので参考にさせていただいた。-vESLintを入れるフォルダを作る。今回は「eslint_test」とした。cdコマンドでeslint_testフォルダに移動。-yローカルにESLintをインストールする。eslintpackage.jsonにESlintの記述がでた。--initnpxはグローバルインストールせずにパッケージを実行できる便利なコマンド。Developers.IOなんか質問が始まる。(矢印キーを使用)❯JavaScriptモジュール(インポート/エクスポート)CommonJS(必須/エクスポート)どれでもないあ、モジュール使わないのに選んじゃった。