vite配置eslint

编程入门行业动态更新时间:2024-10-05 13:23:37

vite配置eslint

一、安装依赖包

 # 根据自己的包管理工具来进行包的下载安装，这里以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', // 禁止使用 varindent: ['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 }}] /}
}