VueのESLintルールを作成

base.js

@@ -1,17 +1,11 @@
 module.exports = {
-  env: {
-    browser: true,
-    es6: true,
-    node: true
-  },
   parserOptions: {
     ecmaVersion: 2019,
     sourceType: 'module',
     ecmaFeatures: {
       impliedStrict: true,
-      jsx: true
-    }
+      jsx: true,
+    },
   },
-  plugins: ['import'],
-  extends: ['./rules/base.yml']
+  extends: ['./rules/base.yml'],
 };

package.json

@@ -6,8 +6,10 @@
   "scripts": {
     "lint": "eslint --ext js .",
     "test": "npm run test:js && npm run test:ts",
-    "test:js": "eslint --ext js -c base.js --no-ignore samples/js/**/*.js",
-    "test:ts": "eslint --ext ts -c typescript.js --no-ignore samples/ts/**/*.ts"
+    "test:js": "eslint --ext js -c samples/js/.eslintrc.yml --no-ignore samples/js/**/*.js",
+    "test:ts": "eslint --ext ts -c samples/ts/.eslintrc.js --no-ignore samples/ts/**/*.ts",
+    "test:vue": "eslint --ext vue -c samples/vue/.eslintrc.yml --no-ignore samples/vue/**/*.vue",
+    "test:vuets": "eslint --ext vue -c samples/vue-ts/.eslintrc.js --no-ignore samples/vue-ts/**/*.vue"
   },
   "repository": {
     "type": "git",
@@ -20,14 +22,18 @@
   },
   "homepage": "https://www.team-lab.com",
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^1.13.0",
-    "@typescript-eslint/parser": "^1.13.0",
-    "eslint": "^6.2.1",
+    "@team-lab/eslint-config": "^0.1.1",
+    "@types/eslint": "^6.1.3",
+    "@typescript-eslint/eslint-plugin": "^2.5.0",
+    "@typescript-eslint/parser": "^2.5.0",
+    "eslint": "^6.6.0",
     "eslint-config-typescript": "^3.0.0",
     "eslint-plugin-import": "^2.18.2",
-    "typescript": "^3.5.3"
+    "eslint-plugin-vue": "^5.2.3",
+    "typescript": "^3.6.4",
+    "vue-eslint-parser": "^6.0.4"
   },
   "dependencies": {
-    "confusing-browser-globals": "^1.0.8"
+    "confusing-browser-globals": "^1.0.9"
   }
 }

rules/base.yml

@@ -1,10 +1,10 @@
 ---
+env:
+  browser: true
+  es6: true
+  node: true
 plugins:
   - import
-settings:
-  import/resolver:
-    node:
-      extensions:
 extends:
   - ./base/errors.yml
   - ./base/best-practices.yml

rules/base/es6.yml

@@ -32,10 +32,7 @@ rules:
   # クラスとして宣言された変数への代入を許可しない
   no-class-assign: error
   # 比較と混乱させる箇所のでアロー関数の使用を許可しない
-  no-confusing-arrow:
-    - error
-      # 比較式をカッコで囲えば許可する
-    - allowParens: true
+  no-confusing-arrow: 'off'
   # constで宣言された変数への代入を許可しない
   no-const-assign: error
   # 重複するクラスメンバの定義を許可しない

rules/base/imports.yml

@@ -44,7 +44,7 @@ rules:
   # 重複する名前のexportを許可しない
   import/export: error
   # デフォルトのimport/exportで使用されている名前の使用を許可しない
-  import/no-named-as-default: error
+  import/no-named-as-default: 'off'
   # export defaultされた値からプロパティでの他のexportされた名前へのアクセスを許可しない
   import/no-named-as-default-member: error
   # @deprecatedコメントが付いた名前の使用を許可しない

rules/base/style.yml

@@ -41,11 +41,11 @@ rules:
   comma-dangle:
     - error
       # 複数行で定義する場合のみケツカンマを強制する
-    - arrays: only-multiline
-      objects: only-multiline
-      imports: only-multiline
-      exports: only-multiline
-      functions: only-multiline
+    - arrays: always-multiline
+      objects: always-multiline
+      imports: always-multiline
+      exports: always-multiline
+      functions: always-multiline
   # カンマ前後のスペースの有無を統一する
   comma-spacing:
     - error

rules/base/variables/index.js

@@ -4,6 +4,6 @@ const confusingBrowserGlobals = require('confusing-browser-globals');
 module.exports = {
   rules: {
     // 特定のグローバル変数の使用を許可しない
-    'no-restricted-globals': ['error', 'isFinite', 'isNaN'].concat(confusingBrowserGlobals)
-  }
+    'no-restricted-globals': ['error', 'isFinite', 'isNaN'].concat(confusingBrowserGlobals),
+  },
 };

rules/typescript.yml

@@ -5,7 +5,8 @@ rules:
   "@typescript-eslint/adjacent-overload-signatures": error # 同名のオーバーロードを並べて定義することを強制する
   "@typescript-eslint/array-type": # 配列の表現をT[]かArray<T>に統一する
     - error
-    - generic # 常にジェネリックでの記載を強制する
+    - default: generic # Array<T>に統一する
+      readonly: generic # ReadonlyArray<T>に統一する
   "@typescript-eslint/await-thenable": error # Promiseな値以外でのawaitの使用を許可しない
   "@typescript-eslint/ban-ts-ignore": "off" # @ts-ignoreの使用を許可しない
   "@typescript-eslint/ban-types": error # 特定のランタイムオブジェクトの型としての使用を許可しない

rules/vue.yml

@@ -0,0 +1,4 @@
+# Vue Rules
+---
+extends:
+  - plugin:vue/recommended

samples/ts/.eslintrc.js

@@ -4,5 +4,5 @@ module.exports = {
   parserOptions: {
     project: path.resolve(__dirname, 'tsconfig.json')
   },
-  extends: ['../../typescript.js']
+  extends: ['../../typescript/index.js']
 };

samples/ts/index.ts

@@ -4,4 +4,4 @@ let score: number | null = 100;
 score *= 3;
 
 // eslint-disable-next-line no-console
-console.log(score);
+console.log(score)

samples/vue-ts/.eslintrc.js

@@ -0,0 +1,8 @@
+const path = require('path');
+
+module.exports = {
+  parserOptions: {
+    project: path.resolve(__dirname, 'tsconfig.json')
+  },
+  extends: ['../../typescript/vue.js']
+};

samples/vue-ts/Test.vue

@@ -0,0 +1,21 @@
+<template>
+  <h1>Hello you.</h1>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'TestComponent',
+  data() {
+    return {
+      score: 100
+    };
+  },
+  computed: {
+    double(): number {
+      return this.score * 2
+    }
+  }
+};
+</script>
+
+<style scoped></style>

samples/vue-ts/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "lib": ["dom", "esnext"],
+    "noEmit": true
+  }
+}

samples/vue/.eslintrc.yml

@@ -0,0 +1,3 @@
+---
+extends:
+  - ../../vue.js

samples/vue/Test.vue

@@ -0,0 +1,16 @@
+<template>
+  <h1>Hello you.</h1>
+</template>
+
+<script>
+export default {
+  name: 'TestComponent',
+  data() {
+    return {
+      foo: 'bar'
+    };
+  }
+};
+</script>
+
+<style scoped></style>

typescript.js → typescript/index.js

@@ -1,16 +1,16 @@
 module.exports = {
   parser: '@typescript-eslint/parser',
   parserOptions: {
-    ecmaVersion: 2018,
+    ecmaVersion: 2019,
     sourceType: 'module',
     ecmaFeatures: {
       impliedStrict: true,
-      jsx: false
-    }
+      jsx: false,
+    },
   },
   extends: [
-    './rules/base.yml',
-    './rules/typescript.yml',
-    'plugin:import/typescript'
-  ]
+    '../rules/base.yml',
+    '../rules/typescript.yml',
+    'plugin:import/typescript',
+  ],
 };

typescript/vue.js

@@ -0,0 +1,23 @@
+/**
+ * @type import('eslint').Linter.Config
+ */
+module.exports = {
+  parser: 'vue-eslint-parser',
+  parserOptions: {
+    parser: '@typescript-eslint/parser',
+    ecmaVersion: 2019,
+    sourceType: 'module',
+    ecmaFeatures: {
+      impliedStrict: true,
+      jsx: false,
+    },
+    warnOnUnsupportedTypeScriptVersion: false,
+    extraFileExtensions: ['.vue'],
+  },
+  extends: [
+    '../rules/base.yml',
+    '../rules/typescript.yml',
+    '../rules/vue.yml',
+    'plugin:import/typescript',
+  ],
+};

vue.js

@@ -0,0 +1,22 @@
+/**
+ * @type import('eslint').Linter.Config
+ */
+module.exports = {
+  parser: 'vue-eslint-parser',
+  parserOptions: {
+    sourceType: 'module',
+    ecmaVersion: 2018,
+    ecmaFeatures: {
+      jsx: true,
+      globalReturn: false,
+      impliedStrict: true,
+    },
+  },
+  extends: [
+    './rules/base.yml',
+    './rules/vue.yml',
+  ],
+  rules: {
+    'comma-dangle': 'error',
+  },
+};