vue3+vite+ts配置eslint

置顶林依.

已于 2024-07-11 18:18:53 修改

阅读量1.1k

点赞数 2

分类专栏： eslint 文章标签： javascript vue.js 前端 typescript vue

于 2023-04-12 16:55:17 首次发布

本文链接：https://blog.csdn.net/qq_34065728/article/details/130111008

版权

eslint 专栏收录该内容

1 篇文章

订阅专栏

文章详细介绍了如何安装和配置eslint，包括通过npm初始化，选择配置选项，以及启用ts支持。接着，文章提到了安装vite-plugin-eslint以实现自动检测，并展示了详细的eslint配置示例。最后，展示了在vite.config.ts中集成eslintPlugin的代码片段，用于指定源文件的检查路径。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、安装 eslint

npm i eslint -D

2、初始化 eslint

npx eslint --init
or
npm init @eslint/config@latest

选择配置

在这里插入图片描述

选择严格模式

在这里插入图片描述

使用什么模块

在这里插入图片描述

框架

在这里插入图片描述

是否使用ts

在这里插入图片描述

运行在浏览器还是node

在这里插入图片描述

选择样式风格

在这里插入图片描述

选择风格

在这里插入图片描述

配置文件格式

在这里插入图片描述

是否立即安装

在这里插入图片描述

安装方式

在这里插入图片描述

3、安装自动检测

npm i vite-plugin-eslint -D

4、eslint 配置

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": ["plugin:vue/vue3-recommended", "standard"],
  "overrides": [],
  "parser": "vue-eslint-parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "ecmaFeatures": {
      "modules": true
    },
    "parser": "@typescript-eslint/parser",
    "sourceType": "module",
    "requireConfigFile": false
  },
  "plugins": ["vue"],
  "rules": {
    "semi": [2, "never"]
  }
}

5、vite.config.ts 中使用

// vite.config.ts
import eslintPlugin from 'vite-plugin-eslint'

plugins: [
    vue(),
    eslintPlugin({
      include: ['src/**/*.js', 'src/**/*.ts', 'src/**/*.vue', 'src/*.js', 'src/*.ts', 'src/*.vue']
    })
]