【工程化系列】教你如何流程化搭建一个Vite + TS + ESlint 项目

一、创建项目部分

使用 Vite 新建一个项目

yarn create vite

---

二、ESlint使用部分

添加ESlint

yarn add eslint --dev

初始化ESlint

yarn run eslint --init

这个时候编写代码就会有 eslint 校验了，我们来配置整个项目校验命令

配置 package.json

  "scripts": {
      //...
    "lint": "eslint 'src/**/*.{js,jsx,vue,ts,tsx}' --fix"
  },

执行校验

yarn run lint

这个时候就能看到校验不通过的地方了
一般会提示以下问题我们来逐一解决

1. error The template root requires exactly one element
2. error 'defineProps' is not defined

解决Vue3模板根元素校验问题

修改 .eslintrc.js ，把 plugin:vue/essential 替换为 plugin:vue/vue3-recommended

  extends: [
    // 'plugin:vue/essential',
    'plugin:vue/vue3-recommended',
    'standard'
  ],

解决 defineProps 定义问题

修改 .eslintrc.js ，添加 globals 配置

  globals: {
    defineProps: 'readonly',
    defineEmits: 'readonly',
    defineExpose: 'readonly',
    withDefaults: 'readonly'
  }

保存在执行下 yarn run lint，这时可以看到所有校验都通过了
附上此时 .eslintrc.js 配置

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'plugin:vue/vue3-recommended',
    'standard'
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    parser: '@typescript-eslint/parser',
    sourceType: 'module'
  },
  plugins: [
    'vue',
    '@typescript-eslint'
  ],
  rules: {
  },
  globals: {
    defineProps: 'readonly',
    defineEmits: 'readonly',
    defineExpose: 'readonly',
    withDefaults: 'readonly'
  }
}

三、配置运行时校验

安装 vite-plugin-eslint 插件

yarn add vite-plugin-eslint --dev

配置 vite.config.ts

...
import eslintPlugin from 'vite-plugin-eslint'
...
 plugins: [
      ...
      eslintPlugin({
        // 配置
        cache: false // 禁用 eslint 缓存
      })
 ]

这时重启项目就可以看到有错误的地方控制台会报错了

---

四、集成 prettier

yarn add prettier --dev

添加配置文件 .prettierrc.js

module.exports = {
    // 根据自己项目需要
    printWidth: 200, //单行长度
    tabWidth: 4, //缩进长度
    semi: false, //句末使用分号
    singleQuote: true, //使用单引号
    trailingComma: 'none' // 句末逗号
}

配置校验脚本 package.json

   "scripts":{
           ...
           "format": "prettier --write './**/*.{vue,ts,tsx,js,jsx,css,less,scss,json,md}'"
   }

配置完执行 yarn format 就可以格式化代码了

解决 eslint 和 prettier 的冲突

一般实际情况下 eslint 和 prettier 的规则会存在冲突，我们引用以下插件完成

yarn add eslint-config-prettier eslint-plugin-prettier --dev

修改 .eslintrc.js 配置

    ...
    extends: [
        'plugin:vue/vue3-recommended',
        'standard',
        // 新增，必须放在最后面
        'plugin:prettier/recommended'
    ],
    ...

结合 vscode 保存自动格式化

安装 vscode 的 prettier 插件
配置 .vscode/settings.json

{
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "editor.formatOnType": true
}

现在编辑保存时就可以自动格式化代码了

---

五、Git 提交校验部分

添加 husky + lint-staged

npx mrm@2 lint-staged

配置 package.json

  // ...
  "lint-staged": {
    "src/**/*.{js,jsx,vue,ts,tsx}": [
      "npm run lint",
      "git add"
    ]
  }

这时尝试提交代码就会进行 eslint 校验了，不通过时会报错无法提交

添加GIT提交规范配置

yarn add @commitlint/config-conventional @commitlint/cli --dev

添加配置文件 commitlint.config.js

module.exports = {
  extends: ['@commitlint/config-conventional']
}

npx husky add .husky/commit-msg 'npx --no -- commitlint --edit "$1"'

这时提交文件就会要求标明改动类型了

常见commit提交类型

类型	说明
chore	构建过程或辅助工具的变动
feat	新功能，比如 feat: login
fix	修补 bug
perf	优化相关，比如提升性能、体验
style	不影响代码含义的修改，比如空格、格式化、缺失的分号等，而不是 css 修改
test	增加测试代码或者修改已存在的测试

---

参考项目git地址：https://github.com/jyliyue/vite-ts-template.git