配置vue3+vite+eslint+prettierrc项目

Vite + Vue3 + EsLint + Prettier 超简单配置步骤

1、使用 vite 创建一个 vue3 项目，并同时在 vscode 中安装 EsLint，和 Prettier-Code formatter 插件

2、安装整个流程 EsLint+prettier 所需要的包 记住一定要符合版本。不然可能会报错。最好直接全部复制到 package.json 中下载

"devDependencies": {
// eslint 解析相关的包
"@babel/core": "^7.18.2",
"@babel/eslint-parser": "^7.18.2",
// eslint相关的包
"eslint": "^8.17.0",
"eslint-plugin-vue": "^9.1.0",
"vue-eslint-parser": "^9.0.2",
// prettier相关的包
"prettier": "^2.6.2",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-prettier": "^5.0.0-alpha.1",
}

3、 在项目根创建 EsLint 插件的配置文件.eslintrc.cjs 文件

为什么是以 cjs 后缀结尾的文件呢，因为高版本的 vite 创建的项目 package.json 中的 type 字段是 module，也就是告诉整个项目下所有 js 的文件默认以 esmodule 模块化的形式，我们这里使用的是 module.exports 语法属于 commonjs，所以使用 cjs 后缀结尾则表示告诉项目编译该配置文件时需要使用 commonjs 的方式来读取该文件。那为什么该配置文件不直接使用 esmodule 语法呢，因为好像运行时会报错所以这里我就用普遍的 commonjs 语法来导出配置信息

这里就是 vscode 中 EsLint 插件的配置信息都写在这里了

module.exports = {
    env: {
        browser: true,
        es2021: true,
        node: true
    },
    extends: [
        'eslint:recommended', // 使用推荐的eslint
        'plugin:vue/vue3-recommended', // 使用插件支持vue3
        // 如果你没有安装第7步,以下两个包不要引入,否则报错
        'plugin:prettier/recommended',
        'eslint-config-prettier'
    ],
    parserOptions: {
        ecmaVersion: 13,
        sourceType: 'module',
        ecmaFeatures: {
            modules: true,
            jsx: true
        },
        requireConfigFile: false,
        parser: '@babel/eslint-parser'
    },
    // eslint-plugin-vue
    plugins: [
        'vue', // 引入vue的插件 vue <==> eslint-plugin-vue
        // 这个包需要安装了第7步的三个包再引入
        'prettier' // 引入规范插件  prettier <==>  eslint-plugin-prettier
    ],
    overrides: [
        {
            files: [
                '*.js',
                '*.jsx',
                '*.vue',
                'src/**/*.js',
                'src/**/*.vue',
                'src/*.js',
                'src/*.vue'
            ],
            rules: {
                'no-undef': 'off'
            }
        }
    ],
    globals: {
        defineProps: 'readonly',
        defineEmits: 'readonly',
        defineExpose: 'readonly',
        withDefaults: 'readonly'
    },
    // 这里时配置规则的,自己看情况配置
    rules: {
        semi: ['warn', 'never'], // 禁止尾部使用分号
        'no-console': 'warn', // 禁止出现console
        'no-debugger': 'warn', // 禁止出现debugger
        'no-duplicate-case': 'warn', // 禁止出现重复case
        'no-empty': 'warn', // 禁止出现空语句块
        'no-extra-parens': 'warn', // 禁止不必要的括号
        'no-func-assign': 'warn', // 禁止对Function声明重新赋值
        'no-unreachable': 'warn', // 禁止出现[return|throw]之后的代码块
        'no-else-return': 'warn', // 禁止if语句中return语句之后有else块
        'no-empty-function': 'warn', // 禁止出现空的函数块
        'no-lone-blocks': 'warn', // 禁用不必要的嵌套块
        'no-multi-spaces': 'warn', // 禁止使用多个空格
        'no-redeclare': 'warn', // 禁止多次声明同一变量
        'no-return-assign': 'warn', // 禁止在return语句中使用赋值语句
        'no-return-await': 'warn', // 禁用不必要的[return/await]
        'no-self-compare': 'warn', // 禁止自身比较表达式
        'no-useless-catch': 'warn', // 禁止不必要的catch子句
        'no-useless-return': 'warn', // 禁止不必要的return语句
        'no-mixed-spaces-and-tabs': 'warn', // 禁止空格和tab的混合缩进
        'no-multiple-empty-lines': 'warn', // 禁止出现多行空行
        'no-trailing-spaces': 'warn', // 禁止一行结束后面不要有空格
        'no-useless-call': 'warn', // 禁止不必要的.call()和.apply()
        'no-var': 'warn', // 禁止出现var用let和const代替
        'no-delete-var': 'off', // 允许出现delete变量的使用
        'no-shadow': 'off', // 允许变量声明与外层作用域的变量同名
        'dot-notation': 'warn', // 要求尽可能地使用点号
        'default-case': 'warn', // 要求switch语句中有default分支
        eqeqeq: 'warn', // 要求使用 === 和 !==
        curly: 'warn', // 要求所有控制语句使用一致的括号风格
        'space-before-blocks': 'warn', // 要求在块之前使用一致的空格
        'space-in-parens': 'warn', // 要求在圆括号内使用一致的空格
        'space-infix-ops': 'warn', // 要求操作符周围有空格
        'space-unary-ops': 'warn', // 要求在一元操作符前后使用一致的空格
        'switch-colon-spacing': 'warn', // 要求在switch的冒号左右有空格
        'arrow-spacing': 'warn', // 要求箭头函数的箭头前后使用一致的空格
        'array-bracket-spacing': 'warn', // 要求数组方括号中使用一致的空格
        'brace-style': 'warn', // 要求在代码块中使用一致的大括号风格
        camelcase: 'warn', // 要求使用骆驼拼写法命名约定
        indent: ['warn', 4], // 要求使用JS一致缩进4个空格
        'max-depth': ['warn', 4], // 要求可嵌套的块的最大深度4
        'max-statements': ['warn', 100], // 要求函数块最多允许的的语句数量20
        'max-nested-callbacks': ['warn', 3], // 要求回调函数最大嵌套深度3
        'max-statements-per-line': ['warn', { max: 1 }], // 要求每一行中所允许的最大语句数量
        quotes: ['warn', 'single', 'avoid-escape'], // 要求统一使用单引号符号
        'vue/require-default-prop': 0, // 关闭属性参数必须默认值
        'vue/singleline-html-element-content-newline': 0, // 关闭单行元素必须换行符
        'vue/multiline-html-element-content-newline': 0, // 关闭多行元素必须换行符
        // 要求每一行标签的最大属性不超五个
        'vue/max-attributes-per-line': ['warn', { singleline: 5 }],
        // 要求html标签的缩进为需要4个空格
        'vue/html-indent': [
            'warn',
            4,
            {
                attribute: 1,
                baseIndent: 1,
                closeBracket: 0,
                alignAttributesVertically: true,
                ignores: []
            }
        ],
        // 取消关闭标签不能自闭合的限制设置
        'vue/html-self-closing': [
            'error',
            {
                html: {
                    void: 'always',
                    normal: 'never',
                    component: 'always'
                },
                svg: 'always',
                math: 'always'
            }
        ],
        'vue/multi-word-component-names': 'off'
    }
}

4、在项目根目录创建 prettier 插件的配置文件, .prettierrc.cjs 文件

（该插件的用途是让用户在 ctrl+s 保存时自动按我们自己的配置所格式化代码，使得格式化之后的代码符合 eslint 的要求。不然 eslint 就会报错）

注意一定要安装第二步中的

"prettier": "^2.6.2",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-prettier": "^5.0.0-alpha.1"

这三个包,这里主要配置代码的格式规范的,有些设置要与.eslintrc.js 配置一致(目的就是使得格式化的代码符合 eslint 的规范),防止报错或者冲突
// 在项目根目录创建 .prettierrc.cjs 配置文件
// 以下配置视自己情况而定,并不是每个都需要的。不过方便直接复制过去就能用

// 在项目根目录创建文件 .prettierrc.cjs
// 以下配置视自己情况而定,并步是每个都需要的
module.exports = {
    tabWidth: 4, // 使用4个空格缩进
    semi: false, // 代码结尾是否加分号
    trailingComma: 'none', // 代码末尾不需要逗号
    singleQuote: true, // 是否使用单引号
    printWidth: 100, // 超过多少字符强制换行
    arrowParens: 'avoid', // 单个参数的箭头函数不加括号 x => x
    bracketSpacing: true, // 对象大括号内两边是否加空格 { a:0 }

    endOfLine: 'auto', // 文件换行格式 LF/CRLF
    useTabs: false, // 不使用缩进符,而使用空格
    quoteProps: 'as-needed', // 对象的key仅在必要时用引号
    jsxSingleQuote: false, // jsx不使用单引号,而使用双引号
    jsxBracketSameLine: false, // jsx标签的反尖括号需要换行
    rangeStart: 0, // 每个文件格式化的范围是文件的全部内容
    rangeEnd: Infinity, // 结尾
    requirePragma: false, // 不需要写文件开头的 @prettier
    insertPragma: false, // 不需要自动在文件开头插入 @prettier
    proseWrap: 'preserve', // 使用默认的折行标准
    htmlWhitespaceSensitivity: 'css' // 根据显示样式决定html要不要折行
}

5、配置 VScode

1. 打开 vscode 的搜索栏输入> 然后在后面接着输入首选项:打开用户设置 找到这个下拉选项并选中进入
2. 进入后选择左侧的工作区,然后找到 vscode 右上角有个图标叫打开设置(json) 点击该图标进入一个叫 settings.json 文件属于该用户 vscode 工作区的配置文件。在项目根目录下的.vscode 文件夹 中可以找到，如果没有找到则表示该项目没有应用到 vscode 工作区的配置

//编辑 settings.json 文件

//编辑 settings.json 文件信息 如下所示。这个配置信息可以控制 vscode 插件的行为。我们这里主要是控制 eslint 插件和 prettier 插件的行为

// 配置vscode
// 打开：设置 -> 文本编辑器 -> 字体 -> 在 settings.json 中编辑

// settings.json文件
{
  // vscode默认启用了根据文件类型自动设置tabsize的选项
  "editor.detectIndentation": false,
  // 重新设定tabsize
  "editor.tabSize": 2,
  // 每次保存的时候自动格式化 
  "editor.formatOnSave": true,
  // 每次保存的时候将代码按eslint格式进行修复
  "eslint.autoFixOnSave": true,
  // 添加vue支持
  "eslint.validate": [
       "javascript",
       "javascriptreact",
       {
            "language": "vue",
            "autoFix": true
       }
  ],
  // #让prettier使用eslint的代码格式进行校验 
  "prettier.eslintIntegration": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
 }

最后配置完后记得重启编辑器就ok了，最后编辑代码保存时没有反应则需要鼠标右键选择使用…指定格式文件的选项。选择使用prettier插件进行格式化

以上步骤适用于所有的vue3项目，因为仅仅上续功能仅仅是编译时检测而非运行时检测所以用任何打包工具编译项目运行都是没问题的。

额外补充(此处为运行时eslint检测，涉及指定的打包工具，需要安装不同的插件)

以上是配置的在用户编译阶段的 eslint 检测也就是用户在 vscode 中编写代码时的检测。出现的错误并不会影响项目的正常运行。
如果想要更严格一点，也就是让项目在运行时进行 eslint 校验。那么则需要安装 vite-plugin-eslint 插件

// 说明: 该包是用于配置 vite 运行的时候自动检测 eslint 规范
// 问题: 不装这个包可以吗? 答案是“可以的”,使用 yarn dev 时并不会主动检查代码
然后在 vite 的配置文件中引入并注册该插件

import eslintPlugin from 'vite-plugin-eslint'

plugins: [
// 增加下面的配置项,这样在运行时就能检查 eslint 规范
eslintPlugin({
include: ['src/**/*.js', 'src/**/*.vue', 'src/*.js', 'src/*.vue'] 需要进行校验的文件
})
],

贴一下我项目中整个package.json的代码

{
  "name": "troops_maxscreen",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite --mode development",
    "test": "vite --mode test",
    "build": "vite build",
    "build:test": "vite build  --mode test",
    "preview": "vite preview",
    "lint": "eslint --fix --ext .js,.vue src/"
  },
  "gitHooks": {
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    "*.{js,jsx,vue}": [
      "vue-cli-service lint",
      "git add"
    ]
  },
  "dependencies": {
    "@types/node": "^20.10.3",
    "@vitejs/plugin-vue-jsx": "^3.0.2",
    "axios": "^1.5.0",
    "dayjs": "^1.11.10",
    "echarts": "^5.4.3",
    "element-plus": "^2.4.2",
    "face-api.js": "^0.22.2",
    "lodash": "^4.17.21",
    "pinia": "^2.0.35",
    "postcss-px-to-viewport": "^1.1.1",
    "prettier": "^3.0.3",
    "sass": "^1.68.0",
    "vue": "^3.3.4",
    "vue-router": "^4.1.6"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.2.3",
    "@vue/eslint-config-prettier": "^6.0.0",
    "babel-eslint": "^10.1.0",
    "lint-staged": "^13.2.1",
    "postcss-px-to-viewport": "^1.1.1",
    "unplugin-auto-import": "^0.16.7",
    "unplugin-vue-components": "^0.25.2",
    "vite": "^4.2.1",
    "vite-plugin-compression": "^0.5.1",
    "vite-plugin-mkcert": "^1.16.0",
    "vite-plugin-top-level-await": "^1.3.1",
    "vite-plugin-vue-setup-extend-plus": "^0.1.0",
    "@babel/core": "^7.18.2",
    "@babel/eslint-parser": "^7.18.2",
    "eslint": "^8.17.0",
    "eslint-plugin-vue": "^9.1.0",
    "vue-eslint-parser": "^9.0.2",
    "vite-plugin-eslint": "^1.6.1",
    "prettier": "^2.6.2",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-prettier": "^5.0.0-alpha.1"
  }
}