vue3+vite+typescript+eslint(standard)配置

使用vite构建vue3项目

- npm create vite@latest

配置eslint

一开始项目数据

- package.json中的依赖

- tsconfig.json中的配置

- vite.config.ts中的配置

安装eslint

- npm install eslint --save-dev
- npx eslint --init  （初始化）

• 选择模式(To check syntax, find problems, and enforce code style)

• 选择语言模块(JavaScript)

• 选择语言框架(vue)

• 是否使用ts（yes）

• 代码在哪里运行，空格选择(全选)

• 选择风格(选popular)

• 代码风格指南(standard)

• 配置文件什么格式(JavaScript)

• 是否现在安装，用什么包管理器来下载

此时页面会出现一个.eslintrc.cjs文件，为什么是.cjs后缀而不是.js，是因为，.package.json文件中设置了"type": "module"，如果直接将后缀名改为.js，会报错，需要将"type": "module"删除。

• 初始化的eslint配置文件

配置

• 先下载vite的插件

  • npm install vite-plugin-eslint --save-dev
• 更改vite.config.ts

- 运行eslint
- npx eslint .

• 需要在parserOptions中配置一个project属性
  
• 在parserOptions中添加project: './tsconfig.json'属性

• 解决第一个问题，在rules中添加选项

  • '@typescript-eslint/triple-slash-reference': 'off'

• 解决下一个问题

  • 可以查看官网
  • https://typescript-eslint.io/...
  • 在tsconfig.ts中添加配置

• 由于刚刚vite.config.ts文件中多了一个逗号和间距所以才会爆那2个错误

所有的配置

## eslintrc.cjs
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
    // 开启setup语法糖环境
    'vue/setup-compiler-macros': true
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-essential',
    'standard-with-typescript',
    'plugin:@typescript-eslint/recommended'
  ],
  overrides: [],
  parser: 'vue-eslint-parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    // 解析vue文件中的<script>中的代码
    parser: '@typescript-eslint/parser',
    project: './tsconfig.json',
    extraFileExtensions: ['.vue']
  },
  plugins: ['vue', '@typescript-eslint'],
  rules: {
    // 解决 ///
    '@typescript-eslint/triple-slash-reference': 'warn',
    // 要求或不允许尾随逗号
    'comma-dangle': 'off',
    '@typescript-eslint/comma-dangle': 'warn',

    // 解决 {}对象类型
    '@typescript-eslint/ban-types': 'warn',
    // any类型
    '@typescript-eslint/no-explicit-any': 'warn'
  }
}


## tsconfig.json
{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
    "noEmit": true
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "./vite.config.ts",
    "./.eslintrc.cjs"
  ],
  "references": [{ "path": "./tsconfig.node.json" }]
}

## vite.config.ts

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    eslintPlugin({
      include: [
        'src/**/*.js',
        'src/**/*.ts',
        'src/**/*.vue',
        'src/*.js',
        'src/*.ts',
        'src/*.vue'
      ]
    })
  ]
})

## package.json

{
  "name": "vite-project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.41"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.45.0",
    "@typescript-eslint/parser": "^5.45.0",
    "@vitejs/plugin-vue": "^3.2.0",
    "eslint": "^8.28.0",
    "eslint-config-standard-with-typescript": "^23.0.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-n": "^15.5.1",
    "eslint-plugin-promise": "^6.1.1",
    "eslint-plugin-vue": "^9.8.0",
    "typescript": "^4.9.3",
    "vite": "^3.2.3",
    "vite-plugin-eslint": "^1.8.1",
    "vue-tsc": "^1.0.9"
  }
}