前端小栈

Appearance

Return to top
On this page

代码规范

提示

Eslint 代码质量检测

Prettier 代码风格统一

安装 

pnpm add eslint -D
pnpm add prettier -D

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

pnpm add @typescript-eslint/eslint-plugin -D
pnpm add @typescript-eslint/parser -D

配置 

# mkdir

|-- vue3-admin
    |-- .eslintignore
    |-- .eslintrc.js
    |-- .prettierignore
    |-- .prettierrc.js

// .eslintrc.js

module.exports = {
  // 设置运行环境为浏览器 + es2021 + node ,否则eslint在遇到 Promise，window等全局对象时会报错
  env: {
    browser: true,
    es2021: true,
    node: true,
    // 支持setup的最新语法
    'vue/setup-compiler-macros': true
  },
  // 继承eslint推荐的规则集，vue基本的规则集，typescript的规则集，prettier的规则集
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended'
  ],
  parser: 'vue-eslint-parser',
  // 支持ts的最新语法
  parserOptions: {
    ecmaVersion: 'latest',
    parser: '@typescript-eslint/parser',
    sourceType: 'module'
  },
  // 添加vue和@typescript-eslint插件，增强eslint的能力
  plugins: ['vue', '@typescript-eslint'],
  rules: {
    'vue/multi-word-component-names': 0
  }
}

// .prettierrc.js

module.exports = {
  printWidth: 80,
  tabWidth: 2,
  useTabs: false,
  singleQuote: true,
  semi: true,
  trailingComma: 'none'
}

// .eslintignore

node_modules
dist

// .prettierignore

node_modules
dist
*.md

// package.json

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

vscode保存自动格式化

vscode中安装插件ESLint、Prettier

// settings.json
{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.fixAll.eslint": true
  },
  "[typescript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[vue]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[javascript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "explorer.confirmDragAndDrop": false,
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

同时推荐安装vscode插件volar，完美支持vue3

提交规范

pre-commit

mrm 根据package.json依赖项中的代码质量工具来安装和配置husky和lint-staged，请确保在此之前安装并配置所有代码质量工具

husky 为git客户端增加hook的工具

lint-staged 过滤出git代码暂存区文件

安装 

pnpm add mrm -D
pnpm mrm lint-staged // 会同时安装`husky`

配置 

// package.json

"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "*": [
    "pnpm run lint",
    "pnpm run prettier",
    "git add"
  ]
}