JavaScript
Node.js
ESLint


ESLint の導入


インストール

npm init -y

npm i -D eslint


コードスタイルの設定

$(npm bin)/eslint --init


選択


ESLintをどのように使用しますか?

? How would you like to use ESLint? 

To check syntax only
To check syntax and find problems
❯ To check syntax, find problems, and enforce code style


あなたのプロジェクトはどんな種類のモジュールを使っていますか?

❯ JavaScript modules (import/export) 

CommonJS (require/exports)
None of these


あなたのプロジェクトはどのフレームワークを使っていますか?

  React 

❯ Vue.js
None of these


コードはどこで実行されますか?

❯◉ Browser

◯ Node


プロジェクトのスタイルをどのように定義しますか?

  Use a popular style guide 

❯ Answer questions about your style
Inspect your JavaScript file(s)


あなたはあなたの設定ファイルをどのようなフォーマットにしたいですか?

❯ JavaScript 

YAML
JSON


どのスタイルの字下げを使用しますか?

  Tabs 

❯ Spaces


文字列にはどのような引用符を使用しますか?

  Double 

❯ Single


どのような行末を使用しますか?

❯ Unix 

Windows


セミコロンが必要ですか。

(Y/n) Y


あなたはあなたの設定ファイルをどのようなフォーマットにしたいですか?

❯ JavaScript 

YAML
JSON

Successfully created .eslintrc.js


除外の設定

echo 'node_modules/

dist/
vendor/'
> .eslintignore


package.json に scripts を追加

vi package.json

  "scripts": {

"lint:fix": "eslint . --fix",
"lint": "eslint ."
},


ESLint の実行

npm run lint


ESLint の自動修正

npm run lint:fix


設定ファイル


シンプルな設定の見本

echo 'module.exports = {

'
env': {
'
browser': true,
'
es6': true,
},
'
extends': 'standard',
'
globals': {
'
Atomics': 'readonly',
'$': '
readonly',
'
SharedArrayBuffer': 'readonly',
},
'
parserOptions': {
'
ecmaVersion': 2015,
'
sourceType': 'module',
},
'
plugins': [
'
vue',
],
'
rules': {
'
semi': ['error', 'always'],
'
comma-dangle': [2, 'always-multiline'],
'
no-var': 'error',
},
};
'
> .eslintrc.js


IDE の拡張機能に ESLint がある場合は入れる


IDE の拡張機能に HTMLhint がある場合は入れる