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コマンドを実行すると次の順番でコマンドを探してくれます
- ローカルパッケージ(node_modules/.bin)
- 環境変数PATH
- 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
-
前の記事
CentOs8へgulp.js導入手順 2019.10.29
-
次の記事
CSSのブラウザキャッシュをすぐに更新させる 2019.10.30
コメントを書く