NEW ARTICLE
Google Colaboratory コマンドパレットを開くショートカットキー
  1. HOME
  2. Eslint
  3. CentOs8にEslintの導入手順

CentOs8にEslintの導入手順

CentOs8にEslintの導入手順

JavaScriptのコードのチェックツールEslintの導入手順

※node.jsがインストールされていることが前提です

目次

環境

  • OS  CentOS Linux release 8.0.1905 (Core)
  • node V10.16.3
  • npm 6.9.0
  • Eslint  1.6.0

※centos8にnodeのインストール手順はこちら

Eslintとは

javascriptのコード問題を自動的に確認するためのツール（リンター） で 、全ての検証ルールを、自分の好きに設定できるのが特徴

事前準備

検証用のディレクトリの作成とpackage.json作成を行う

## 検証ディレクトリ作成
mkdir eslint

## 移動
cd eslint

## 全てyesなので
npm init -y

Eslintインストール

ローカルインストールでインストールする

## インストール
npm i -D eslint

<出力結果>
npm ERR! code ENOSELF
npm ERR! Refusing to install package with name "eslint" under a package
npm ERR! also called "eslint". Did you name your project the same
npm ERR! as the dependency you're installing?
npm ERR! 
npm ERR! For more information, see:
npm ERR!     <https://docs.npmjs.com/cli/install#limitations-of-npms-install-algorithm>

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/testuser/.npm/_logs/2019-10-29T08_28_16_492Z-debug.lo

エラーが発生。

エラーが発生した原因は、ディレクトリ名をeslintにしていたため発生。package.json のnameを下記のように修正

"name": "eslint",
↓
"name": "",

再度インストール

## インストール
npm i -D eslint

## バージョン確認
eslint -v

<出力結果>
bash: eslint: コマンドが見つかりませんでした...

ローカルインストールなので、エラーになる。npxコマンドを使用する

## バージョン確認
npx eslint -v
or
./node_modules/.bin/eslint src -v

<出力結果>
v6.6.0

グローバルインストール と ローカルインストール について

グローバルインストール

実行ファイルをパスを指定しなくて実行できる
ただし、バージョンアップ等で、動作しなくなるプロジェクトが発生する場合があるので注意

ローカルインストール

プロジェクト単位でバージョンを管理できる
プロジェクトごとなため、 容量がとられてしまうが、基本的にはローカルインストールを利用すべき

npxについて

npxコマンドを実行すると次の順番でコマンドを探してくれます

  1. ローカルパッケージ（node_modules/.bin）
  2. 環境変数PATH
  3. npmレジストリ（パッケージから検索し自動で実行）

.eslintrc.json 作成

ESLintの設定ファイルを作成する

## .eslintrc.json作成
 npx eslint --init

色々聞かれるが、とりあえず全部ENTERキー押下

.eslintrc.jsonが下記の内容で作成される

module.exports = {
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": "eslint:recommended",
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
    }
};

Eslint実行

適当なjsファイルを作成して実行

function test() {
    var message = 'test';;
    var List = ["a",,'b',"c"];
}

eslintを実行

## 実行
npx eslint test.js

<出力結果>
 1:10  error  'test' is defined but never used              no-unused-vars
  2:9   error  'message' is assigned a value but never used  no-unused-vars
  2:26  error  Unnecessary semicolon                         no-extra-semi
  3:9   error  'List' is assigned a value but never used     no-unused-vars
  3:16  error  Unexpected comma in middle of array           no-sparse-arrays

✖ 5 problems (5 errors, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.

上記のようにエラーが出力される。ちなみに、.eslintrc.jsonがないと下記のエーラーが表示される

No ESLint configuration found in /home/user/eslint.

ディレクトリ内の全てのjsをチェックする場合は下記

## 全ファイルチェック
npx eslint *.js