统一前端代码风格

# 注释规范

# 顶部文档注释（推荐使用）

<!--
 * @Description: 首页
 * @Author: tengmingxin
 * @Date: 2022-02-24 11:58:03
 * @LastEditors: tengmingxin
 * @LastEditTime: 2022-04-12 19:05:19
-->

1
2
3
4
5
6
7

# 方法注释

/**
 * @msg: 提交表单
 * @param {*}
 * @return {*}
 */

1
2
3
4
5

使用方法： VSCode 安装插件 koroFileHeader

WebStrom 可参考博客https://www.cnblogs.com/byx1024/p/12208009.html设置

# HTML 板块注释

...
<!-- 活动板块 开始 -->
<div class="part-act">
...
</div>
<!-- 活动板块 结束 -->

1
2
3
4
5
6

# 标签(组件)属性顺序

定义（is）

列表渲染（v-for）

条件渲染（v-if、v-else-if、v-else、v-show）

渲染方式（v-pre、v-once）

唯一标识（ref、key）

双向绑定（v-modal）

组件事件（ v-on）

元素内容(v-html、v-text)
# vue 实例顺序

el

name

component

extends、mixins

props

data

computed

watch

created

mounted

activited

......按照 vue 生命周期钩子顺序

methods
# 命名规范-组件
- # 多个单词组成，以大驼峰命名方式
- # 基础组件以特定的前缀开头如 Base、App 、 V
- # 单页面使用的不存在复用组件以 The 前缀命名，标识唯一性
- # DOM 模板中使用 kebab-case 短横线声明
```
<my-component></my-component>
```
  1
- # JS/JSX 中组件名使用 PascalCase 大驼峰
```
import MyComponent from './MyComponent.vue'

export default {
  name: 'MyComponent',
}
```
  1
  2
  3
  4
  5
- # 耦合的组件名--父组件紧密耦合的子组件应该以父组件名作为前缀命名
  
  如果一个组件只在某个父组件的场景下有意义，这层关系应该体现在其名字上。因为编辑器通常会按字母顺序组织文件，所以这样做可以把相关联的文件排在一起，增加可读性。
```
components/
|- TodoList.vue
|- TodoListItem.vue
|- TodoListItemButton.vue
```
  1
  2
  3
  4
- # 组件 Prop 名 JS 中使用小驼峰 camelCase ,在模板中使用 kebab-case 短横线
```
props: {
  greetingText: String
}
```
  1
  2
  3
```
<my-component greeting-text="hi"/>
```
  1
- # 指令缩写： 用 : 表示 v-bind:、用 @ 表示 v-on: 和用 # 表示 v-slot:

# props 规范写法

    propA: Number,
    propB: [String, Number],
    propC: {
      type: Number,
      default: 100
    },
    // 对象和数组默认值default由一个函数返回
    propE: {
      type: Object,
      default() {
        return { message: 'hello' }
      }
    },
    propF: {
      type: Array,
      default() {
        return []
      }
    },

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

# 避免使用 v-html 渲染 HTML 文本，因为存在 XSS 攻击风险。

# 可使用 vue-dompurify-html 插件替代，使用方法如下
```
//下载依赖
npm i vue-dompurify-html

//main.js引入挂载在vue原型上
import VueDOMPurifyHTML from 'vue-dompurify-html'
Vue.use(VueDOMPurifyHTML)

//使用
<div v-dompurify-html="src" />
```
1
2
3
4
5
6
7
8
9
原理：使用 DOMPurify 删除包含危险 HTML 的所有内容，防止 XSS 攻击

# 自动代码修复

# WebStorm 见https://www.prettier.cn/docs/webstorm.html

# VsCode settings.json 中添加以下配置

  // 添加 vue 支持
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    "vue"
  ],

  // 保存文件时eslint自动修复
  "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,
        "eslint.autoFixOnSave" : true,
  },

  // 保存文件时eslint自动格式化
  "editor.formatOnPaste": true, // 自动格式化粘贴的内容
  "editor.formatOnType": true  // 键入一行后自动格式化该行
  "editor.formatOnSave": true, // 保存时格式化代码
  "editor.formatOnSaveMode": "file" // 保存时格式化整个文件

  // 添加其他文件默认格式化程序
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

# 插件 Prettier

# 了解更多见官网https://www.prettier.cn/
```
npm install --save-dev --save-exact prettier
```
1
项目根目录添加配置文件.prettierrc

设置编译器默认格式化代码为 Prettier
# ESLint 插件支持

babel-eslint: eslint 与 babel 整合包，定义在.eslintrc.*的 plugin 属性中

eslint-plugin-vue：eslint 保存自动修复

@vue/cli-plugin-eslint：eslint 保存自动修复

eslint-plugin-promise：验证 es6+ promise 规则

eslint-plugin-import：针对 impot 语法优化的插件，防止 webpack 自定义路径造成的错误

eslint-import-resolver-webpack： Webpack-literate 模块解析插件，用于 eslint-plugin-import

eslint-config-prettier ：eslint 关闭所有不必要或可能与 Prettier 冲突的规则

eslint-plugin-prettier ：运行 prettier 代码格式化插件的配置

eslint-config-standard ：JavaScript 标准样式的 ESLint 可配置，基础配置

eslint-webpack-plugin：eslint 解析器，因为 webpack 是识别 js，要解析 eslint 必须的 loader，这是 webpack 的基本步骤，相对于老版的 eslint-loader，eslint-loader 后续不再更新

# package.json 添加以下插件（建议使用以下版本号，防止插件版本互相冲突，）
```
  "devDependencies":{
    "@babel/eslint-parser": "^7.17.0",
    "@vue/cli-plugin-babel": "^5.0.4",
    "@vue/cli-plugin-eslint": "^5.0.4",
    "eslint": "^8.12.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-import-resolver-webpack": "^0.13.2",
    "eslint-plugin-import": "^2.25.4",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-promise": "^6.0.0",
    "eslint-plugin-vue": "^8.5.0",
    "prettier-eslint": "^13.0.0",
    "@commitlint/cli": "^16.2.3",
    "@commitlint/config-conventional": "^16.2.1",
    "husky": "^7.0.0",
    "lint-staged": "^12.3.7",
  },
```
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# commit 校验

# 代码前增加 eslint 校验修复、prettier 格式化及 commit 描述规范验证

# package.json 添加以下配置
```
  "scripts": {
  	...,
    "prepare": "npx husky install",
    "postprepare": "npx husky set .husky/pre-commit \"npx lint-staged\" && npx husky set .husky/commit-msg \" npx --no -- commitlint --edit $1 \""
  },
  "lint-staged": {
    "src/**/*.{js,jsx,vue}": [
      "eslint --fix",
      "prettier --write"
    ]
  },
```
1
2
3
4
5
6
7
8
9
10
11
12
在.gitignore 添加声明
```
...
pre-commit
commit-msg
...
```
1
2
3
4
# commit 规范：

docs：文档更新

feat：新增功能

fix：bug 修复

perf：性能优化

refactor：重构代码(既没有新增功能，也没有修复 bug)

style：不影响程序逻辑的代码修改(修改空白字符，补全缺失的分号等)

test：新增测试用例或是更新现有测试

revert：回滚某个更早之前的提交

build：主要目的是修改项目构建系统(例如 glup，webpack，rollup 的配置等)的提交

ci：主要目的是修改项目继续集成流程(例如 Travis，Jenkins，GitLab CI，Circle 等)的提交

chore：不属于以上类型的其他类型(日常事务)
# 配置文件（添加在根目录下）

.prettierrc

.eslintrc.js

commitlint.config.js
# 统一项目目录结构

|-- demo

|-- .editorconfig 统一不同编辑器的代码风格的配置文件

|-- .eslintrc.js ESLint 配置文件

|-- .gitignore git 忽略文件

|-- .prettierrc Prettier 配置文件

|-- commitlint.config.js commitlint 配置文件

|-- package.json 包管理文件

|-- README.md 项目描述文件

|-- vue.config.js vue 配置文件

|-- .husky git hook 工具(初始化自动生成)

| |-- commit-msg

| |-- pre-commit

| |-- _

| |-- .gitignore

| |-- husky.sh

|-- public 公共文件

| |-- favicon.ico 网站图标

| |-- index.html 首页

| |-- lottie 动画

| | |-- login

| | | |-- data.json 动画数据

| | | |-- images 动画所需图片

| | | |-- bg_left.png

|-- src

|-- App.vue 应用程序入口文件

|-- config.js 配置文件

|-- main.js 主文件

|-- api 接口文件

| |-- common.js

|-- assets 资源文件（图片较多时建议存放在项目模块命名的文件夹下）

| |-- lock.png

| |-- login-bg.png

| |-- search.png

|-- components 公共组件

| |-- index.js 组件自动化全局注册（不用在页面内部引入）

| |-- custom

| | |-- SvgIcon.vue

|-- icons

| |-- index.js svg 图标自动化注册

| |-- png 普通 icon

| | |-- edit.png

| | |-- plus.png

| | |-- remove.png

| |-- svg

| |-- bug.svg

| |-- evaluate.svg

|-- router 路由文件

| |-- index.js

|-- store 状态管理

| |-- index.js

|-- styles

| |-- common.scss 公共样式

| |-- element-ui.scss 外部组件样式

| |-- font.css 字体导入

| |-- index.scss 样式导入

| |-- layout.scss 布局样式

| |-- font 字体文件

| |-- Alibaba-PuHuiTi-Bold.woff

| |-- Alibaba-PuHuiTi-Medium.woff

| |-- Alibaba-PuHuiTi-Regular.woff

|-- utils 工具库

| |-- biz.js

| |-- bus.js

|-- views 视图文件

| |-- knowledge 项目模块

| | |-- KnowledgeMaterial.vue

| | |-- components 模块内组件

| | |-- KnowledgeTree.vue
# README 建议
- 应包含项目原型、UI、API、正式环境、测试环境地址及账号密码
- 项目目录描述

上次更新: 2024/01/18, 10:44:15

← 前端须知前端框架系统→

统一前端代码风格

# 注释规范

# 顶部文档注释（推荐使用）

# 方法注释

# HTML 板块注释

# 标签(组件)属性顺序

# vue 实例顺序

# 命名规范-组件

# 多个单词组成，以大驼峰命名方式

# 基础组件以特定的前缀开头如 `Base`、`App` 、 `V`

# 单页面使用的不存在复用组件以 `The` 前缀命名，标识唯一性

# DOM 模板中使用 kebab-case 短横线声明

# JS/JSX 中组件名使用 PascalCase 大驼峰

# 耦合的组件名--父组件紧密耦合的子组件应该以父组件名作为前缀命名

# 组件 Prop 名 JS 中使用小驼峰 camelCase ,在模板中使用 kebab-case 短横线

# 指令缩写：用 `:` 表示 `v-bind:`、用 `@` 表示 `v-on:` 和用 `#` 表示 `v-slot:`

# props 规范写法

# 避免使用 v-html 渲染 HTML 文本，因为存在 XSS 攻击风险。

# 可使用 vue-dompurify-html 插件替代，使用方法如下

# 自动代码修复

# WebStorm 见https://www.prettier.cn/docs/webstorm.html

# VsCode settings.json 中添加以下配置

# 插件 Prettier

# 了解更多见官网https://www.prettier.cn/

# ESLint 插件支持

# package.json 添加以下插件（建议使用以下版本号，防止插件版本互相冲突，）

# commit 校验

# 代码前增加 eslint 校验修复、prettier 格式化及 commit 描述规范验证

# package.json 添加以下配置

# commit 规范：

# 配置文件（添加在根目录下）

# 统一项目目录结构

# README 建议

统一前端代码风格

# 注释规范

# 顶部文档注释（推荐使用）

# 方法注释

# HTML 板块注释

# 标签(组件)属性顺序

# vue 实例顺序

# 命名规范-组件

# 多个单词组成，以大驼峰命名方式

# 基础组件以特定的前缀开头如 Base、App 、 V

# 单页面使用的不存在复用组件以 The 前缀命名，标识唯一性

# DOM 模板中使用 kebab-case 短横线声明

# JS/JSX 中组件名使用 PascalCase 大驼峰

# 耦合的组件名--父组件紧密耦合的子组件应该以父组件名作为前缀命名

# 组件 Prop 名 JS 中使用 小驼峰 camelCase ,在模板中使用 kebab-case 短横线

# 指令缩写： 用 : 表示 v-bind:、用 @ 表示 v-on: 和用 # 表示 v-slot:

# props 规范写法

# 避免使用 v-html 渲染 HTML 文本，因为存在 XSS 攻击风险。

# 可使用 vue-dompurify-html 插件替代，使用方法如下

# 自动代码修复

# WebStorm 见https://www.prettier.cn/docs/webstorm.html

# VsCode settings.json 中添加以下配置

# 插件 Prettier

# 了解更多见官网https://www.prettier.cn/

# ESLint 插件支持

# package.json 添加以下 插件（建议使用以下版本号，防止插件版本互相冲突，）

# commit 校验

# 代码前增加 eslint 校验修复、prettier 格式化及 commit 描述规范验证

# package.json 添加以下配置

# commit 规范：

# 配置文件（添加在根目录下）

# 统一项目目录结构

# README 建议

# 基础组件以特定的前缀开头如 `Base`、`App` 、 `V`

# 单页面使用的不存在复用组件以 `The` 前缀命名，标识唯一性

# 组件 Prop 名 JS 中使用小驼峰 camelCase ,在模板中使用 kebab-case 短横线

# 指令缩写：用 `:` 表示 `v-bind:`、用 `@` 表示 `v-on:` 和用 `#` 表示 `v-slot:`

# package.json 添加以下插件（建议使用以下版本号，防止插件版本互相冲突，）