vue3 + vite + js 配置Eslint + prettier_vite+js+vue3配置eslint

    sourceType: 'script'
  }
}

],
parserOptions: {
ecmaVersion: ‘latest’,
sourceType: ‘module’
},
plugins: [
‘vue’
],
rules: {
}
}

##### 第三步 安装 vite-plugin-eslint

// 该包是用于配置vite运行的时候自动检测eslint规范，不符合页面会报错
pnpm add vite-plugin-eslint@latest -D
// 安装最新版eslint-plugin-vue
pnpm add eslint-plugin-vue@latest -D

##### 配置 vite.config.js

import { defineConfig } from ‘vite’
import vue from ‘@vitejs/plugin-vue’
import path from ‘path’
import eslint from ‘vite-plugin-eslint’

export default defineConfig({
// 增加eslint的配置项,这样在运行时就能检查eslint规范
// eslint() 或
// eslint({
// 指定需要检查的文件
// include: [‘src/**/*.js’, ‘src/**/*.vue’, ‘src/*.js’, ‘src/*.vue’]
// })
plugins: [vue(), eslint()],
resolve: {
// 指定@别名
alias: {
‘@’: path.resolve(__dirname, ‘src’)
}
},
server: {
port: 3300,
cors: true,
proxy: {}
},
build: {
outDir: path.resolve(__dirname, ‘…/dist’)
}
})

##### 第四步安装 eslint-parser （ESLint解析器）

pnpm add @babel/core -D // 某些代码需要调用 Babel 的 API 进行转码，就要使用@babel/core模块。
pnpm add @babel/eslint-parser@latest -D

##### 第五步 安装prettier (用于规范代码格式)

pnpm add prettier -D
pnpm add prettier-eslint -D
pnpm add eslint-config-prettier -D // eslint兼容的插件
pnpm add eslint-plugin-prettier -D // eslint的prettier

##### 第六步配置prettier


在项目根目录创建文件 .prettierrc.cjs

// 以下配置视自己情况而定
module.exports = {
tabWidth: 2, // 使用2个空格缩进
useTabs: false, // 不使用制表缩进,而使用空格
semi: false, // 代码结尾是否加分号
trailingComma: ‘none’, // 代码末尾不需要逗号 参考 https://prettier.io/docs/en/options.html#prose-wrap
singleQuote: true, // 是否使用单引号
printWidth: 120, // 超过多少字符强制换行
arrowParens: ‘avoid’, // 单个参数的箭头函数不加括号 arg => arg
bracketSpacing: true, // 对象大括号内两边是否加空格 { a:0 }
endOfLine: ‘auto’, // 文件换行格式 LF/CRLF
quoteProps: ‘as-needed’, // 对象的key仅在必要时用引号
jsxSingleQuote: false, // jsx不使用单引号,而使用双引号
jsxBracketSameLine: false, // jsx标签的反尖括号需要换行
rangeStart: 0, // 每个文件格式化的范围是文件的全部内容
rangeEnd: Infinity, // 结尾
requirePragma: false, // 不需要写文件开头的 @prettier
insertPragma: false, // 不需要自动在文件开头插入 @prettier
proseWrap: ‘preserve’, // 使用默认的折行标准 参考 https://prettier.io/docs/en/options.html#trailing-commas
htmlWhitespaceSensitivity: ‘css’ // 根据显示样式决定html要不要折行
}