vite配置eslint

ZGSouth

已于 2022-12-02 10:00:14 修改

阅读量1.5k

点赞数

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

于 2022-12-02 09:52:40 首次发布

本文链接：https://blog.csdn.net/weixin_29005819/article/details/128142443

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、安装依赖包

 # 根据自己的包管理工具来进行包的下载安装，这里以pnpm为例
 pnpm  add @babel/eslint-parser eslint vite-plugin-eslint -D

# 注意
# 1、安装过程中，若需要告警缺少babel-core，在项目根目录下创建 .npmrc 内容是： auto-install-peers=true


# 包说明
# 1、vite-plugin-eslint，vite环境下的eslint插件，它调用eslint 
# 2、eslint， 进行代码检测的，里面进行定义规则，然后调用@babel/eslint-parser进行代码的格式化
# 3、@babel/eslint-parser 格式化代码

二、初始化eslint配置文件

npx eslint --init

# 跟npm init 一样，用来生成配置文件，中途会有交互，最终生成的文件一般为.eslintrc.js

三、配置vite.config.js文件

import eslintPlugin from 'vite-plugin-eslint'

export default defineConfig({
  plugins: [
   ...,
    // 这是新的
    eslintPlugin({
      include: ['src/**/*.js', 'src/**/*.vue', 'src/*.js', 'src/*.vue']
    })
  ]
}

四、配置.eslintrc.js文件

// .eslintrc.js 文件
module.exports = {
  ...，

  // 主要是下面这个
  parserOptions: {
    ecmaVersion: 6,
    sourceType: 'module',
    ecmaFeatures: {
      modules: true
    },
    requireConfigFile: false,
    parser: '@babel/eslint-parser'
  },
  rules: {
    semi: [2, 'never'], // 禁止尾部使用分号“ ; ”
    'no-var': 'error', // 禁止使用 var
    indent: ['error', 2], // 缩进2格
    'no-mixed-spaces-and-tabs': 'error', // 不能空格与tab混用
    quotes: [2, 'single'], // 使用单引号
    'vue/html-closing-bracket-newline': 'off', // 不强制换行
    'vue/singleline-html-element-content-newline': 'off', // 不强制换行
    'vue/max-attributes-per-line': ['error', {
      singleline: { max: 5 },
      multiline: { max: 5 }
    }] /
  }
}