前端工程规范化之代码质量与格式

前言

当我们的程序能跑以后，一般不出 bug 基本不会再去动它。但是作为有追求的程序员，当然希望自己的代码不仅跑的好，也要有一定质量和规范。

幸运的是现在已经有不少成熟的工具来帮助我们实现一定的规范，让我们来试试吧！

示例见 steins/frontend-project-normalize 各分支, 欢迎尝试！

一键偷懒

如果我们想规范化自己的代码质量与格式，又不想费劲研究一个个规则，prettier 之类的加不加也不清楚到底能干嘛，能跑就行！

请允许我隆重推荐由 @Anthony Fu 出品的 ESlint-config, 极简配置，简单好用，久经考验，持续更新！

添加 ESlint-config 相关依赖

1
$ pnpm add -D eslint @antfu/eslint-config

添加相关配置文件及 VS Code ESlint 插件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$ touch .eslintrc
$ echo -e '{\n  "extends": "@antfu"\n}' > .eslintrc

# In package.json
{
  "scripts": {
  ...
    "lint": "eslint ./src",
    "lint:fix": "eslint ./src --fix"
  }
}

# After install VS Code ESLint extension
$ touch .vscode/settings.json

# Create .vscode/settings.json
{
  "prettier.enable": false,
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

接下来就是简单的看看我们的代码有多少进步空间的时候了，pnpm run lint !

eslint-config 结果

也就 3419 个 problems，问题不大😇，改吧改吧…

同时需要注意，我们仍然拥有修改 eslint 配置的能力，比如说项目里 console 想保留，但是 ESlint-config 规则里规定要去除，我们就可以手动修改这部分权限。

1
2
3
4
5
6
7
// Edit .eslintrc
{
    "extends": "@antfu",
    "rules": {
      "no-console": "off"
    }
}

eslint-config 效果

ESLint + Prettier

一般来说公司或组织都会有自己的一套代码规范，基本就是 ESLint + Prettier，前者负责代码质量，后者负责代码格式，各司其职，专业的人做专业的事。

添加 ESLint 及 Pretter 相关依赖

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# For prettier
$ pnpm install --save-dev --save-exact prettier

# For ESlint
$ pnpm create @eslint/config

# Follow guidence
√ How would you like to use ESLint? · problems    
√ What type of modules does your project use? · esm
√ Which framework does your project use? · vue
√ Does your project use TypeScript? · No / Yes
√ Where does your code run? · browser
√ What format do you want your config file to be in? · JSON
Local ESLint installation not found.
The config that you've selected requires the following dependencies:

eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest eslint@latest
√ Would you like to install them now? · No / Yes
√ Which package manager do you want to use? · pnpm
Installing eslint-plugin-vue@latest, @typescript-eslint/eslint-plugin@latest, @typescript-eslint/parser@latest, eslint@latest

# Fix conflicts using related plugin
pnpm install --save-dev eslint-config-prettier eslint-plugin-prettier

添加相关配置文件及 VS Code ESlint 插件

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
# Important! .prettierrc.json should be saved in UTF-8 format
$ touch .prettierrc.json
$ echo {} > .prettierrc.json

# Edit .eslintrc.json
{
...
    "extends": [
        "plugin:prettier/recommended",
        "plugin:vue/vue3-essential",
        "plugin:@typescript-eslint/recommended"
    ],
...
}

# In package.json
{
  "scripts": {
  ...
    "lint": "eslint ./src",
    "lint:fix": "eslint ./src --fix",
    "format": "prettier --write ./src"
  }
}

# After install VS Code ESLint extension
$ touch .vscode/settings.json

# Create .vscode/settings.json
{
  "prettier.enable": false,
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

校验或修正代码

1
2
3
4
5
$ pnpm run lint
or
$ pnpm run lint:fix
or 
$ pnpm run format

eslint-prettier 效果

ESLint

当然，适合别人的不一定是适合我们自己的，从上面两个例子我们也可以看出来很多时候我们是需要配置一些属于自己的规则的，返璞归真我们可能还是需要了解 ESLint 自身。

添加 ESLint 相关依赖

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$ pnpm create @eslint/config

# Follow guidence
√ How would you like to use ESLint? · problems    
√ What type of modules does your project use? · esm
√ Which framework does your project use? · vue
√ Does your project use TypeScript? · No / Yes
√ Where does your code run? · browser
√ What format do you want your config file to be in? · JSON
Local ESLint installation not found.
The config that you've selected requires the following dependencies:

eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest eslint@latest
√ Would you like to install them now? · No / Yes
√ Which package manager do you want to use? · pnpm
Installing eslint-plugin-vue@latest, @typescript-eslint/eslint-plugin@latest, @typescript-eslint/parser@latest, eslint@latest

添加相关配置文件及 VS Code ESlint 插件

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
$ pnpm create @eslint/config

√ How would you like to use ESLint? · problems    
√ What type of modules does your project use? · esm
√ Which framework does your project use? · vue
√ Does your project use TypeScript? · No / Yes
√ Where does your code run? · browser
√ What format do you want your config file to be in? · JSON
Local ESLint installation not found.
The config that you've selected requires the following dependencies:

eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest eslint@latest
√ Would you like to install them now? · No / Yes
√ Which package manager do you want to use? · pnpm
Installing eslint-plugin-vue@latest, @typescript-eslint/eslint-plugin@latest, @typescript-eslint/parser@latest, eslint@latest

# package.json
{
...
	"scripts": {
		...
        "lint": "eslint ./src",
        "lint:fix": "eslint ./src --fix",
	}
}

# After install VS Code ESLint extension
$ touch .vscode/settings.json

# Create .vscode/settings.json
{
  "prettier.enable": false,
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

校验或修正代码

1
2
3
$ pnpm run lint
or
$ pnpm run lint:fix

eslint 结果.png

还好还好，这下只有 23 个 problems 了，这是真问题不大，改改改…

相关规则可查阅 ESlint: Rules 并根据需要自行添加。

eslint 效果

Prettier

当我们只想规范化代码格式的时候我们可以选择仅使用 Prettier 。

想要定制自己的规则时可以访问 Prettier: Playground 可视化定制并导出 json 文件。

添加 Prettier 相关依赖

1
$ pnpm install --save-dev --save-exact prettier

添加相关配置文件

1
2
3
4
5
6
7
8
9
10
11
12
# package.json
{
...
	"scripts": {
		...
        "prettier": "prettier --check ./src",
        "prettier:fix": "prettier --write ./src" 
	}
}

# Important! .prettierrc.json should be saved in UTF-8 format
$ echo {} > .prettierrc.json

校验或修正代码

1
2
3
$ pnpm run prettier
or
$ pnpm run prettier:fix

prettier 效果

Stylelint

既然我们已经可以通过 ESlint 和 Prettier 规范化代码格式与质量了，应该也许可能没什么需要优化了？并不，我们还有 CSS 呢！

Stylelint 正是专门负责校验 CSS 代码质量与格式的。当然，如果我们已经用了 Prettier，那么需要注意解决格式化之间的冲突。

添加 Stylelint 相关依赖

1
$ pnpm install --save-dev stylelint stylelint-config-standard

添加相关配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$ touch .stylelintrc.json

# .stylelintrc.json
{
  "extends": "stylelint-config-standard"
}

# package.json
{
...
	"scripts": {
		...
		"style": "stylelint ./src/assets/style '**/*.css'"
	}
}

校验或修正代码

1
$ pnpm run style

stylelint 效果

结语

现在我们完成了代码的质量与格式的规范化，确实与最初的样子有了很大的区别。那是不是我们的前端工程规范化可以告一段落了呢？

并不，别忘了，修改后的代码我们都得提交呢！ git commit 的过程也是可以有一定规范的，在下一章我们就将了解到代码提交的相关规范化过程。

Frontend > Normalize
#frontend #normalize
前端工程规范化之代码质量与格式
http://example.com/2022/11/12/前端工程规范化之代码质量与格式/
作者
Steins Gu
发布于
2022年11月12日
许可协议