基建-前端项目搭建规范

128 阅读2分钟

一、代码规范

1.1 集成.editorconfig

新建.editorconfig文件

# https://editorconfig.orgroot = true[*] # 表示所有文件适用
charset = utf-8 # 设置文件字符集为 utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true # 始终在文件末尾插入一个新行
trim_trailing_whitespace = true # 去除行首的任意空白字符[*.md] # 表示仅 md 文件适用以下规则
insert_final_newline = false
trim_trailing_whitespace = false
max_line_length = off

vsCode编辑器里要安装插件:EditorConfig for VS Code

1.2 使用prettier工具

  • 需要安装prettier:npm install prettier -D

新建.prettierrc文件

{
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 80,
  "singleQuote": true,
  "trailingComma": "none",
  "semi": false
}

可新建.prettierignore文件设置忽略文件

/dist/*
.local
.output.js
/node_modules/**
​
**/*.svg
**/*.sh
​
/public/*
​

vsCode编辑器里要安装插件:Prettier - Code formatter

我们还可以在package.json文件里写一个可执行脚本

"scripts": {
    "prettier": "prettier --write ."
  },

这样可以在命令行直接npm run prettier将所有文件格式化

1.3 使用ESLint检测

  • 需要安装eslint(普遍新建项目时选择了eslint的话,会自动安装好的):npm install -D eslint

vsCode编辑器需要安装ESLint插件:ESLint

为了防止prettier和eslint起冲突,还需要安装这两个插件(在用vue-cli创建项目时,如果选择了prettier的话,这两个插件会自动安装好的了):

npm install -D eslint-config-prettier eslint-plugin-prettier

添加prettier插件:(在.eslintrc.js文件里修改,数组里后面的会覆盖前面的相关的配置项)

extends: [
    'plugin:prettier/recommended' // 末尾添加添加这一行
],

1.4 git Husky和eslint

虽然使用了eslint,但不能保证每个人在git commit之前把eslint的问题解决了:

  • 就是我们希望代码仓库里的代码都是符合eslint规范的
  • 那我们就在git commit时对其进行校验,不符合规范的就自动修复

那就通过Husky工具实现:

  • Husky是一个git hook工具,可以帮我们触发pre-commit阶段

这里我们使用自动配置命令:

npm install husky
npx husky-init

这个命令主要做了三件事:

  1. 安装husky依赖
  2. 在项目目录创建了.husky文件夹
  3. 在package.json新增了一个脚本:"prepare": "husky install"

那我们就在它创建的.husky文件夹里的pre-commit文件作修改(vue-cli创建的项目有自己的一个lint脚本,思想上都是规范文件而已)

npm test ===>>> npm run lint

然后我们每次git commit代码时就会自动规范代码了