# vue3 + vite + typescript + eslint configuration
:::info
[TOC]
:::

## Eslint configuration
- https://hackmd.io/ITDwZUZwTzmMKDiSRoKzBQ
- One Tab https://www.one-tab.com/page/9hUQpBktSO2dkxwR40jO0g
- [Day31：後記 - 環境調整 Part1 - ESLint - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天](https://ithelp.ithome.com.tw/articles/10302190)
- 如何關閉這類不符合 vue 規則的 ts 檢查？


- vue/no-parsing-error https://pjchender.dev/webdev/note-eslint/
- PJ eslint note https://pjchender.dev/webdev/note-eslint/

## tsconfig
- 要記得 include .vue file `"include": ["src/**/*.vue"]`
- 規定要區分 import type

"preserveValueImports": true, // For `<script setup>` See <https://devblogs.microsoft.com/typescript/announcing-typescript-4-5-beta/#preserve-value-imports>
"importsNotUsedAsValues": "error", // Enforce using `import type` instead of `import` for types
"forceConsistentCasingInFileNames": true,

## Reference
- https://www.one-tab.com/page/J_VrTkQlRyCHCsq8F__tkw

## vscode extension
- volar
- volar typescript
- 關掉 vscode 原生的 typescript server
- [volar takeover mode](https://vuejs.org/guide/typescript/overview.html#volar-takeover-mode)

## eslintrc.js

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')

module.exports = {
	root: true,
	extends: [
		'eslint:recommended',
		'plugin:vue/vue3-essential',
		'@vue/eslint-config-typescript/recommended',
		'@vue/eslint-config-prettier',
		'./.eslintrc-auto-import.json',
	],
	parser: 'vue-eslint-parser',
	parserOptions: {
		ecmaVersion: 'latest',
		parser: {
			'<template>': 'espree',
			ts: '@typescript-eslint/parser',
			js: '@typescript-eslint/parser',
		},
		tsconfigRootDir: __dirname,
		project: ['./tsconfig.json'],
		extraFileExtensions: ['.vue'],
	},
	overrides: [
		{
			// enable the rule specifically for TypeScript files
			files: ['*.ts', '*.tsx'],
			parserOptions: {
				parser: '@typescript-eslint/parser',
			},
		},
	],
	rules: {
		'@typescript-eslint/no-unnecessary-condition': ['error'],
		'@typescript-eslint/no-explicit-any': 'warn',
		'@typescript-eslint/ban-ts-comment': 'warn',
		'vue/multi-word-component-names': 'warn',
		'vue/no-parsing-error': 'warn', // enable template {{ }} using !
		'prefer-const': 'error',
		'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
		'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
	},
	ignorePatterns: ['dist', 'src/graphql/API.ts', 'package.json', '.eslintrc.js', 'vite.config.ts'],
}