代码规范

prettier

代码格式化

配置方式

• package.json文件prettier字段配置

• 根目录独立文件配置.prettierrc

• scrips脚本："lint:prettier": "prettier -c --write ."

通用规范

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

{
  printWidth: 120,
  tabWidth: 2,
  useTabs: false,
  semi: true,
  singleQuote: true,
  quoteProps: 'as-needed',
  jsxSingleQuote: false,
  trailingComma: 'all',
  bracketSpacing: true,
  bracketSameLine: false,
  arrowParens: 'always',
  requirePragma: false,
  insertPragma: false,
  proseWrap: 'preserve',
  htmlWhitespaceSensitivity: 'css',
  vueIndentScriptAndStyle: false,
  endOfLine: 'lf',
  embeddedLanguageFormatting: 'auto',
}

忽略配置

• 根目录.prettierignore文件

1
2

build/
**/*.svg

eslint

js,ts,tsx文件规范检查

配置方式

• 根目录.eslintrc.*文件

  1 2 3 4 5 6 7

  { "extends": ["stander"], "rules": { "camelcase": "off" } }

• package.json文件内eslintConfig字段配置

• scrips脚本："lint:eslint": "eslint . --ext=.js,.jsx,.ts,.tsx --fix"

通用规范

• @vue/eslint-config-prettier
• @vue/eslint-config-typescript
• eslint-config-prettier
• eslint-config-standard
• eslint-config-standard-jsx
• eslint-config-standard-react

常用插件

• eslint-plugin-prettier
• eslint-plugin-promise
• eslint-plugin-react
• eslint-plugin-react-hooks
• eslint-plugin-unicorn
• eslint-plugin-vue
• eslint-plugin-import

忽略配置

• 文件内忽略

1
2
3

/* eslint-disable */
alert('foo');
/* eslint-enable */

• 文件&文件夹忽略，根目录.eslintignore文件

1
2

build
*.less.d.ts

stylelint

样式文件规范检查

配置方式

• 通过package.json配置

1
2
3
4
5

"stylelint": {
  "extends": [
    "stylelint-config-standard"
  ]
}

• 根目录下通过独立文件配置

  • .stylelintrc

  • stylelint.config.js

• scrips脚本："lint:stylelint": "stylelint \"packages/**/*.{less,css}\" --color --fix"

通用规范

stylelint-config-standard

忽略配置

• 文件内忽略

  1 2 3 4

  #id { /* stylelint-disable-next-line declaration-no-important */ color: pink !important; }

• 文件&文件夹忽略,根目录.stylelintignore文件

  1

  public

提交代码检查

huskey

git钩子工具

• 安装husky：scripts新增"postinstall": "husky install"

• 运行钩子

  1 2 3 4

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

lint-staged

对暂存的 git 文件运行 linters

• 配置方式：package.json新增字段lint-staged

  1 2 3 4 5 6 7 8 9 10 11

  "lint-staged": { "*.{js,jsx,ts,tsx}": [ "eslint --fix" ], "*.{css,less}": [ "stylelint --fix" ], "*.{d.ts,json,md}": [ "prettier --write" ] },

代码拉取检查

diffrun

更新代码后对差异文件执行脚本

• 配置方式: 根目录package.json新增字段diffrun

  1 2 3 4 5 6 7 8 9

  "diffrun": [ { "package-lock.json": "npm ci" }, { ".eslintrc": "npm run lint", "*/**/tsconfig.json": "npm run lint:types" } ],

• Next Post →