Vue + Vite + TypeScript + ESLintのセットアップメモ

$ yarn create vite

{
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "vue": "^3.0.5"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.2.5",
    "@vue/compiler-sfc": "^3.0.5",
    "typescript": "^4.3.2",
    "vite": "^2.4.2",
    "vue-tsc": "^0.0.24"
  }
}⏎

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()]
})

yarn add eslint --dev

.....
.....
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.2.5",
    "@vue/compiler-sfc": "^3.0.5",
    "eslint": "^7.31.0",
    .....
    .....
  }
}

yarn run eslint --init 

✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · vue
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser, node
✔ What format do you want your config file to be in? · JavaScript
The config that you've selected requires the following dependencies:
eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
✔ Would you like to install them now with npm? · No / Yes

module.exports = {
  env: {
    'browser': true,
    'es2021': true,
    'node': true
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/essential',
    'plugin:@typescript-eslint/recommended'
  ],
  parserOptions: {
    'ecmaVersion': 12,
    'parser': '@typescript-eslint/parser',
    'sourceType': 'module'
  },
  plugins: [
    'vue',
    '@typescript-eslint'
  ],
  rules: {
  }
};

eslint-plugin-vue
@typescript-eslint/eslint-plugin
@typescript-eslint/parser@latest

'extends': [
  'plugin:vue/vue3-recommended',
  'plugin:vue/vue3-strongly-recommended',
  'plugin:@typescript-eslint/recommended'
],

'parserOptions': {
  'ecmaVersion': 12,
  'parser': '@typescript-eslint/parser',
  'sourceType': 'module'
  // ここから追加
  'project': './tsconfig.json',
  'extraFileExtensions': [
    '.vue',
  ],
},

$ yarn add -D eslint vue-eslint-parser

{
.....
.....
  'parser': 'vue-eslint-parser',
.....
.....
}

$ yarn add -D eslint-config-airbnb-base

$ yarn add -D eslint-plugin-import

'extends': [
  'plugin:vue/vue3-recommended',
  'plugin:vue/vue3-strongly-recommended',
  'plugin:@typescript-eslint/recommended',
  // ↓こいつを追加
  'airbnb-base'
    ],

$ yarn add -D eslint-plugin-vue-scoped-css

'extends': [
  // 'plugin:vue/vue3-recommended', <= 消す
  // ↓に置き換え
  'plugin:vue-scoped-css/vue3-recommended',
  'plugin:vue/vue3-strongly-recommended',
  'plugin:@typescript-eslint/recommended',
  'airbnb-base'
    ],

$ yarn add -D sass 

$  yarn add -D tslib 

"compilerOptions": {
    .....
    .....
    "importHelpers": true,
    .....

"compilerOptions": {
    .....
    .....
    "baseUrl": "./",
    "paths": {
      "*": ["*"],
      "/@/*": ["src/*"]
    },
    ......
    ......

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 追加
import * as path from "path"

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
// 追加
  resolve: {
    alias: {
      '/@': path.resolve(__dirname, 'src'),
      '/assets': path.resolve(__dirname, 'src/assets'),
    }
  }
})

$  yarn add -D @types/node    

import AppHoge from '/@/components/atoms/Hoge.vue';

Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser.
The file does not match your project config: .eslintrc.js.
The file must be included in at least one of the projects provided.

"eslintIgnore": [
  ".eslintrc.js",
  "vite.config.ts"
]

$ yarn add -D eslint-import-resolver-alias
$ yarn add -D eslint-import-resolver-typescript

rules: {
  'import/no-absolute-path': 'off',
  'import/extensions': [
    'error',
    'ignorePackages',
    {
      js: 'never',
      jsx: 'never',
      ts: 'never',
      tsx: 'never',
    }
  ]
},
settings: {
  'import/resolver': {
    node: {
      extensions: ['.js', '.jsx', '.ts', '.tsx', '.json']
    },
    typescript: {},
      alias: {
      map: [
        ['/@', './src'],
      ],
      extensions: ['.js', '.jsx', '.ts', '.tsx', '.json']
    }
  }
}

rules: {
  'import/no-absolute-path': 'off',
  'import/extensions': [
    'error',
    'ignorePackages',
    {
      js: 'never',
      jsx: 'never',
      ts: 'never',
      tsx: 'never',
    }
  ]
},

settings: {
  'import/resolver': {
    node: {
      extensions: ['.js', '.jsx', '.ts', '.tsx', '.json']
    },
    typescript: {},
      alias: {
      map: [
        ['/@', './src'],
      ],
      extensions: ['.js', '.jsx', '.ts', '.tsx', '.json']
    }
  }
}

import { hoge } from '/@/hogehoge/hoge';