【ログ】Vue(TypeScript)とESLintの設定

※この記事はQrunchログからの移行記事です。

ESLint導入

Vue CLIでESLintを選択する。

? Pick a linter / formatter config:
> ESLint + Standard config

Script変更

vue-cli-service lintはデフォルトでauto fixが走るので、誤操作を防ぐためにScriptを変更しておく。

// package.json
{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
-   "lint": "vue-cli-service lint"
+   "lint": "vue-cli-service lint --no-fix",
+   "lint:fix":  "vue-cli-service lint" 
  },
  ...
}

ルール設定

comma-dangleとsemiは独自ルールを設定する。

// .eslintrc.js
module.exports = {
  rules: {
    'comma-dangle': ['error', {
      'arrays': 'always-multiline',
      'objects': 'always-multiline',
      'imports': 'never',
      'exports': 'never',
      'functions': 'never',
    }],
    semi: ['error', 'always'],
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
  },
  ...
}