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