美文网首页
项目配置(Vue3+Vite+TS)

项目配置(Vue3+Vite+TS)

作者: 扶得一人醉如苏沐晨 | 来源:发表于2023-11-10 09:18 被阅读0次

本篇文章主要在项目中进行如下配置:

  • eslint配置
  • 配置prettier
  • 配置stylelint
  • 配置husky
  • 配置commitlint
  • 强制使用pnpm包管理器工具

一、创建一个Vite+Vue3+TS的项目

从0使用Vite创建Vue3项目 - 简书 (jianshu.com)

二、eslint配置

eslint中文官网:http://eslint.cn/

ESLint最初是由Nicholas C.Zakas 于2013年6月创建的开源项目。它的目标是提供一个插件化的iavascript代码检测工具

2.1. 安装eslint

pnpm i eslint -D

2.2. 生成配置文件:.eslint.cjs

npx eslint --init
  1. 选择用途:第二项--检查语法并且发现错误


    image.png
  1. 选择模块类型:第一项


    image.png
  1. 选择项目框架


    image.png
  1. 你的项目中是否使用ts?选Yes


    image.png
  1. 选择你的代码运行的地方?选择浏览器端browser


    image.png
  1. 选择创建配置文件的类型:js


    image.png
  1. 选择是否需要安装别的依赖(主要用于校验vue语法和Ts的语法)
    选Yes


    image.png
  1. 选择包管理工具,并安装


    image.png
    image.png
  1. 安装成功后,项目中会多一个.eslintrc.cjs文件
.eslintrc.cjs配置文件说明
module.exports = {
   //运行环境
    "env": { 
        "browser": true,//浏览器端
        "es2021": true,//es2021
    },
    //规则继承
    "extends": [ 
       //全部规则默认是关闭的,这个配置项开启推荐规则,推荐规则参照文档
       //比如:函数不能重名、对象不能出现重复key
        "eslint:recommended",
        //vue3语法规则
        "plugin:vue/vue3-essential",
        //ts语法规则
        "plugin:@typescript-eslint/recommended"
    ],
    //要为特定类型的文件指定处理器
    "overrides": [
    ],
    //指定解析器:解析器
    //Esprima 默认解析器
    //Babel-ESLint babel解析器
    //@typescript-eslint/parser ts解析器
    "parser": "@typescript-eslint/parser",
    //指定解析器选项
    "parserOptions": {
        "ecmaVersion": "latest",//校验ECMA最新版本
        "sourceType": "module"//设置为"script"(默认),或者"module"代码在ECMAScript模块中
    },
    //ESLint支持使用第三方插件。在使用插件之前,您必须使用npm安装它
    //该eslint-plugin-前缀可以从插件名称被省略
    "plugins": [
        "vue",
        "@typescript-eslint"
    ],
    //eslint规则
    "rules": {
    }
}

2.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

2.4. 修改.eslintrc.cjs配置文件

// @see https://eslint.bootcss.com/docs/rules/

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
    jest: true,
  },
  /* 指定如何解析语法 */
  parser: 'vue-eslint-parser',
  /** 优先级低于 parse 的语法解析配置 */
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    parser: '@typescript-eslint/parser',
    jsxPragma: 'React',
    ecmaFeatures: {
      jsx: true,
    },
  },
  /* 继承已有的规则 */
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-essential',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
  ],
  plugins: ['vue', '@typescript-eslint'],
  /*
   * "off" 或 0    ==>  关闭规则
   * "warn" 或 1   ==>  打开的规则作为警告(不影响代码执行)
   * "error" 或 2  ==>  规则作为一个错误(代码不能执行,界面报错)
   */
  rules: {
    // eslint(https://eslint.bootcss.com/docs/rules/)
    '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', // 防止<script setup>使用的变量<template>被标记为未使用
    'vue/no-mutating-props': 'off', // 不允许组件 prop的改变
    'vue/attribute-hyphenation': 'off', // 对模板中的自定义组件强制执行属性命名样式
  },
}

2.5. .eslintignore忽略文件

dist
node_modules

2.6. 添加检查和修复的运行脚本

package.json新增两个运行脚本--用于检查和修复

"scripts": {
    "lint": "eslint src",
    "fix": "eslint src --fix",
}

通过pnpm run lint去检测语法,如果出现不规范格式,通过pnpm run fix 修改

三、配置prettier

有了eslint,为什么还要有prettier?eslint针对的是javascript,他是一个检测工具,包含js语法以及少部分格式问题,在eslint看来,语法对了就能保证代码正常运行,格式问题属于其次;
而prettier属于格式化工具,它看不惯格式不统一,所以它就把eslint没干好的事接着干,另外,prettier支持包含js在内的多种语言。
总结起来,eslint和prettier这俩兄弟一个保证js代码质量,一个保证代码美观。

3.1. 安装依赖包

pnpm install -D eslint-plugin-prettier prettier eslint-config-prettier

3.2. .prettierrc.json(自己创建)添加规则

{
  "singleQuote": true,
  "semi": false,
  "bracketSpacing": true,
  "htmlWhitespaceSensitivity": "ignore",
  "endOfLine": "auto",
  "trailingComma": "all",
  "tabWidth": 2
}

3.3. .prettierignore忽略文件

/dist/*
/html/*
.local
/node_modules/**
**/*.svg
**/*.sh
/public/*

通过pnpm run lint去检测语法,如果出现不规范格式,通过pnpm run fix修改

3.4. 配置stylelint

stylelint为css的lint工具。可格式化css代码,检查css语法错误与不合理的写法,指定css书写顺序等。
我们的项目中使用scss作为预处理器,安装以下依赖:

pnpm add sass sass-loader stylelint postcss postcss-scss postcss-html stylelint-config-prettier stylelint-config-recess-order stylelint-config-recommended-scss stylelint-config-standard stylelint-config-standard-vue stylelint-scss stylelint-order stylelint-config-standard-scss -D

3.5. .stylelintrc.cjs配置文件

官网:https://stylelint.bootcss.com/

2.3.2. .stylelintignore忽略文件

/node_modules/*
/dist/*
/html/*
/public/*

3.6. 添加运行脚本

"scripts": {
    "lint:style": "stylelint src/**/*.{css,scss,vue} --cache --fix"
}

3.7. 最后配置统一的prettier来格式化我们的js和css,html代码

"scripts": {
    "dev": "vite --open",
    "build": "vue-tsc && vite build",
    "preview": "vite preview",
    "lint": "eslint src",
    "fix": "eslint src --fix",
    "format": "prettier --write \"./**/*.{html,vue,ts,js,json,md}\"",
    "lint:eslint": "eslint src/**/*.{ts,vue} --cache --fix",
    "lint:style": "stylelint src/**/*.{css,scss,vue} --cache --fix"
  },

当我们运行pnpm run format的时候,会把代码直接格式化

四、配置husky

在上面我们已经集成好了我们代码校验工具,但是需要每次手动的去执行命令才会格式化我们的代码。如果有人没有格式化就提交了远程仓库中,那这个规范就没什么用。所以我们需要强制让开发人员按照代码规范来提交。
要做到这件事情,就需要利用husky在代码提交之前触发git hook(git在客户端的钩子),然后执行pnpm run format来自动的格式化我们的代码。

4.1. 安装husky

pnpm install -D husky

4.2. 执行(需要先连接远程仓库)

npx husky-init

会在根目录下生成个一个.husky目录,在这个目录下面会有一个pre-commit文件,这个文件里面的命令在我们执行commit的时候就会执行
在.husky/pre-commit文件添加如下命令:

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
pnpm run format

当我们对代码进行commit操作的时候,就会执行命令,对代码进行格式化,然后再提交。
(如果远程仓库代码没有更新的话,重新提交一下)

五、配置commitlint

对于我们的commit信息,也是有统一规范的,不能随便写,要让每个人都按照统一的标准来执行,我们可以利用commitlint来实现。

5.1. 安装包

pnpm add @commitlint/config-conventional @commitlint/cli -D

添加配置文件,新建commitlint.config.cjs(注意是cjs),然后添加下面的代码:

module.exports = {
  extends: ['@commitlint/config-conventional'],
  // 校验规则
  rules: {
    'type-enum': [
      2,
      'always',
      [
        'feat',
        'fix',
        'docs',
        'style',
        'refactor',
        'perf',
        'test',
        'chore',
        'revert',
        'build',
      ],
    ],
    'type-case': [0],
    'type-empty': [0],
    'scope-empty': [0],
    'scope-case': [0],
    'subject-full-stop': [0, 'never'],
    'subject-case': [0, 'never'],
    'header-max-length': [0, 'always', 72],
  },
}

在package.json中配置scripts命令

# 在scrips中添加下面的代码
{
"scripts": {
    "commitlint": "commitlint --config commitlint.config.cjs -e -V"
  },
}

配置结束,现在当我们填写commit信息的时候,前面就需要带着下面的subject

'feat',//新特性、新功能
'fix',//修改bug
'docs',//文档修改
'style',//代码格式修改, 注意不是 css 修改
'refactor',//代码重构
'perf',//优化相关,比如提升性能、体验
'test',//测试用例修改
'chore',//其他修改, 比如改变构建流程、或者增加依赖库、工具等
'revert',//回滚到上一个版本
'build',//编译相关的修改,例如发布版本、对项目构建或者依赖的改动

配置husky

npx husky add .husky/commit-msg

在生成的commit-msg文件中添加下面的命令

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
pnpm commitlint

当我们 commit 提交信息时,就不能再随意写了,必须是 git commit -m 'fix: xxx' 符合类型的才可以,需要注意的是类型的后面需要用英文的 :,并且冒号后面是需要空一格的,这个是不能省略的

六、强制使用pnpm包管理器工具

团队开发项目的时候,需要统一包管理器工具,因为不同包管理器工具下载同一个依赖,可能版本不一样,导致项目出现bug问题,因此包管理器工具需要统一管理!!!

6.1、在根目录创建scritps/preinstall.js文件,添加下面的内容

image.png
if (!/pnpm/.test(process.env.npm_execpath || '')) {
  console.warn(
    `\u001b[33mThis repository must using pnpm as the package manager ` +
    ` for scripts to work properly.\u001b[39m\n`,
  )
  process.exit(1)
}

配置命令

"scripts": {
    "preinstall": "node ./scripts/preinstall.js"
}

当我们使用npm或者yarn来安装包的时候,就会报错了。原理就是在install的时候会触发preinstall(npm提供的生命周期钩子)这个文件里面的代码。

相关文章

  • vue3+vite+ts 配置别名@报错

    我在学习vue3+vite+ts的时候,在配置别名这一步的时候遇到了一个问题,就是引入path的时候会报错,如下图...

  • vite打包报警包过大

    在vue3+vite+ts项目中,打包的时候遇到了一个告警,提示说包过大。 解决方案我们就按提示的来解决 1、调整...

  • vue3+vite+ts 搭建项目

    1、vite项目初始化 我们使用vite来初始化项目,记得初始化的过程选择vue-ts哟,这样我们就能引入ts,后...

  • vue3+vite+ts项目问题

    体验vite + vue3 + ts搭建项目的全过程 - 掘金[https://juejin.cn/post/69...

  • 【Vue3+Vite+TS】1.0 项目搭建

    搭建vite项目的命令。 我的目前是6.14.15,升级一下: 目前是8.3.0 新建vite项目命令行: 输入y...

  • git常用命令

    一、 配置 配置分为全局配置以及项目配置,一般全局配置的话,就要加上--global,而项目配置则是进入项目进行配...

  • pycharm启动项目配置

    前面我们配置好django的环境了,下面需要配置pycharm的项目配置; 1、配置settings 2、创建项目...

  • 笔记 | Android Studio极速编译

    项目级Gradle配置 项目更目录下的gradle.properties文件是项目级配置 覆盖全局配置,缺省项则保...

  • vue-cli+webpack项目总结

    关于项目中src/config配置 关于项目中config/index配置 ] 关于vue 文件配置autopre...

  • androidstudio cmakelist编译.cpp并且引

    一、项目结构 项目配置主要是里面cmake的配置,ndk配置,设置cMakeLists.txtimage.png ...

网友评论

      本文标题:项目配置(Vue3+Vite+TS)

      本文链接:https://www.haomeiwen.com/subject/tewcwdtx.html