手摸手给vue3项目增加格式化规范

一、eslint配置

1、初始化eslint

npx eslint --init  # eslint初始化

# 校验语法并提示错误的行数
? How would you like to use ESLint? ... 
  To check syntax only
> To check syntax and find problems
  To check syntax, find problems, and enforce code style

# 采用js-module
? What type of modules does your project use? ...
> JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

# 采用vue语法
? Which framework does your project use? ...
  React
> Vue.js
  None of these

# 项目使用ts -- 选择Yes
? Does your project use TypeScript? » No / Yes

# 项目运行环境 -- 浏览器、node都勾选
# > 为什么勾选node环境? 因为后面写单元测试肯定是运行在node环境中的
? Where does your code run? ...  (Press <space> to select, <a> to toggle all, <i> to invert selection)
√ Browser
√ Node

# 配置文件采用js -- js可以写一些注释更方便，也可以选择yml
? What format do you want your config file to be in? ...
> JavaScript
  YAML
  JSON

# 拒绝默认安装 -- 选择No。 默认安装采用的npm的方式，我们这里使用的pnpm，所以拒绝
√ Would you like to install them now? · No / Yes

2、安装eslint需要的依赖

npm install eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest eslint@latest -D

3、.eslintrc.js文件说明

module.exports = {
  "env": { // 环境，针对哪些环境的语法
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [ // 集成了哪些规则，别人写好的规则直接拿来用
    "eslint:recommended",
    "plugin:vue/vue3-essential",
    "plugin:@typescript-eslint/recommended" // typescript 规则
  ],
  "overrides": [
  ],
  // "parser": "@typescript-eslint/parser",
  "parser": "vue-eslint-parser", // 解析.vue文件
  "parserOptions": {
    "parser": "@typescript-eslint/parser", // 解析.ts文件
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": [
    "vue",
    "@typescript-eslint"
  ],
  "rules": { // 我们自定义的规则写在这里
  }
}

4、创建.eslintignore

node_modules
dist
*.css
*.jpg
*.jpeg
*.png
*.gif
*.d.ts

5、vscode安装eslint插件

最后，在vscode中安装eslint插件：eslint只是检测代码规范 package.json中增加

"lint": "eslint --fix --ext .ts,.tsx,.vue src --quiet"

二、prettier配置

1、eslint中集成prettier配置

npm install prettier eslint-plugin-prettier @vue/eslint-config-prettier -D

module.exports = {
  env: {
    // 环境，针对哪些环境的语法
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    // 集成了哪些规则，别人写好的规则直接拿来用
    "eslint:recommended",
    "plugin:vue/vue3-essential",
    "plugin:@typescript-eslint/recommended", // typescript 规则
    "@vue/prettier"
  ],
  overrides: [],
  // "parser": "@typescript-eslint/parser",
  parser: "vue-eslint-parser", // 解析.vue文件
  parserOptions: {
    parser: "@typescript-eslint/parser", // 解析.ts文件
    ecmaVersion: "latest",
    sourceType: "module"
  },
  plugins: ["vue", "@typescript-eslint"],
  rules: {
    // 我们自定义的规则写在这里
    "prettier/prettier": [
      "error",
      {
        singleQuote: false, // 使用单引号
        semi: false, // 末尾添加分号
        tabWidth: 2,
        trailingComma: "none",
        useTabs: false,
        endOfLine: "auto"
      }
    ]
  }
}

2、在vscode中安装Prettier插件

Prettier只是用来格式化代码。这里需要新建.prettierrc.js文件，此文件为了让Prettier插件能够识别用户配置，配置需与.eslintrc.js中保持一致

module.exports = {
  singleQuote: false, // 使⽤单引号
  semi: false, // 末尾添加分号
  tabWidth: 2,
  trailingComma: "none",
  useTabs: false,
  endOfLine: "auto"
}

3、安装 Prettier 插件，设置Default Formatter选择Prettier - Code formatter；并配置Format On Save为启用，保存时自动格式化

.vscode/settings.json

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

三、EditorConfig配置

安装EditorConfig for VS Code插件，新建.editorconfig文件

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf

四、项目私有的vscode配置

1、.vscode/extensions.json

.vscode/extensions.json文件recommendations填写推荐安装的插件

{
  "recommendations": [ // 推荐安装
    "dbaeumer.vscode-eslint",
    "editorconfig.editorconfig",
    "vue.volar",
    "esbenp.prettier-vscode",
    "eamodio.gitlens"
  ],
  "unwantedRecommendations": []
}

进入vscode插件视图输入 @recommended后点击下载按钮一键安装

vscode终端中使用命令查看vscode安装了哪些插件

code --list-extensions

2、.vscode/settings.json

{
  "window.zoomLevel": 0,
  // "editor.wordWrap": "wordWrapColumn",
  "editor.formatOnSave": true, //true 保存时格式化
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": false //true 保存时自动修复
  },
  "eslint.format.enable": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    "vue-html",
    "vue" //设置vue表示使用eslint检查vue
  ],
  "files.associations": {
    "*.vue": "vue"
    // "*.ts": "typescript"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
    // "editor.defaultFormatter": "Vue.volar"
    // "editor.codeActionsOnSave": {
    //   "source.fixAll.eslint": true,
    //   "source.fixAll.stylelint": true
    // }
  },
  "volar.tsPlugin": true,
  "volar.tsPluginStatus": false,
  "[typescript]": {
    // "editor.defaultFormatter": "johnsoncodehk.vscode-typescript-vue-plugin"
    // "editor.defaultFormatter": "vscode.typescript-language-features",
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "prettier.singleQuote": true,
  "prettier.jsxSingleQuote": false,
  "javascript.format.insertSpaceAfterConstructor": true,

  "vetur.format.enable": false, //禁用vetur格式化器
  // "vetur.validation.template": false,

  // Use ':' as separator between property and value
  // "languageStylus.useSeparator": true, // default value
  // Toggle matches for Stylus Builtin Functions on autocomplete
  // "languageStylus.useBuiltinFunctions": true, // default value
  // Toggle colors preview
  "editor.colorDecorators": true // default value
}

五、git commmit校验配置

husky使用git钩子, 对git commit message进行校验

1、安装husky插件

npm install husky @commitlint/cli @commitlint/config-conventional -D

2、commitlint.config.js文件

/**
 * @file commitlint 配置
 * commit message: <type>: <subject>(注意冒号后面有空格)
 *
 */
module.exports = {
  extends: ["@commitlint/config-conventional"],
  rules: {
    "type-enum": [
      2,
      "always",
      [
        "init", // 初始提交
        "feat", // 新功能（feature）
        "perf", // 优化
        "fix", // 修补bug
        "docs", // 文档（documentation）
        "style", // 格式（不影响代码运行的变动）
        "refactor", // 重构（即不是新增功能，也不是修改bug的代码变动）
        "build", // 编译构建
        "test", // 增加测试
        "revert", // 回滚
        "chore" // 其他改动
      ]
    ],
    "type-empty": [2, "never"], // 提交不符合规范时,也可以提交,但是会有警告
    "subject-empty": [2, "never"], // 提交不符合规范时,也可以提交,但是会有警告
    "subject-full-stop": [0, "never"],
    "subject-case": [0, "never"]
  }
}

3、package.json中增加

"hooks": {
    "commit-msg": "commitlint --env HUSKY_GIT_PARAMS"
},

举例: 提交的时候使用

git commit -m 'init: 初始化'(注意冒号后面有空格)

4、安装lint-staged在commit时对git add暂存的文件进行校验

npm i lint-staged -D

5、package.json中增加

"hooks": {
    "commit-msg": "commitlint --env HUSKY_GIT_PARAMS",
    "pre-commit": "lint-staged"
},
"lint-staged": {
    "*.ts": [
      "eslint --fix"
    ],
    "*.vue": [
      "eslint --fix"
    ]
}

lint-staged使用glob模式对文件进行匹配