保障代码风格&质量_.net 代码质量

一、简述

软件项目两大指标

• 代码风格统一
• 代码质量

1.1 什么是代码风格？

大括号是否换行？
加分号还是不加分号？
tab还是空格？
......
1
2
3
4

关于代码风格，我们很难区分谁对谁错，不同的人有不同偏好，唯有强制要求才能规避争论。
所以，团队关于代码风格必须遵循两个基本原则：

• 少数服从多数；
• 用工具统一风格。

1.2 什么是代码质量？

禁止重复的 case 标签
禁止对 function 声明重新赋值
禁止 function 定义中出现重名参数
......
1
2
3
4

代码质量是指容易引起应用异常或无意义的语句。

二、前端如何保障代码风格与代码质量

为了解决软件项目的两大指标，前端生态链目前主流推出了三大工具editorConfig、prettier、eslint。
其中editorConfig和prettier是用于统一代码风格，eslint是用于提高代码品味。

2.1 EditorConfig配置

EditorConfig顾名思义是编辑器配置，用于跨编辑器保持同一份代码风格
首先需要安装插件EditorConfig for VS Code，安装完成后，编辑器在启动项目时就会读取.editorconfig的配置。配置示例如下：

root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false
1
2
3
4
5
6
7
8
9
10
11
12

常用属性

indent_style: 设置为制表符或空格分别使用硬制表符或软制表符。
indent_size：定义用于每个缩进级别的列数和软制表符的宽度（如果支持）的整数。当设置为tab 时，tab_width将使用（如果指定）的值。
tab_width：定义用于表示制表符的列数的整数。这默认为 的值，indent_size通常不需要指定。
end_of_line: 设置为lf、cr或crlf以控制换行符的表示方式(保存时)。
charset: 设置为latin1 , utf-8 , utf-8-bom , utf-16be或utf-16le来控制字符集。
trim_trailing_whitespace: 设置为true以删除换行符之前的任何空白字符，设置为false以确保它不会(保存时)。
insert_final_newline: 设置为true以确保文件在保存时以换行符结尾，设置为false以确保它没有(保存时)。
root: 应在文件顶部任何部分之外指定的特殊属性。设置为true以停止.editorconfig对当前文件的文件搜索。
max_line_length: 在指定的字符数之后强制换行。off关闭此功能（使用编辑器设置）。
1
2
3
4
5
6
7
8
9

文件匹配规则

*	匹配任何字符串，路径分隔符 ( /)除外
**	匹配任何字符串
?	匹配任何单个字符
[name]	匹配name字符
[!name]	不匹配name字符
{s1,s2,s3}	匹配任何给定的字符串（以逗号分隔）（自 EditorConfig Core 0.11.0 起可用）
{num1..num2}	匹配num1和num2之间的任何整数，其中 num1 和 num2 可以是正数或负数
1
2
3
4
5
6
7

打开文件时，EditorConfig 插件会在打开文件的目录和每个父目录中查找命名为.editorConfig的文件。搜索过程中如果到达根文件路径或在在.editorConfig 文件中找到root=true，则文件搜索将停止。

EditorConfig 文件从上到下读取，最新发现的规则优先。匹配 EditorConfig 部分的属性按它们被读取的顺序应用，因此更接近文件中的属性优先。

官方文档：
https://editorconfig.org/
https://github.com/editorconfig/editorconfig/wiki/EditorConfig-Properties

2.2 prettier配置

为什么用了editorConfig又使用prettier

prettier和editorConfig一样都是为了规范代码风格，但是又有一些不同。比如：
editorConfig设置tab键占四个空格，prettier设置tab键占两个空格。当点击tab键时，会空四个空格，保存时会缩进两个空格。

editorConfig时编辑器配置，所以它的应用场景在保存前保存后都有，比如保存前tab键是tab还是空格，缩进占四个字符还是占两个字符，保存时文件是否以换行符结尾。

prettier的应用场景都是在保存时。

安装使用prettier

需要先安装插件Prettier-Code formatter。要做到vscode中保存即使用，需要setting.json的{formatOnSave: true}，且配置对应的语言检测机制，如下配置有"[javscript]…"，此时js文件保存时即检查。（在任一js文件，按下快捷键 alt+shift+f 格式化代码，setting.json会自动添加如下"[javascript]…"，其他语言类推）

{
  "javascript.format.enable": false, // 禁用vscode默认的js格式化插件
  "editor.formatOnSave": true, // 保存代码的时候格式化
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode" // js文件采用prettier进行格式化
  },
}
1
2
3
4
5
6
7

各系统格式化快捷键
● Windows Shift + Alt + F
● Mac 　　 Shift + Option + F
● Ubuntu Ctrl + Shift + I

常用配置

{
  "printWidth": 80, //一行的字符数，如果超过会进行换行，默认为80
  "tabWidth": 2, //一个tab代表几个空格数，默认为80
  "useTabs": false, //是否使用tab进行缩进，默认为false，表示用空格进行缩减
  "singleQuote": false, //字符串是否使用单引号，默认为false，使用双引号
  "semi": true, //行位是否使用分号，默认为true
  "trailingComma": "none", //是否使用尾逗号，有三个可选值"<none|es5|all>"
  "bracketSpacing": true, //对象大括号直接是否有空格，默认为true，效果：{ foo: bar }
  "parser": "babylon" //代码的解析引擎，默认为babylon，与babel相同。
}
1
2
3
4
5
6
7
8
9
10

2.3 eslint配置

eslint是代码静态分析工具，用于发现不符合规范的代码，提高代码质量

安装使用eslint

// 安装在本地项目
npm i --save-dev eslint

// 全局安装eslint
npm i -g eslint

// 项目根目录
eslint --init

安装插件ESlint，保存时自动检查配置如下：

"eslint.alwaysShowStatus": true,
 "eslint.autoFixOnSave": true,
 "eslint.validate": [
   "javascript",
   "javascriptreact",
   "typescript",
   "typescriptreact"
 ]
1
2
3
4
5
6
7
8

安装ESLint插件
在.vscode中setting.json中开启代码保存自动修复eslint告警功能

"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
1
2
3

项目中使用：
//在package.json的scripts中添加
“eslint”: “eslint --fix ./”

注意：不要在vscode开启全局使用eslint：eslint规范的是代码特性，且不说语言有可能进化，不同场景对代码的要求也不同，不适合一刀切。使用正规大厂的代码的标准，比如说业界最有名的airbnb。尽量不要使用自己定义的标准，我们往往因为偷懒和理解不深，定的标准不够全面。

三、解决Eslint和prettier冲突

3.1 eslint既能规范编码风格，也能提升代码质量。为什么两个都用？

• eslint的代码格式化有盲区，只针对js,jsx,ts,tsx，不能格式化HTML, CSS/Less,/Sass，Markdown, YAML, GraphQL，以及vue中的html和css。
• eslint专注于代码质量检查，代码风格的处理并不是重点放向，prettier专注于处理代码风格。

3.2 Prettier和ESLint为什么会冲突?

Prettier的功能比较专一，是专门用来格式化代码的，格式化代码的范围比ESLint广泛。

ESLint的功能相对综合，大体可以分为类，一类是规范代码风格： 一类是规范代码质量：

它们之所以会冲突，就是因为功能有交叉了，各自定的规则不同，比如Prettier格式化代码，默认每行后面加分号，而ESLint的规则是不加，再比如Prettier格式化代码时，字符串会用双引号包起来，而ESLint的规则是单引号，由此就产生的冲突。

3.3 如何解决两者的冲突?

要么修改Prettier的规则，使之与ESLint保持一致，要么修改ESLint的校验规则，使之与Prettier的代码格式化风格一致，究竟要改哪一个，都可以。但是最好倾向于改ESlint的规则，因为Prettier的代码格式化规则是普适的，而ESLint的代码校验规则是针对特定语言的，特定的遵从普适的原则上好一些。

安装eslint-config-prettier npm工具包，就可以关闭eslint代码风格部分与prettier冲突的设置。
npm install --save --dev eslint-config-prettier
在.eslintrc.js中添加

{
  "extends": [
    "some-other-config-you-use",
    "prettier"
  ]
}
1
2
3
4
5
6