• vue3硅谷甄选01 | 使用vite创建vue3项目及项目的配置 环境准备 ESLint配置 prettier配置 husky配置 项目集成

    文章目录

    使用vite创建vue3项目及项目的配置

    1.环境准备

    使用vite搭建项目，vite需要nodejs版本14.18+、16+

    • node v18.16.1
    • pnpm 8.7.4

    pnpm:performant npm(高性能的npm)由npm/yarn衍生而来，解决了npm/yarn内部潜在的bug，极大的优化了性能，扩展了使用场景。

    pnpm安装指令

    npm i -g pnpm

    • 1

    创建项目

    pnpm create vite
cd # 进入项目
pnpm install # 安装依赖 + @vitejs/plugin-vue 4.3.4 + typescript 5.2.2 + vite 4.4.9 + vue-tsc 1.8.10
pnpm run dev # 运行项目

    • 1
    • 2
    • 3
    • 4

    打开项目，需要手动在浏览器输入地址。
    修改package.json文件的字段 "dev": "vite --open"，这样使用pnpm run dev命令会自动打开浏览器。

    2.项目配置

    VSCode 有对应插件Prettier - Code formatter、ESlint、Stylelint可以实现相同的功能

    以下配置适用于协同开发的大项目配置。

    ESLint校验代码工具配置 - js代码检测工具

    eslint:提供一个插件化的javaScript代码检测工具

    1.安装ESLint到开发环境 devDependencies
    //完整写法
pnpm  install --save-dev eslint 
//简写
pnpm i eslint -D

    • 1
    • 2
    • 3
    • 4
    2.生成配置文件:.eslint.cjs**
    npx eslint --init

    • 1

    在这里插入图片描述

    .eslint.cjs文件

    // 对外暴露的配置对象
module.exports = {
    "env": { // eslint的工作环境
        "browser": true,
        "es2021": true // 校验js语法
    },
    "extends": [ //规则的继承
    	//全部规则默认是关闭的，这个配置项会开启推荐规则(推荐需要遵守的规则)
        "eslint:recommended",
        //vue3语法规则
        "plugin:@typescript-eslint/recommended",
        //ts语法规则
        "plugin:vue/vue3-essential"
    ],
    "overrides": [ //为特定类型的文件指定处理器
        {
            "env": {
                "node": true
            },
            "files": [
                ".eslintrc.{js,cjs}"
            ],
            "parserOptions": {
                "sourceType": "script"
            }
        }
    ],
    //指定解析器选项
    "parserOptions": {
        "ecmaVersion": "latest", //校验ECMA最新版本
        "parser": "@typescript-eslint/parser",//指定解析器，当前表示ts解析器，还可以选择Babel=ESLint babel解析器、默认Esprima解析器
        "sourceType": "module"// 设置为
    },
    // ESLint支持使用第三方插件，在使用插件之前，必须使用npm安装
    "plugins": [
        "@typescript-eslint",
        "vue"
    ],
    //ESLint校验规则
    "rules": {
    }
}


    • 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
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    3.安装vue3环境代码校验插件**
    # 让所有与prettier规则存在冲突的Eslint rules失效，并使用prettier进行代码检查
"eslint-config-prettier": "^8.6.0",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-node": "^11.1.0",
# 运行更漂亮的Eslint，使prettier规则优先级更高，Eslint优先级低
"eslint-plugin-prettier": "^4.2.1",
# vue.js的Eslint插件（查找vue语法错误，发现错误指令，查找违规风格指南)
"eslint-plugin-vue": "^9.9.0",
# 该解析器允许使用Eslint校验所有babel code
"@babel/eslint-parser": "^7.19.1",

# 指令
pnpm install -D eslint-plugin-import eslint-plugin-vue eslint-plugin-node eslint-plugin-prettier eslint-config-prettier eslint-plugin-node @babel/eslint-parser

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    4. 修改.eslintrc.cjs配置文件
    module.exports = {
  //....
  /* 规则的状态
   * "off" 或 0    ==>  关闭规则
   * "warn" 或 1   ==>  打开的规则作为警告（不影响代码执行）
   * "error" 或 2  ==>  规则作为一个错误（代码不能执行，界面报错）
   */
  "rules": {
   // eslint（https://eslint.bootcss.com/docs/rules/）
   // key为规则，右侧为规则的状态
    'no-var': 'error', // 要求使用 let 或 const 而不是 var
    'no-multiple-empty-lines': ['warn', { max: 1 }], // 不允许多个空行
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-unexpected-multiline': 'error', // 禁止空余的多行
    'no-useless-escape': 'off', // 禁止不必要的转义字符

    // typeScript (https://typescript-eslint.io/rules)
    '@typescript-eslint/no-unused-vars': 'error', // 禁止定义未使用的变量
    '@typescript-eslint/prefer-ts-expect-error': 'error', // 禁止使用 @ts-ignore
    '@typescript-eslint/no-explicit-any': 'off', // 禁止使用 any 类型
    '@typescript-eslint/no-non-null-assertion': 'off',
    '@typescript-eslint/no-namespace': 'off', // 禁止使用自定义 TypeScript 模块和命名空间。
    '@typescript-eslint/semi': 'off',

    // eslint-plugin-vue (https://eslint.vuejs.org/rules/)
    'vue/multi-word-component-names': 'off', // 要求组件名称始终为 “-” 链接的单词
    'vue/script-setup-uses-vars': 'error', // 防止