こんにちは。2年目のy_kwmtです。業務でESLintに触れる機会があったので、ESLintについてブログにまとめます。 ESLintとは インストール 実行 エラー、警告の種類 最後に 参考 ESLintとは ESLintは JavaScript のための静的検証ツールです。 ファイル内のバグを見つけたり、括弧やスペースの使い方などのスタイルが統一されているかチェックします。 自分で検証ルールを設定することができるので、プロジェクトに合わせたルールを設定することができます。 インストール ESLintはNode8.10.0以降を利用して実行することができます。 Node.js のパッケージ管理ツールnpmを利用してインストールします。 > npm install -g eslint バージョン確認はこちらから実行することができます。 > eslint -v v6.3.0 実行 ESLintを実行するにあたって以下の2つのファイルを用意します。 hello.js function helloWorld(name) { document .body.textContent = "Hello World. " + nama + "!" } helloWorld( "World" ); .eslintrc { " root ": true , // 親階層を見るか否か " parserOptions ": { // サポートするJavaScript言語オプション " ecmaVersion ": 6 // ES6構文 } , " env ": { " browser ": true , // ブラウザのグローバル変数を有効にするか否か " commonjs ": true , // CommonJSグローバル変数とCommonJSスコープを有効にするか否か " node ": true , // nodeのグローバル変数とnode特有のルールを有効にするか否か " mocha ": true // mochaのグローバル変数を有効にするか否か } , " extends ": [ " eslint:recommended " ] , " rules ": { " array-bracket-spacing ": [ " warn ", " never " ] , // 配列内の括弧の間隔 " arrow-body-style ": [ " warn ", " as-needed " ] , // 矢印関数本体の周りの波括弧の使用 " arrow-parens ": [ " warn ", " as-needed " ] , // アロー関数の括弧の一貫した使用 " arrow-spacing ": " warn ", // アロー関数の矢印の後か前かにスペースを要求するか " brace-style ": [ " warn ", " 1tbs " ] , // ブレーススタイルを適用 " camelcase ": " warn ", // キャメルケース " comma-spacing ": [ " warn ", { " after ": true }] , // カンマ前後のスペース " dot-notation ": " warn ", // ドット表記スタイルの使用の奨励 " eqeqeq ": [ " warn ", " smart " ] , // 型安全でない等価演算子を排除 " indent ": [ " warn ", 2 , { // インデント " SwitchCase ": 1 , // ネストの深さ " FunctionDeclaration ": { " parameters ": 1 } , // 関数宣言のパラメータのインデントレベル " MemberExpression ": 1 , // 複数行のプロパティチェーンのインデントレベル " CallExpression ": { " arguments ": 1 } // 関数呼び出し式の引数のインデントレベル }] , " key-spacing ": [ " warn ", { " beforeColon ": false , " afterColon ": true , " mode ": " minimum " }] , // オブジェクトリテラル・プロパティのキーと値の間の間隔を強制 " keyword-spacing ": " warn ", // キーワードとキーワードの間隔 " no-console ": " off ", // consoleを許可しない " no-empty ": " off ", // 空のブロックステートメントを許可しない " no-multi-spaces ": " warn ", // キーワード間の2つ以上のスペースを許可しない " no-redeclare ": " off ", // 複数回同じ変数を宣言許可しない " no-restricted-globals ": [ " warn ", " Promise " ] , // 指定したグローバル変数を利用しない " no-trailing-spaces ": " warn ", // 行の末尾に空白を入れない " no-undef ": " error ", // 宣言していない変数を使用しない " no-unused-vars ": [ " warn ", { " args ": " none " }] , // 利用していない変数を警告 " one-var ": [ " warn ", " never " ] , // ブロックスコープ内では1度の宣言で必要な変数宣言を行う " padded-blocks ": [ " warn ", " never " ] , // ブロック内のパディングを強制 " object-curly-spacing ": [ " warn ", " never " ] , // 1行でオブジェクト定義する際、波括弧の前後に空白を入れない " quotes ": [ " warn ", " single " ] , // クォート " react/prop-types ": " off ", // propsの値に対してPropTypesを指定していない場合に警告 " react/jsx-no-bind ": " off ", // jsx内でのbindを禁止する " semi ": [ " warn ", " always " ] , // ASIのセミコロンの使用を許可するか否か " space-before-blocks ": [ " warn ", " always " ] , // ブロック前のスペースを許可しないかするか否か " space-before-function-paren ": [ " warn ", " never " ] , // 関数の括弧の前にスペースを許可するか否か " space-in-parens ": [ " warn ", " never " ] , // 括弧内のスペースを許可するか " strict ": [ " warn ", " global " ] // use strict を記述すること } } こちらの.eslintrcのrulesにコーディングのルールを追加、削除することができます。 サンプルコードhello.jsに対して次のコマンドを実行します。 > eslint hello.js(ファイル名) eslintコマンドを実行すると次のような結果が得られます。 合計で7つのエラーが発生しています。左から順に行番号と位置、警告かエラーか、警告とエラーの種類、.eslintrcに追加されているルール名が表示されています。 エラー、警告の種類 Use the global form of 'use strict' 'use strict'を省略しているので、警告が発生しています。 警告を出さないようにするにはファイルの先頭に'use strict'を追記してください。 こちらは「"strict": ["warn", "global"]」でルールを設定、解除できます。 Expected indentation of 2 spaces but found 4 インデントでスペース2個分開ける必要があるのに4個分開けているので警告が発生しています。 警告を出さないようにするにはインデントを修正してください。 こちらは「indent」でルールを設定、解除できます。 Strings must use singlequote シングルクォートを使用しなければいけないが、ダブルクォートを使用しているので、警告が発生しています。 警告を出さないようにするにはシングルクォートを使用してください。 こちらは「"quotes": ["warn", "single"]」でルールを設定、解除できます。 nama is not defined 「nama」という変数が定義されていないと怒られています。 エラーを出さないようにするにはnamaという変数を定義するか、削除してください。 こちらは「"no-undef": "error"」でルールを設定できます。 Missing semicolon 行末に セミ コロンがないので、警告が発生しています。 警告を出さないようにするには セミ コロンを追加してください。 こちらは「 "semi": ["warn", "always"]」でルールを設定、解除できます。 発生した7つの警告、エラーの修正を行い、再度eslintコマンドを実行して問題なければ、何も表示されません。 最後に ESLintで発生した警告の改修を業務で行ったことをきっかけに、ブログにESLintについてまとめました。 JavaScript のコーディングを行う方々の参考になればと思います。 コードを変更する際、コードが読みづらいと理解、変更に時間がかかってしまうので、 他の開発者に迷惑をかけないよう、設定されているコード規約を守り、読みやすいコードを書くことを心掛けていきます。 参考 qiita.com eslint.org エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております! ご興味ありましたら是非ご確認をお願いします。 https://career-recruit.rakus.co.jp/career_engineer/ カジュアル面談お申込みフォーム どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。 以下フォームよりお申込みください。 rakus.hubspotpagebuilder.com ラク スDevelopers登録フォーム https://career-recruit.rakus.co.jp/career_engineer/form_rakusdev/ イベント情報 会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください! ◆TECH PLAY techplay.jp ◆connpass rakus.connpass.com