vue3 + vite + js 配置Eslint + prettier_vite+js+vue3配置eslint(1)_vite-plugin-eslint

第三步 安装 vite-plugin-eslint

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

1
2
3
4
5

配置 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')
  }
})


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

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

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

1
2
3

第五步 安装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

1
2
3
4
5

第六步配置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要不要折行
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

第七步配置配置 .eslintrc.cjs

// 在rules里面简单的一些配置：
// "off" 或 0 - 关闭规则
// "warn" 或 1 - 开启规则，使用警告级别的
1
2