vite + ts + eslint + prettier 项目规范

1.项目初始化

npm create vite vue3-ts-app --template vue-ts
// 安装依赖
cd vue3-ts-app
npm i
// 初始化git仓库
git init

2.集成eslint

// 安装
npm i eslint -D

// 初始化
npx eslint --init

依次选择:

打开项目配置eslintrc.json文件

{
    // 设置我们的运行环境为浏览器 + es2021 + node ,否则eslint在遇到 Promise，window等全局对象时会报错
    "env": {
        "browser": true,
        "es2021": true,
        "node": true,
        // 开启setup语法糖环境
        "vue/setup-compiler-macros":true
    },
    // 新增，解析vue文件,使得eslint能解析<template>标签中的内容
    "parser":"vue-eslint-parser",
    // 继承eslint推荐的规则集，vue基本的规则集，typescript的规则集
    "extends": [
        "eslint:recommended",
        // 由于我们是vue3项目，所以应该使用vue3的规则集，这里使用vue3-recommended
        // "plugin:vue/essential",
        "plugin:vue/vue3-recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    // 支持ts的最新语法
    "parserOptions": {
        "ecmaVersion": "latest",
        // parserOptions中的parser，即@typescript-eslint/parser用来解析vue文件中<script>标签中的代码
        "parser": "@typescript-eslint/parser",
        "sourceType": "module"
    },
    // 添加vue和@typescript-eslint插件，增强eslint的能力
    "plugins": [
        "vue",
        "@typescript-eslint"
    ],
    "rules": {
    }
}

然后我们为package.json文件增加一个lint命令

"scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview",
    "lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix"
  },

运行yarn run lint

3.添加vscode-eslint 插件并添加配置

4.集成 prettier

// 安装
yarn add prettier -D

// 项目根目录添加一份配置文件 .prettierrc.js
module.exports = {
  printWidth: 80, //单行长度
  tabWidth: 2, //缩进长度
  useTabs: false, //使用空格代替tab缩进
  semi: true, //句末使用分号
  singleQuote: true, //使用单引号
}

更多的配置方法，可以参考官方的配置文档。

然后再package.json中添加一个脚本

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

5.解决 eslint 和 prettier 的冲突

用 eslint-config-prettier 提供的规则集来覆盖掉eslint冲突的规则，并用eslint-plugin-prettier来使eslint使用prettier的规则来美化代码。

npm i eslint-config-prettier eslint-plugin-prettier -D

然后在 .eslintrc.json中extends的最后添加一个配置:

  "extends": [
    "eslint:recommended",
    "plugin:vue/vue3-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended" // 新增，必须放在最后面
  ],

6.配置 husky + lint-staged

现在我们已经能使得我们的项目获得不错的开发规范约束，然而仍然有可以改进的地方：

如果是在项目中途才接入eslint + prettier,如果对原来的代码使用npm run lint 或者 npm run format势必会带来大范围地改动，甚至会造成冲突。
对于一些不使用vscode编辑器，或者没有安装prettier和eslint插件的用户而言，他们不能享受到插件带来的协助，而他们的代码自然大概率是不符合规范的，不该被提交到代码库。

基于上述的顾虑，社区提供了 husky + lint-staged的渐进式方案。 lint-staged 是一个只检测git暂存区的lint工具，husky是一个用来给我们的项目添加git hook的工具，git hook是进行git操作会触发的脚本，例如：提交的时候会触发pre-commit钩子,输入提交信息会触发commit-msg钩子。我们用husky安装pre-commit钩子，我们就可以在进行git commit操作的时候，运行我们的脚本来检测待提交的代码是否规范，便可以只对暂存区的文件进行检查。

// 安装依赖
npm i husky lint-staged -D

// 在package.json中添加一条preinstall脚本
{
    "script":{
        "prepare": "husky install"
    }
}

prepare脚本会在 npm install 之后自动运行，这样你的小伙伴clone了你的项目之后会自动安装husky,这里由于我们已经运行过npm install 了，所以我们需要手动运行一次npm run prepare,然后我们就会得到一个目录.husky。

接下来我们为我们git仓库添加一个pre-commit钩子,运行

npx husky add .husky/pre-commit "npx --no-install lint-staged"

接下来我们为我们git仓库添加一个pre-commit钩子,运行

#!/bin/sh 
. "$(dirname "$0")/_/husky.sh"

npx --no-install lint-staged

接下来我们配置lint-staged,在package.json中添加下面的配置信息。

{
  "lint-staged": {
    "*.{js,vue,ts,jsx,tsx}": [
      "prettier --write",
      "eslint --fix"
    ],
    "*.{html,css,less,scss,md}": [
      "prettier --write"
    ]
  }
}

这样之后，我们后续提交到暂存区的代码也就会被eslint+prettier格式化和检查，进一步保证我们的代码规范。