vue3 + tsx + vite + prettier + eslint + husky

本章的完整项目: vue-template

创建项目

yarn create vite

支持 tsx

pnpm add @vitejs/plugin-vue-jsx -D

vite.config.ts

  import { defineConfig } from "vite";
  import vue from "@vitejs/plugin-vue";
+ import vueJsx from "@vitejs/plugin-vue-jsx"; 

  export default defineConfig({
    plugins: [
      vue(),
+     vueJsx()
    ],
  });

prettier 代码格式化

pnpn add prettier -D

.perttierrc.js

module.exports = {
  printWidth: 100,
  tabWidth: 2,
  useTabs: false,
  semi: false, // 未尾逗号
  // vueIndentScriptAndStyle: true,
  singleQuote: true, // 单引号
  quoteProps: 'as-needed',
  bracketSpacing: true,
  trailingComma: 'none', // 未尾分号
  jsxBracketSameLine: false,
  jsxSingleQuote: false,
  arrowParens: 'always',
  insertPragma: false,
  requirePragma: false,
  proseWrap: 'never',
  htmlWhitespaceSensitivity: 'strict',
  endOfLine: 'lf'
}

package.json

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

eslint 代码风格

pnpm add eslint -D

// 选择
√ How would you like to use ESLint? · style       
√ What type of modules does your project use? · esm
√ Which framework does your project use? · vue
√ Does your project use TypeScript? · No / Yes
√ Where does your code run? · browser
√ How would you like to define a style for your project? · prompt
√ What format do you want your config file to be in? · JavaScript
√ What style of indentation do you use? · tab
√ What quotes do you use for strings? · single
√ What line endings do you use? · unix
√ Do you require semicolons? · No / Yes
The config that you've selected requires the following dependencies:

eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parer@latest
√ Would you like to install them now? · No / Yes
√ Which package manager do you want to use? · pnpm

.eslintrc.js

module.exports = {
  env: {
    browser: true,
    es2021: true,
    "vue/setup-compiler-macros": true,
  },
  extends: [
    "eslint:recommended",
    "plugin:vue/vue3-recommended",
    "plugin:@typescript-eslint/recommended",
  ],
  parser: "vue-eslint-parser",
  parserOptions: {
    ecmaVersion: "latest",
    parser: "@typescript-eslint/parser",
    sourceType: "module",
  },
  plugins: ["vue", "@typescript-eslint"],
  rules: {
    indent: ["error", 2],
    "linebreak-style": ["error", "unix"],
    quotes: ["error", "single"],
    semi: ["error", "never"],
    "vue/html-self-closing": [
      "error",
      {
        html: { normal: "never", void: "always" },
        svg: "always",
        math: "always",
      },
    ],
    "vue/multi-word-component-names": 0,
  },
};

package.json

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

eslint prettier 冲突

pnpm add eslint-config-prettier eslint-plugin-prettier -D

.eslintrc.js

"extends": [
  ......
  "plugin:prettier/recommended" // 放在最后面
]

husky lint-stage 提交时触发的钩子

pnpm add husky lint-staged -D

package.json

"scripts": {
  ......
+ "prepare": "husky install"
  ......
},

prepare 会在 pnpm install 之后运行

运行：

pnpm prepare

给 git 中添加 pre-commit 钩子

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

package.json

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