ESlint
検出・修正
src/ 以下のlintエラーを検出code: (shell)
eslint --ext 'js,vue' src
lintエラーのうち、fixできるものを修正code: (shell)
# src/ 以下のエラーを修正
eslint --ext 'js,vue' --fix srccode: (shell)
# @vue/cli-plugin-eslint が入っていれば使える
# トップディレクトリ以下の全て (node_modules は除く) を修正
npm run lint
特定のエラーのみ検出・修正code: (shell)
# 検出
eslint --no-eslintrc --rule 'indent: "error", 2' src # 修正
eslint --fix --no-eslintrc --rule 'indent: "error", 2' src tips
eslint-nibble
ルールごとの警告数を一覧で検出し、選択したルールに該当するエラーを修正できる
code:_
npm install --no-save eslint-nibble
npx eslint-nibble <directories and files to lint>
基本設定
TypeScriptを使う場合
install
code: (shell)
npm install --save-dev eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser
prettierを使いたい場合は更に
code: (shell)
npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier
eslintrc.js
prettierを使わない場合は適宜消す
code: (js)
module.exports = {
root: true,
parser: '@typescript-eslint/parser',
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:prettier/recommended'
],
parserOptions: {
sourceType: 'module'
},
env: {
es6: true,
browser: true,
node: true
},
rules: {
'no-plusplus': 'off',
'no-console': 'off',
'func-names': 'off',
'prettier/prettier': [
'warn',
{
singleQuote: true,
semi: false,
bracketSpacing: true,
tabWidth: 2,
trailingComma: 'none'
}
]
}
}
extends に追加したもの
plugin:@typescript-eslint/recommended : 本家ESLintのルールのうち、TypeScriptでうまく動かないものを修正したルールを入れてくれる
no-unused-vars など
plugin:prettier/recommended : Prettierと競合するルールを自動で無効にしつつ、ESLintの中でPrettierが動くようにしてくれる
Vue.js を使う場合
インストール
Via vue-cli (Recommended):code: (bash)
vue add @vue/cli-plugin-eslintVia npm:code: (bash) npm install --save-dev eslint eslint-plugin-vue
メモ
正しく :is="Hogehoge" がある場合でも、エラーになってしまう
eslint-plugin-vue@6.0.0 以降で発生、5.0.0以前のバージョンでは問題なし
config
code: (js)
// .eslintrc.js
module.exports = {
root: true,
parser: 'vue-eslint-parser',
parserOptions: {
parser: 'babel-eslint',
sourceType: 'module'
},
env: {
es6: true,
browser: true,
node: true
},
extends: [
'eslint:recommended',
'plugin:prettier/recommended',
'plugin:vue/recommended',
'prettier/vue'
],
rules: {
'no-plusplus': 'off',
'no-console': 'off',
'func-names': 'off',
'vue/no-template-shadow': 0,
'vue/no-unused-components': [
'error',
{
// suppresses all errors if binding has been detected in the template
ignoreWhenBindingPresent: true
}
],
'prettier/prettier': [
'error',
{
singleQuote: true,
semi: false,
bracketSpacing: true,
tabWidth: 2
}
]
}
}