vite创建vue3+ts项目添加eslint+prettier+husky代码检查格式化提交流程vite创建vue3

vite创建vue3+ts项目

# vue-ts模板 --template vue-ts
yarn create vite my-vue-app --template vue-ts
cd my-vue-app
yarn

eslint配置

yarn add eslint --dev
# eslint初始化
yarn eslint --init

接下来会有一些选择帮助安装所需的依赖, 因为此项目是vue3+ts项目, 这一步将要安装的依赖有:

eslint-plugin-vue #校验vue
@typescript-eslint/eslint-plugin #校验ts
@typescript-eslint/parser #ts解析器

同时这一步eslint会为我们自动添加配置文件, 编辑.eslintrc.js文件:

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "parser": 'vue-eslint-parser',
    "extends": [
        "eslint:recommended",
        "plugin:vue/vue3-recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "parserOptions": {
        "ecmaVersion": 13,
        "parser": "@typescript-eslint/parser",
        "sourceType": "module"
    },
    "plugins": [
        "vue",
        "@typescript-eslint"
    ],
    "rules": {
    }
};

在package.json中添加一条新的script

"lint": "eslint --ext .ts,.vue src"

运行命令测试是否生效

yarn lint

prettier配置

# 安装固定版本的prettier
yarn add prettier --dev --exact

手动创建prettier配置文件 .prettierrc.js.

module.exports = {
  // 一行最多 80 字符
  printWidth: 80,
  // 使用 2 个空格缩进
  tabWidth: 2,
  // 不使用缩进符，而使用空格
  useTabs: false,
  // 行尾需要有分号
  semi: true,
  // 使用单引号
  singleQuote: true,
  // 对象的 key 仅在必要时用引号
  quoteProps: 'as-needed',
  // jsx 不使用单引号，而使用双引号
  jsxSingleQuote: false,
  //  Trailing commas where valid in ES5 (objects, arrays, etc.). No trailing commas in type parameters in TypeScript.
  trailingComma: 'es5',
  // 大括号内的首尾需要空格
  bracketSpacing: true,
  // 首标签结尾的尖括号 > 单列一行
  bracketSameLine: false,
  // 箭头函数，只有一个参数的时候，也需要括号
  arrowParens: 'always',
  // 每个文件格式化的范围是文件的全部内容
  rangeStart: 0,
  rangeEnd: Infinity,
  // 不需要写文件开头的 @prettier
  requirePragma: false,
  // 不需要自动在文件开头插入 @prettier
  insertPragma: false,
  // 使用默认的折行标准
  proseWrap: 'preserve',
  // 根据显示样式决定 html 要不要折行
  htmlWhitespaceSensitivity: 'css',
  // 换行符使用 lf
  endOfLine: 'lf',
};

不创建配置文件prettier也可以正常使用, prettier会按照默认配置处理文件.还可以创建.prettierignore文件, 用途是配置忽略格式化的文件, 其实用途和语法和.gitignore都是一样的.

下一步就是处理eslint和prettier可能发生冲突的情况. eslint+prettier配合使用的原则是eslint负责代码质量检查,prettier负责代码格式化.

安装 eslint-config-prettier

yarn add eslint-config-prettier --dev

修改 .eslintrc.js

module.exports = {
  ...
  extends: [
    ...
    'prettier' // 写在最后一位
  ],
  ...
}

在package.json中添加一条新的script

"prettier": "prettier --write ."

运行命令测试是否生效

yarn prettier

然后我们可以在ide上安装eslint和prettier对应的插件, 这里推荐使用vscode作为ide, 它有丰富的插件支持.

安装vscode的插件后可以修改vscode的setting.json文件增强插件的功能.

"eslint.validate": [ // 被eslint检查的文件类型
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue"
    ],
"editor.defaultFormatter": "esbenp.prettier-vscode", // 默认格式化插件

husky & lint-staged 配置

只差最后一块拼图了, 我们希望什么时候进行代码质量校验和格式化呢? 考虑到通用性,最好的时机就是在每次提交新修改的时候. 因为如果将检查的范围放得更大或者更无时无刻, 可能会改动无需修改的旧代码, 引起未知的错误和无意义的提交信息.

husky插件的作用就是在git hook中添加操作, lint-staged则可以准确的定位到暂存区的代码并对其操作, 两个插件搭配使用即可完成自动化的代码质量校验和格式化链.

yarn add husky lint-staged --dev
# 初始化husky
npx husky-init && yarn

修改 .husky/pre-commit 文件

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

npx lint-staged

修改 package.json 文件

"scripts": { ... },
"lint-staged": {
    "src/**/*.{ts,vue}": [
      "yarn prettier:fix", // 可以执行你定义的命令行
      "yarn lint:fix",
      "eslint --fix", // 也可以执行常用的linters命令
      "prettier --write",
    ]
  },
...

除了校验代码本身外，还可以对git commit msg进行约束。这一步在另一个hook commit-msg中实现。额外引入commitlint包校验commit msg的格式。

# 安装commitlint
yarn add @commitlint/{config-conventional,cli} --dev
# 创建配置文件
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js
# 添加hook
npx husky add .husky/commit-msg 'npx --no -- commitlint --edit "$1"'
# commitlint的默认格式如下，支持自定义
type(scope?): subject

随便改点代码，提交一下，大功告成!

vite创建vue3+ts项目 添加eslint+prettier+husky代码检查格式化提交流程