@wiz-creative/eslint-config

WizのESLintルールセットです。

このパッケージは、Wizでの使用を目的としています。
現在開発中のため、ルールが変更される可能性がありますのでご注意下さい。

導入手順

1. パッケージインストール

• eslint
• @wiz-creative/eslint-config

npm install --save-dev eslint @wiz-creative/eslint-config

2. .eslintrc.js作成

プロジェクトに応じて以下を記述して下さい。

• JavaScript

module.exports = {
  extends: ['@wiz-creative/eslint-config'],
}

• TypeScript

module.exports = {
  extends: ['@wiz-creative/eslint-config/presets/typescript'],
}

• React

module.exports = {
  extends: ['@wiz-creative/eslint-config/presets/react'],
}

• React + TypeScript

module.exports = {
  extends: ['@wiz-creative/eslint-config/presets/react-typescript'],
}

• Vue

module.exports = {
  extends: ['@wiz-creative/eslint-config/presets/vue'],
}

• Vue + TypeScript

module.exports = {
  extends: ['@wiz-creative/eslint-config/presets/vue-typescript'],
}

• Next.js

module.exports = {
  extends: ['@wiz-creative/eslint-config/presets/next'],
}

3. package.json修正

○○はそれぞれの拡張子に変更して下さい。

"scripts": {
  ...
  "lint": "eslint './src/**/*.○○'",           
  "lint:fix": "eslint --fix './src/**/*.○○'"
}

使用方法

Lintエラー検出

npm run lint

Lintエラー検出・自動補完

npm run lint:fix

各Lintルール・エラー詳細

• base
• TypeScript
• React
• Vue

補足

Lintルールを変更する場合

.eslintrc.js

module.exports = {
  extends: "@wiz-creative/~~",
  // 追記
  rules: {
    ~~~
  }
}

Lint管理を除外する場合

.eslintrc.js

module.exports = {
  extends: "@wiz-creative/~~",
  // 除外フォルダのパスを指定
  ignorePatterns: ['/~~']
}

Lintエラーが表示されない or Prettierの自動フォーマットが効かない場合

以下お試し下さい。

• VS Codeを再起動して下さい。
• VS Codeのプラグイン【ESLint】をインストールして下さい。
• VS Codeのsettings.jsonで以下設定をfalseに変更して下さい。

"editor.formatOnSave": false  
"○○.format.enable": false