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

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: {  
      ecmaVersion2021parser'@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 = {  
    printWidth100// 单行输出(不折行)的(最大)长度  
    tabWidth2// 每个缩进级别的空格数  
    tabsfalse// 使用制表符 (tab) 缩进行而不是空格 (space)。  
    semifalse// 是否在语句末尾打印分号  
    singleQuotetrue// 是否使用单引号  
    quoteProps'as-needed'// 仅在需要时在对象属性周围添加引号  
    bracketSpacingtrue// 是否在对象属性添加空格  
    jsxBracketSameLinetrue// 将 > 多行 JSX 元素放在最后一行的末尾,而不是单独放在下一行(不适用于自闭元素),
    //默认false,这里选择>不另起一行  
    htmlWhitespaceSensitivity'ignore'// 指定 HTML 文件的全局空白区域敏感度, "ignore" - 空格被认为是不敏感的  
    trailingComma'none'// 去除对象最末尾元素跟随的逗号  
    useTabsfalse// 不使用缩进符,而使用空格  
    jsxSingleQuotefalse// jsx 不使用单引号,而使用双引号  
    arrowParens'always'// 箭头函数,只有一个参数的时候,也需要括号  
    rangeStart0// 每个文件格式化的范围是文件的全部内容  
    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、使用huskylint-staged进行提交检查修复

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

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

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

image.png

  1. 默认情况下,在pre-commit文件中为存在npm test命令,在您提交commit时运行。可自行修改。
// pre-commit
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npm run lint:lint-staged
复制代码
  1. 修改peckage.json
"scripts": {
    "lint:lint-staged": "lint-staged"
 },
 
 ...
 
"lint-staged": {
    "src/**/*.{js,jsx,ts,tsx,vue}": [
      "prettier --write",
      "eslint --cache --fix",
      "git add"
    ]
  }
复制代码

4.使用sourcetree提交失败 添加配置 PATH=$PATH:/usr/local/bin:/usr/local/sbin

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

#修复sourcetree提交代码husky报
PATH=$PATH:/usr/local/bin:/usr/local/sbin

npm run lint:lint-staged
复制代码

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

文章分类
前端
文章标签