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文件中的