前端代码规范

EditorConfig

EditorConfig 有助于跨不同编辑器和 IDE 处理同一项目的多个开发人员保持一致的编码风格。EditorConfig 项目由用于定义编码样式的文件格式和文本编辑器插件集合组成，这些插件使编辑器能够读取文件格式并遵守定义的样式。EditorConfig 文件易于读取，并且可以很好地与版本控制系统配合使用

跨编辑器和IDE编写代码，保持一致的简单编码风格

更详细的配置文档请访问https://editorconfig.org/查看

使用方法

通过在项目根目录创建**.editorconfig**文件添加如下配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 表示是最顶层的配置文件，发现设为true时，才会停止查找.editorconfig文件
root = true
# 匹配全部文件
[*]
# 设置编码，值为latin1、utf-8、utf-8-bom、utf-16be和utf-16le，不建议使用utf-8-bom
charset = utf-8
# 设置缩进风格(tab是硬缩进，space为软缩进)
indent_style = space
# 用一个整数定义的列数来设置缩进的宽度，如果indent_style为tab，则此属性默认为tab_width
indent_size = 2
# 用一个整数来设置tab缩进的列数。默认是indent_size indent_style为tab时启用此设置
# tab_width = 2
# 设置换行符，值为lf(\n)、cr(\r)和crlf(\r\n)
end_of_line = lf
# 设为true表示使文件以一个空白行结尾
insert_final_newline = true
# 设为true表示会去除换行行首的任意空白字符。
trim_trailing_whitespace = true

注意

为了使配置生效请访问官网根据自己使用的编辑器下载相关插件安装使用

Prettier

Prettier是一款侧重于前端的代码格式化工具（JavaScript · TypeScript · Flow · JSX · JSON · ·HTML · Vue · Angular ·GraphQL · Markdown · YAML），它可以统一项目中多人开发的代码风格，通过安装插件来读取配置应用定义的样式。

专注于代码格式化的工具，美化代码

更详细的配置文档请访问https://prettier.io/查看

使用方法

.prettierrc .prettierrc.json .prettierrc.js prettier.config.js

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
{
  // 指定打印机将换行的行长度
  "printWidth": 80,
  // 在语句末尾打印分号
  "semi": false,
  // 使用单引号而不是双引号
  "singleQuote": true,
  // 将>多行 HTML（HTML、JSX、Vue、Angular）元素的 放在最后一行的末尾，而不是单独放在下一行（不适用于自关闭元素）
  "bracketSameLine": true,
  // 箭头函数括号 "always"- 始终包含括号 "avoid"- 尽可能省略括号
  "arrowParens": "avoid",
  // 尾随逗号 "all"- 尽可能使用尾随逗号 "es5"- ES5 中有效的尾随逗号 "none"- 没有尾随逗号
  "trailingComma": "none",
  // Vue 文件脚本和样式标签缩进 false - 不要在 Vue 文件中缩进脚本和样式标签 true - Vue 文件中缩进脚本和样式标签
  "vueIndentScriptAndStyle": false,
  // 在 HTML、Vue 和 JSX 中强制每行使用单一属性
  "singleAttributePerLine": false,
  // 以下三项设置注意：当项目中已有EditorConfig配置优先在.editorconfig中配置，则不用配置以下三项
  // 换行符 同EditorConfig中的end_of_line
  "endOfLine": "lf",
  // 缩进风格 同EditorConfig中的indent_style
  "useTabs": false,
  // 缩进的宽度 同EditorConfig中的indent_size
  "tabWidth": 2
}

注意

为了使配置生效请访问官网根据自己使用的编辑器下载相关插件安装使用

ESlint

ESLint 是一个用于识别和报告在 ECMAScript/JavaScript 代码中发现的模式的工具，其目标是使代码更加一致并避免错误

作代码质量检测、编码风格约束等

https://eslint.org/

初始化安装

在项目根目录执行

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
npm init @eslint/config
== 1 ========================
? 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
== 2 ========================
? What type of modules does your project use? … 
❯ JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these
== 3 ========================
? Which framework does your project use? … 
  React
❯ Vue.js     # 针对vue项目来说需要选择此
  None of these
== 4 ========================
? Does your project use TypeScript? › No / Yes
== 5 ========================
? Where does your code run? …  (Press <space> to select, <a> to toggle all, <i> to invert selection)
✔ Browser
✔ Node
== 6 ========================
? How would you like to define a style for your project? … 
  Use a popular style guide
❯ Answer questions about your style
== 7 ========================
? What format do you want your config file to be in? … 
  JavaScript
  YAML
❯ JSON
== 8 ========================
? What style of indentation do you use? … 
  Tabs
❯ Spaces
== 9 ========================
? What quotes do you use for strings? … 
  Double
❯ Single
== 10 ========================
? What line endings do you use? … 
❯ Unix
  Windows
== 11 ========================
? Do you require semicolons? › No / Yes
== 12 ========================
? Would you like to install them now? › No / Yes 
== 13 ========================
? Which package manager do you want to use? … 
  npm
❯ yarn
  pnpm
== 全部配置选项 ======================== 
✔ How would you like to use ESLint? => To check syntax, find problems, and enforce code style
✔ What type of modules does your project use? => JavaScript modules 
✔ Which framework does your project use? => Vue.js
✔ Does your project use TypeScript? => Yes
✔ Where does your code run? => (browser, node)
✔ How would you like to define a style for your project? => Answer questions about your style
✔ What format do you want your config file to be in? => JSON
✔ What style of indentation do you use? => Spaces
✔ What quotes do you use for strings? => Single
✔ What line endings do you use? => Unix # 换行符统一使用 Unix(lf)
✔ Do you require semicolons? => No
✔ Would you like to install them now? => Yes
✔ Which package manager do you want to use? => yarn

安装完成后，会生成**.eslintrc.json**配置文件

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
{
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:vue/vue3-essential"
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "parser": "@typescript-eslint/parser",
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint",
        "vue"
    ],
    "rules": {
        "indent": [
            "error",
            2       // 修改为2 统一缩进
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "never"
        ]
    }
}

在package.json文件中的script中添加lint命令

1
2
3
4
5
6
7
8
{
    "scripts": {
        // eslint . 为指定lint当前项目中的文件
        // --ext 为指定lint哪些后缀的文件
        // --fix 开启自动修复
        "lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix"
    }
}

执行lint命令

1
npm run lint # 执行eslint代码检查

规则配置请访问https://eslint.org/docs/latest/rules/，通过配置eslint配置文件中的属性rules

配置规则的值是可以是以下值之一的错误级别：

  • "off"或者0- 关闭规则
  • "warn"或1- 打开规则作为警告（不影响退出代码）
  • "error"或2- 将规则作为错误打开（触发时退出代码为 1）

ESLint 与 Prettier配合使用

Prettier和ESLint，前者用于代码的格式化，后者专注于代码质量和风格检查，接下来介绍怎样配合使用

首先安装prettier

1
npm install prettier --save-dev

两个工具在配置规则上有类似的属性会有冲突的地方，如果配置有差异，常常会出现使用Prettier格式化完代码，导致ESLint检查不通过，可以使用eslint-config-prettier+eslint-plugin-prettier来解决这个问题

eslint-config-prettier 关闭eslint可能与Prettier冲突的规则

eslint-plugin-prettier 使eslint支持prettier，根据prettier配置的规则去检查代码风格

1
npm install eslint-config-prettier eslint-plugin-prettier --save-dev

修改eslint配置

1
2
3
4
5
6
7
8
{ 
    extends: [
      'eslint:recommended',
      'plugin:vue/vue3-essential',
      'plugin:@typescript-eslint/recommended',
    + 'plugin:prettier/recommended'  // ===== 添加此配置，放到最后 ===== 
    ],
}

配置完成，如果编辑器对新规则未生效的话，请检查配置项或者格式是否有错误的地方，如果没有的话，可以试试重启编辑器