vue3+ts+eslint+prettier+husky+lint-staged 项目配置

前言

最近几个月搭建了几个新项目，技术选型主要以vue3、ts、vue-cli/vite、ant-design-vue为主，但是项目代码风格规划总是会出现点略微差别，花费了一些时间研究，总算理清了配置的逻辑。

1、校验.js

• 安装 eslint
• yarn add eslint -D
• 配置 eslint

// .eslintrc.js
{
  extends: ['eslint:recommended'],
}
复制代码

2、校验.vue

• 安装 eslint-plugin-vue
• yarn add eslint-plugin-vue -D
• 查看文档介绍 eslint-plugin-vue

// .eslintrc.js
{
  extends: ['plugin:vue/vue3-essential']  // 防止错误或意外行为的规则。
  // 或 
  extends: ['plugin:vue/vue3-strongly-recommended'] // 加上可显着提高代码可读性或开发体验的规则
  // 或 
  extends: ['plugin:vue/vue3-recommended'] // 加上强制执行主观社区默认值以确保一致性的规则。
}
复制代码

3、使用prettier格式化

• 安装 eslint-plugin-prettier
• yarn add eslint-plugin-prettier -D
• 查看文档介绍 eslint-plugin-prettier
• 因为eslint可能会与prettier冲突，文档中发现推荐安装 eslint-config-prettier用来解决ESLint中的规范和prettier中规范的冲突，以prettier的样式规范为准，使ESLint中的样式规范自动失效。

// .eslintrc.js
{
  "extends": ["plugin:prettier/recommended"] // 将prettier作为ESLint规范来使用
  // 它包含了 extends: ['prettier'], plugins: ['prettier']
}
复制代码

4、解析typescript

• 安装 @typescript-eslint/parser：eslint的解析器，用于解析ts，从而检查和规范ts代码
• 安装 @typescript-eslint/eslint-plugin：这是一个eslint插件，包含了各类定义好的检测ts代码的规范
• yarn add -D @typescript-eslint/parser @typescript-eslint/eslint-plugin

// .eslintrc.js
{
  parser: 'vue-eslint-parser',
  parserOptions: {  
      ecmaVersion: 2021, 
      parser: '@typescript-eslint/parser', // 解析器
      sourceType: 'module'
  },
  extends: ['plugin:@typescript-eslint/recommended'],
}
复制代码

5、以上归总.eslintrc.js

// .eslintrc.js
{
  root: true,
  env: {
    browser: true,
    node: true,
    es2021: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended',
    'plugin:prettier/recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  parserOptions: {
    ecmaVersion: 12,
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
    jsxPragma: 'React',
    ecmaFeatures: {
      jsx: true,
    },
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
    "prettier/prettier": [
      "error",
      {
        endOfLine: "auto",
      },
    ],
    "vue/html-self-closing": "error",
    // ...
  },
}

// package.json
{
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^4.26.1",
    "@typescript-eslint/parser": "^4.26.1",
    "eslint": "^7.28.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^3.4.0",
    "eslint-plugin-vue": "^7.10.0",
    "prettier": "^2.3.2"
  }
}
复制代码

6、配置.prettierrc.js

// .prettierrc.js
module.exports = {  
    printWidth: 100, // 单行输出（不折行）的（最大）长度  
    tabWidth: 2, // 每个缩进级别的空格数  
    tabs: false, // 使用制表符 (tab) 缩进行而不是空格 (space)。  
    semi: false, // 是否在语句末尾打印分号  
    singleQuote: true, // 是否使用单引号  
    quoteProps: 'as-needed', // 仅在需要时在对象属性周围添加引号  
    bracketSpacing: true, // 是否在对象属性添加空格  
    jsxBracketSameLine: true, 
    // 将 > 多行 JSX 元素放在最后一行的末尾，而不是单独放在下一行（不适用于自闭元素）,
    //默认false,这里选择>不另起一行  
    htmlWhitespaceSensitivity: 'ignore', 
    // 指定 HTML 文件的全局空白区域敏感度, "ignore" - 空格被认为是不敏感的  
    trailingComma: 'none', // 去除对象最末尾元素跟随的逗号  
    useTabs: false, // 不使用缩进符，而使用空格  
    jsxSingleQuote: false, // jsx 不使用单引号，而使用双引号  
    arrowParens: 'always', // 箭头函数，只有一个参数的时候，也需要括号  
    rangeStart: 0, // 每个文件格式化的范围是文件的全部内容  
    proseWrap: 'always', // 当超出print width（上面有这个参数）时就折行  
    endOfLine: 'lf' // 换行符使用 lf
};
复制代码

7、配置settings.json

• vscode安装eslint插件、Prettier – Code formatter 插件
• 在项目根目录添加.vscode/settings.json文件

// .vscode/settings.json
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.format.enable": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    "vue",
    "typescript",
    "typescriptreact"
  ],
复制代码

7、使用husky、lint-staged进行提交检查修复

• husky 官方文档
• 安装依赖 yarn add -D husky lint-staged

最新版本和V4版本在配置上有较大的不同：

1. 自动安装 npx husky-init && yarn 生成以下文件：

2. 默认情况下，在pre-commit文件中为存在npm test命令，在您提交commit时运行。可自行修改。

// pre-commit
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npm run lint:lint-staged
复制代码

3. 修改peckage.json

"scripts": {
    "lint:lint-staged": "lint-staged"
 },
 
 ...
 
"lint-staged": {
    "src/**/*.{js,jsx,ts,tsx,vue}": [
      "prettier --write",
      "eslint --cache --fix",
      "git add"
    ]
  }
复制代码

以上配置后，执行git commit提交命令后，会自动校验并格式化。